no-image

マーベルのページをHTMLで書く


<! – <!DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title> </ title>
<link rel = "stylesheet" href = "../ css / reset.css" />
<link rel = "stylesheet" href = "../ css / manwei.css" />
</ head>
<body>
<! – ナビゲーションバー – >
<header>
<nav>
<img src = "../ images / logo.jpg" alt = "" />
<a href="">ホーム</a>
<a href="">最新ニュース</a>
<a href="">
マーベルユニバース
<ol>
<li>映画</ li>
<li>エピソード</ li>
<li>アニメ</ li>
</ ol>
</a>
</ nav>
</ header>
<! – Sprite Chart – >
<div class = "beij">
<i class = "xuebi"> </ i>
</ div>
<! – USチーム画像 – >
<div class = "zhongjian">
<img src = "../ images / new_title.png" alt = "" />
<div>
<div class = "aa">
<div>
<img src = "../ images / new_pic01.jpg" alt = "" />
</ div>
<div>
<a href="">
<p> <strong>予備点火俳優が米国チーム3に加わります</ strong> </ p>
<p> Josh LorraineはRewiring 3の究極のブーイングとなるでしょう。</ p>
</a>
</ div>
</ div>
<div class = "mll">
<div>
<img src = "../ images / new_pic02.jpg" alt = "" />
</ div>
<div>
<a href="">
<p> <strong> Antから新しい写真を再生する</ strong> </ p>
<p> 7月17日の北米でのマーベルの第2ステージフィナーレ</ p>
</a>
</ div>
</ div>
<div class = "cc">
<div>
<img src = "../ images / new_pic03.jpg" alt = "" />
</ div>
<div>
<a href="">
<p> <strong>アヴェンジャーのアクションモバイルゲームのプレイを待つ</ strong> </ p>
<p>ヒーロー、立つ! </ p>
</a>
</ div>
</ div>
</ div>
</ div>
<! – ステージバー – >
<div class = "jieduan">
<div>
<p> <strong>マーベル映画</ strong> </ p>
<a href="">第1フェーズ</a>
<a href="">第2段階</a>
<a href="">フェーズ3 </a>
<a href="">詳細… </a>
</ div>
<div>
<img src = "../ images / movie_pic.png" alt = "" />
<img src = "../ images / movie_pic02.png" alt = "" />
<img src = "../ images / movie_pic03.png" alt = "" />
<img src = "../ images / movie_pic04.png" alt = "" />
<img src = "../ images / movie_pic05.png" alt = "" />
<img src = "../ images / movie_pic06.png" alt = "" />
<a class="x" href="">アイアンマン</a>
<a class="u" href="">アイアンマン2 </a>
<a class="e" href="">キャプテンアメリカ3 </a>
<a class="b" href="">無敵ハルク</a>
<a class="i" href=""> Raytheon </a>
<a class="kk" href="">アライアンスを復讐させる</a>
</ div>

</ div>
<! – Marvelのエピソード – >
<div class = "juji">

<div class = "juese">
<p>マンウェイのエピソード</ p>
<a href="">詳細
</ div>

<i> </ i>
<i> </ i>
<i> <a href="">この映画を見る</a> </ i>
<i> <a href="">コンテンツの追加</a> </ i>
<div class = "move">
<img src = "../ images / watch_pic02.jpg" alt = "" title = "これは短いビデオです" /> <i class = "bb"> </ i>
<img src = "../ images / watch_pic02.jpg" alt = "" title = "これは短いビデオです" /> <i class = "bb"> </ i>
<img src = "../ images / watch_pic02.jpg" alt = "" title = "これは短いビデオです" /> <i class = "bb"> </ i>
</ div>
</ div>
<! – マーベルコミックス – >
<div class = "dongman">
<脇に>
<div>
<p> <strong> Marvel Animation </ strong> </ p>
<a href="">詳細… </a>
</ div>
<div class = "zhizhuxia">
<div>
<div>
<img src = "../ images / dm_pic01.jpg" alt = "" />
</ div>
<div>
<a href="">究極のスパイダーマン:シーズン1予告編<strong>ポジティブ</ strong> </a>
</ div>
</ div>
<div>
<div>
<img src = "../ images / dm_pic02.jpg" alt = "" />
</ div>
<div>
<a href="">究極のスパイダーマン:シーズン2予告編<strong>ポジティブ</ strong> </a>
</ div>
</ div>
<div>
<div>
<img src = "../ images / dm_pic03.jpg" alt = "" />
</ div>
<div>
<a href="">究極のスパイダーマン:シーズン3予告編<strong>ポジティブ</ strong> </a>
</ div>
</ div>
<div>
<div>
<img src = "../ images / dm_pic04.jpg" alt = "" />
</ div>
<div>
<a href="">究極のスパイダーマンハイライト</a>
</ div>
</ div>
</ div>
<div>
<div>
<div class = "aochuang">
<img src = "../ images / dm_pic05.jpg" alt = "" />
</ div>
<div class = "p">
<p> <strong>オーストリアの時代</ strong> </ p>
<p>スパイダーマンは、差別撤廃組織の知恵が宇宙騎士団に向いているような物体を獲得したことを発見したとき、アベンジャーは今後の大惨事の義務も認識していました。 宇宙の騎士たちは人類の絶滅に捧げられた人工知能に変わりました。人間の文明は落ちました。 </ p>
</ div>
</ div>
<div>
<div class = "aochuang2">
<img src = "../ images / 666_03.gif" alt = "" />
</ div>
<div class = "pp">
<p> <strong>オーストリアの時代2 </ strong> </ p>
<p>スーザン・リチャーズは、ウルヴァリンと複雑な気分で過去に戻った。ウルヴァリンを止める予定だったスーザンは、最後に震えた。 。 。 。 二人が未来に戻るとき、彼らのために悪夢を待つ。 </ p> <i> </ i>
</ div>
</ div>
</ div>
</ aside>
</ div>
<! – footer – >
<footer>
<div>
<p> TimeNetが発表したマーベルファンのウェブサイト</ p>
<p> Copyright @ 2006-2015 Mtime.com Incすべての権利を保有しています。</ p>
<p>北京モーションタイムネットワーク技術有限公司北京ICP 050715ネットワークオーディションライセンス0108265北京公安局朝陽支店記録番号:11010507744 </ p>
</ div>
</ footer>
</ body>
</ html>

以下はCSSスタイルシートです – > <! – / *ナビゲーションバー* /
a {
テキスト装飾:なし;
}
ボディ{
高さ:3000px;
}
ヘッダー{
幅:100%;
背景色:#020202;
高さ:61px;
マージン:0オート;
}
ヘッダー> nav {
幅:1002px;
マージン:0オート;
}
ヘッダー> nav> a {
色:白;
線高さ:60px;
余白:56ピクセル;
テキスト装飾:なし;
}
ヘッダー> nav> img {
余白:56ピクセル;
}
Ol {
幅:60px;
パディング:0;
表示:なし;
左:0。
テキスト整列:中央;
背景色:黒;
}
Ol> li {
ボーダー:1pxソリッドホワイト;

}
ヘッダー> nav> a:最後の子:hover ol {
表示:ブロック;
ポジション:絶対;
Z-インデックス:1;
}
ヘッダー> nav> a:last-child {
位置:相対;
}
.beij {
幅:100%;
高さ:540px;
背景画像:url( "../ images / top_banner.jpg");
バックグラウンドポジション:center;
}
/ *スプライト* /
.xuebi {
表示:インラインブロック。
幅:83px;
高さ:60px;
背景画像:url( "../ images / icon.png");
背景の位置:0〜213ピクセル;
}
.xuebi {
パディング:0;
ポジション:絶対;
トップ:338px;
左:360ピクセル。
}
.beij {
位置:相対;
}
.xuebi:ホバー{
表示:インラインブロック。
幅:83px;
高さ:60px;
背景画像:url( "../ images / icon.png");
背景の位置:-85px -213px;
}
/ *画像* /
.zhongjian> img {
マージントップ:28px;
マージンボトム:38px;
}
.zhongjian {
バックグラウンド:repeat-x url( "../ images / new_bj.jpg");
オーバーフロー:隠された;
マージンボトム:136px;
}
.zhongjian> div {
幅:1002px;
高さ:334px;
マージン:0オート;
}
.aa {
フロート:左;
}
.mll {
フロート:左;
}
.cc {
フロート:左;
}
.zhongjian p:ファーストチャイルド{
カラー:ブラック;
マージントップ:14px;
フォントサイズ:18px;
}
.zhongjian p:last-child {
カラー:グレー;
}
.zhongjian p:last-child:ホバー{
色:オレンジ色;
}
/ *ステージバー* /
.jieduan {
幅:100%;
高さ:542px;
}
.jieduan> div:nth-​​child(2){
幅:100%;
高さ:503px;
背景画像:url( "../ images / movie_bj.jpg");
バックグラウンドポジション:center;
}
.jieduan> div:first-child {
幅:1002px;
マージン:0オート;
パディング底部:36px;
}
.jieduan> div:first-child> p {
フォントサイズ:22px;
フロート:左;
}
.jieduan> div:first-child> a {
カラー:ブラック;
フロート:左;
余白 – 左:150ピクセル。
}
.jieduan> div:first-child> a:last-child {
背景:直線勾配(右、緑、青、赤まで)。
色:白;
フォントサイズ:18px;
}
.jieduan> div:first-child> a:ホバー{
色:赤;
}
.jieduan {
位置:相対;
}
.jieduan> div:last-child> img {
ポジション:絶対;
}
.jieduan> div:last-child> img:first-child {
左:246ピクセル。
トップ:104px;
}
.jieduan> div:last-child> img:nth-​​child(3){
左:550ピクセル。
トップ:104px;
}
.jieduan> div:last-child> img:nth-​​child(2){
トップ:350px;
左:410ピクセル。
}
.jieduan> div:last-child> img:nth-​​child(4){
トップ:350px;
左:750ピクセル。
}
.jieduan> div:last-child> img:nth-​​child(5){
トップ:104px;
左:866ピクセル。
}
.jieduan> div:last-child> img:nth-​​child(6){
トップ:350px;
左:1020ピクセル。
}
.jieduan> div:last-child> a {
色:白;
フォントサイズ:18px;
ポジション:絶対;
Z-インデックス:1;
}
.x {
左:246ピクセル。
上部:200ピクセル;
}
.u {
上部:200ピクセル;
左:550ピクセル。
}
.e {
上部:200ピクセル;
左:860ピクセル。
}
.b {
左:452ピクセル。
トップ:350px;
}
.i {
トップ:350px;
左:800ピクセル。
}
.kk {
トップ:350px;
左:1020ピクセル。
}
/ *マン・ウェイドラマシリーズ* /
ジュジュ{
幅:100%;
高さ:556px;
背景画像:url( "../ images / watch_bj.jpg");
バックグラウンドポジション:center;
位置:相対;
}
.juese> a {
背景色:黒;
色:白;
フロート:右。
パディング:10px;
マージン:28px 150px 0 0;
}
.juji> i:nth-​​child(2){
表示:インラインブロック。
幅:34px;
高さ:58px;
背景画像:url( "../ images / icon.png");
バックグラウンドの位置:-73px -37px;
ポジション:絶対;
上:274px;
左:200ピクセル。
}
.juji> i:nth-​​child(3){
表示:インラインブロック。
幅:36px;
高さ:58px;
背景画像:url( "../ images / icon.png");
バックグラウンドポジション:-107px -37px;
ポジション:絶対;
上:274px;
右:200ピクセル。
}
.juji> i:nth-​​child(4){
表示:インラインブロック。
幅:144px;
高さ:36px;
背景画像:url( "../ images / icon.png");
バックグラウンドの位置:0〜354px;
ポジション:絶対;
上:290px;
左:730ピクセル。
}
.juji> i:nth-​​child(5){
表示:インラインブロック。
幅:144px;
高さ:36px;
背景画像:url( "../ images / icon.png");
バックグラウンドの位置:0〜354px;
ポジション:絶対;
左:560ピクセル。
上:290px;
}
.juji> i:nth-​​child(4)> a {
マージン左:40ピクセル。
色:白;
線高さ:30px;
}
.juji> i:nth-​​child(5)> a {
マージン左:30ピクセル。
色:白;
線高さ:30px;
}
.move {
ポジション:絶対;
左:200ピクセル。
Top:346px;
}

.bb {
表示:インラインブロック。
幅:52px;
高さ:60px;
背景画像:url( "../ images / icon.png");
バックグラウンドポジション:-18px -213px;
}
.bb:ホバー{
表示:インラインブロック。
幅:52px;
高さ:60px;
背景画像:url( "../ images / icon.png");
バックグラウンドポジション:-102px -215px;
}
.juese> p {
色:白;
フォントサイズ:24px;
余白:120ピクセル。
パディングトップ:38px;
}
.juese> p:hover {
色:緑;
}
/ *マーベルコミックス* /
.dongman {
幅:100%;
高さ:500px;
マージン:0オート;
パディングトップ:30px;
位置:相対;
背景画像:url( "../ images / am_bj.jpg");
}
.dongman> aside {
幅:1002px;
高さ:559px;
マージン:0オート;
オーバーフロー:隠された;
}
他にも> div:first-child {
オーバーフロー:隠された;
}
他に> div:first-child> p {
フォントサイズ:22px;
フロート:左;
}
他に> div:first-child> a {
フロート:右。
色:白;
フォントサイズ:18px;
背景:線形勾配(右、暗いマゼンタ、緑)。
}
.zhizhuxia> div:first-child {
フロート:左;
}
.zhizhuxia> div:nth-​​child(2){
フロート:左;
}
.zhizhuxia> div:nth-​​child(3){
フロート:左;
}
.zhizhuxia {
オーバーフロー:隠された;
}
.zhizhuxia> div {
余白:20ピクセル;
マージントップ:5px;
}
.zhizhuxia> div a {
カラー:ブラック;
}
.zhizhuxia> div a:ホバー{
色:赤;
}
.zhizhuxia> div a> strong {
背景色:黒;
色:白;
}
.zhizhuxia {
マージンボトム:60px;
}
.aochuang {
フロート:左;
}
.p {
幅:322px;
フロート:左;
マージン – 右:26px;
テキストシャドウ:3px 3px 5px緑;
}
他にも{
オーバーフロー:隠された;
}
.p:ホバー{
色:黄色;
}
.aochuang2 {
フロート:左;
}
.pp:hover {
色:青;
}
.pp {
幅:322px;
フロート:左;
テキストシャドー:3px 3px 5px赤;
}
私は{
表示:インラインブロック。
幅:36px;
高さ:58px;
背景画像:url( "../ images / icon.png");
バックグラウンドポジション:-107px -37px;
ポジション:絶対;
右:180ピクセル。
Top:300px;
}
/ *フッター* /
フッター{
幅:100%;
高さ:202px;
背景色:黒;
マージン:0オート;
}
フッターp {
色:白;
テキスト整列:中央;
マージンボトム:18px;
}
フッター> div {
パディングトップ:70px;
} – >

以上は、中国の翻訳ツールで翻訳した中国の技術記事です

関連記事