<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
* {
マージン：0;
パディング：0;
}
.header {
幅：100％。
高さ：100pxに。
}
.header .logo IMG {
幅：300ピクセル。
高さ：85px;
margin-left：100pxに。
マージントップ：8px;
フロート：左;
}
.header .menu UL {
リストスタイル：なし。
マージン右：は50px;
}
.header .menu ULのLi {
行の高さ：100pxに。
フロート：右;
色：＃7D7D7D。
幅：80px;
テキスト整列：センター;
フォント重量：大胆;
}
.main .PIC IMG {
幅：100％。
高さ：600PX。
}
.main .topLayer {
背景色：＃000000。
幅：100％;
高さ：600PX。
不透明度：0.5;
位置：絶対;
トップ：100ピクセル;
}
{.btn .main
位置：絶対。
幅：500pxなど。
高さ：300ピクセル;
トップ：400ピクセル;
マージントップ：-150px;
右：50％;
マージン右：-250px;
テキスト整列：センター;
}
.main .btnのP {
パディングトップ：100ピクセル。
色：#FFFFFF;
フォントサイズ：45px;
フォント重量：大胆;
}
.main .btnボタン{
マージントップ：は50px。
背景色：＃1 F5704F。
幅：200pxの。
高さ：60PX;
色：#FFFFFF;
国境半径：8px;
}
.main .content .top {
幅：1000px;
フォントスタイル：イタリック;
パディングトップ：は50px;
マージン：0自動;
}
.main .content .top .icon {
フロート：左;
幅：33.3％;
テキスト整列：センター;
}
.main .content .top .icon IMG {
幅：100pxに。
高さ：100pxに。
}
.main .content .top .icon .des {
フォントサイズ：20ピクセル。
色：＃7c7d7f。
フォント重量：大胆;
パディングトップ：20ピクセル;
}
.main .content .top .recept {
パディングトップ：は50px。
テキスト整列：センター;
色：＃E19796。
フォント重量：太字;
}
.main .content .top .picAndDes {
パディングトップ：は50px;
}
.main .content .top .picAndDes .icon2 {
フロート：左;
パディング：10pxの;
テキスト整列：センター;
}
.main .content .top .picAndDes .icon2 IMG {
幅：310px;
高さ：260px ;;
}
.main .content .top .picAndDes .icon2 .des1 {
パディングトップ：10pxの。
フォントサイズ：20ピクセル;
フォント重量：太字;
色：＃7c7d7f。
}
.main .content .top .picAndDes .icon2 .des2 {
色：#BDBDBC。
パディングトップ：10pxの;
}
.main .content .bottom {
幅：100％。
背景色：＃F9F9F9;
パディング下：30px;
}
.main .content .bottom .bottomコンテンツ{
幅：1000px。
マージン：0自動;
マージン下：は50px;
}
.main .content .bottom .bottomコンテンツ.TITLE {
パディングトップ：は50px。
テキスト整列：センター;
パディング下：40ピクセル;
フォントサイズ：20ピクセル;
}
.main .content .bottom .bottomコンテンツ.picContentのDL {
マージン：10pxの12ピクセル10pxの12ピクセル。
幅：470px;
フロート：左;
}
.main .content .bottom .bottomコンテンツ.picContentのDLのDD {
パディングトップ：20ピクセル。
}
.main .content .bottom .bottomコンテンツ.picContent用のDLのDT IMG {
幅：470px;
高さ：480PX。
}
.footer {
幅：100％。
高さ：100pxに。
背景色：＃292C35;
色：#FFFFFF;
テキスト整列：センター;
行の高さ：100pxに。
フォントサイズ：15ピクセル;
}
</スタイル>
</ HEAD>
<BODY>
<！ -头部- >
<divのクラス= "ヘッダ">
<DIV CLASS = "ロゴ"> <IMG SRC = "画像/ logo.png"> < / DIV>
<DIV CLASS = "メニュー">
<UL>
<LI>手记ます。</ li>
<
</ div>
</ div>
<！ -主体- >
<divのクラス= "メイン">
<！ -大图- >
<divのクラス= "PIC">
<IMG SRC =」画像/ 1.jpeg ">
</ div>
<！ -遮罩层- >
<divのクラス="最上層">
</ div>
<！ -最上层的内容- >
<divのクラス=" BTN ">
<P> MY BEAUTIFUL LIFE </ P>
<ボタン> LOOK MORE> </ボタン>
</ div>
<！ -内容展示区- >
<divのクラス="コンテンツ">
<！ -上部分- >
<divのクラス=」トップ">
の<div>
<divのクラス="アイコンweibo ">
<IMG SRC ="画像/ weibo.png」ALT = "">
<DIV CLASS = "デス">マイクロブログ</ div>
</ div>
<DIV CLASS = "アイコンweixin">
<IMG SRC = "画像/ weixin.png" ALT = "">
<DIV CLASS = "DES">微信</ div>
</ div>
<DIV CLASS = "アイコンQQ" >
<IMGのSRC = "画像/ qq.png" ALT = "">
<DIV CLASS = "デス"> QQ </ div>
</ div>
</ div>
<divのスタイル= "クリア：両方;"> < / DIV>
<DIV CLASS =「RECEPT」>
「私がダウンして記録するために良いものを与えたい、<BR>リコール後に非常に美しくなります。」
</ DIV>
<
<IMG SRC ="画像/ 03-01.jpg" ALT = "">
</ DIV>
<DIV CLASS = "ICON2">
<IMG SRC = "画像/ 03-02.jpg" ALT = "">
<DIV CLASS = "DES1">グレートピクチャー</ div>
<divのクラス= "DES2 ">録音ザ・ピクチャー</ DIV>
</ DIV>
<DIV CLASS =" ICON2 ">
<IMG SRC ="画像/ 03-03.jpg」ALT = "">
<DIV CLASS = "DES1">クール画像< / DIV>
<DIV CLASS = "DES2">録音ザ・ピクチャー</ div>
</ div>
</ div>
</ div>
<divのスタイル= "クリア：両方;"> </ div> <！ -この文なしで、その後、次のような背景が上に移動- >
<！ -下部- >
<divのクラスPHOTO FROM = "タイトル"> ALBUM </ div>
<divのクラス= "下"> <！ -ラップ層- >
<DIV CLASS = "ボトムコンテンツ"> <！ -内容层- >
生命お茶のようなものです、人々は無限に人をリードしてみましょう後味。あなた再び良い味、
<DIV CLASS = "picContent">
<DL>
<DT> <IMGのSRC = "画像/ 04-01.jpg"> </ DT>
<DD>
人生は本のように、単により多くの洗練され読み込まれ、より多くの書き込みより慎重に。読んだとき、心開いて、すべてのものは、心臓への無関心されています。人生は降水量です。
</ DD>
</ dlで>
<DL>
<DT> <IMGのSRC = "画像/ 04-02.jpg"> </ DT>
<DD>
</ DD>
</ DL>
</ div>
<divのスタイル= "クリア：両方;"> </ div>
</ div>
<divのスタイル= "クリア：両方;"> </ div>
</ div>
<！ -底部- >
<divのクラス= "フッタ">
©2016 imooc.com京ICP备13046642号
</ div>
</ BODY>
</ HTML>
最終結果は、次のことを示しています。
