HTML5布局篇
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title> 6 7 </title> 8 <link rel="stylesheet" type="text/css" href="index.css"/> 9 </head> 10 11 <body> 12 <a name="sh"></a> 13 <!--导航--> 14 <div id="holder"> 15 <div id="begin"> 16 <div id="timu"> 17 <h1> 18 <a href="#">WILDFLOWERS</a> 19 </h1> 20 </div> 21 22 <div id="daoh"> 23 <ul> 24 <li><a href="#">HOMEPAGE</a></li> 25 <li><a href="#">BLOG</a></li> 26 <li><a href="#">PHOTOS</a></li> 27 <li><a href="#">ABOUT</a></li> 28 <li><a href="#">CONTACT</a></li> 29 </ul> 30 </div> 31 </div> 32 <div> 33 <img src="images/img03.png" width="1000" height="40"/> 34 </div> 35 <!--导航结束--> 36 37 <div id="pic"> 38 <img src="images/img04.jpg"> 39 </div> 40 41 <div> 42 <img src="images/img03.png" width="1000" height="40"/> 43 </div> 44 45 <!-- 文章部分--> 46 <div id="wenz"> 47 <div id="youb"> 48 <div class="post"> 49 <h2> 50 <a href="#">WELCOME TO WILDFLOWERS</a> 51 </h2> 52 53 <p class="meta"> 54 <span>September 02, 2012</span> 55 <span>Posted by Someone</span> 56 </p> 57 58 <div class="scrap"> 59 <p> 60
body{ background:yellow url("images/img01.jpg"); } /* 导航*/ #holder{ width:1000px; margin:50px auto auto; } #begin{ height:100px; background:url("images/img02.jpg"); margin:auto auto; } #timu{ width:300px; height:100px; float:left; line-height:100px; margin:auto 100px auto 50px; } #timu a{ font-size:1.5em ; color:white; } #daoh{ height:100px; line-height:100px; float:left; } #daoh li{ list-style-type:none; float:left; margin-left:50px; } #daoh li a{ color:white; } /* 相片*/ #pic{ width:1000px; height:300px; background:white; } #pic img{ margin:16px 10px; } /* 文章右侧*/ #wenz{ background:#FFF ; width:1000px ; height:1400px ; } /*w=文章开始*/ #youb{ width:580px; height:1400px; float:left; } .post h2 a { font-size:30px; color:#79A62E;; } .post h2{ padding:30px 30px 20px ; } .post p span:nth-child(1) { float:left ; color: #5E5E5E; } .post p span:nth-child(2) { float:right ; color: #5E5E5E; } span{ padding-left:30px; } .meta{ font-size: 14px; } .scrap{ clear:both ; padding-left:33px; padding-top:20px; color: #787878; } p { line-height:180% ; } .hdu img{ margin-top:15px; } .bd{ font-size:15px; } .yd a{ color: #5E5E5E; } p.yd { margin:30px auto 40px ; } .post{ border-bottom:1px solid #E7EBED ; } /* 右侧内容*/ #for{ width:300px; height:1400px; float:left; margin-left:50px; } #for ul li a{ line-height:40px; border-bottom:1px solid #E7EBED ; color:#5E5E5E; } #for ul li{ list-style-type:none; } #for h2 { margin:50px auto 45px; color:#5E5E5E; } #wb p{ color:#527800 ; margin:10px 130px 80px; } /* 固定图标*/ #tub{ width:38px; position:fixed; right:0px; bottom:0px; } .pic{ width:38px; height:37px; margin-top:2px; background:gray; border-radius:3px 0 0 3px ; font-family:myzt; /************************这里就是引用字体*************** ****************/ line-height:37px; text-align:center; color:white; font-size:35px; position:relative ; } .jl{ margin-bottom:170px; } .icon{ width:38px ; height:37px ; display:block ; position:absolute; right:0; top:0; z-index:100; overflow:hidden ; text-align:center ; transition:background .2s ; } .icon-text{ background:red; width:150px; height:38px; font-size:14px; line-height:38px; position:absolute; right:-150px; top:0; z-index:99; text-align:center ; padding-left:left; border-radius:2px 0 0 2px ; transition:right .2s ease-in-out ; } a{ color:white; } .pic:nth-child(1):hover .icon-text{ right:0 ; } .pic:nth-child(1):hover .icon { background:red ; } .pic:nth-child(2):hover .icon-text{ right:0 ; } .pic:nth-child(2):hover .icon { background:red ; } .pic:nth-child(3):hover .icon-text{ right:0 ; } .pic:nth-child(3):hover .icon { background:red ; } .pic:nth-child(4):hover .icon-text{ right:0 ; } .pic:nth-child(4):hover .icon { background:red ; } .pic:nth-child(5):hover .icon-text{ right:0 ; } .pic:nth-child(5):hover .icon { background:red ; } .pic:nth-child(6):hover .icon-text{ right:0 ; } .pic:nth-child(6):hover .icon { background:red ; } .pic:nth-child(7):hover .icon-text{ right:0 ; } .pic:nth-child(7):hover .icon { background:red ; } .pic:nth-child(8):hover .icon-text{ right:0 ; } .pic:nth-child(8):hover .icon { background:red ; }
This is <b> WildFlowers</b>,a free,fully standards-compliant CSS template designed by FCT. 61 The photos in this template are from Fotogrph.This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) 62 </p> 63 <p class="hdu"> 64 <img src="images/img06.jpg" width="545" height="200"/> 65 66 </p> 67 <p class="bd"> 68 Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem. 69 </p> 70 <p class="yd"> 71 <a href="#">Read More</a> 72 73 <a href="#">Comments</a> 74 </p> 75 </div> 76 </div> 77 <!--第二部分--> 78 <div class="post"> 79 <h2> 80 <a href="#">LOREM IPSUM SED ALIQUAM</a> 81 </h2> 82 83 <p class="meta"> 84 <span>September 01, 2012</span> 85 <span>Posted by Someone</span> 86 </p> 87 88 <div class="scrap"> 89 90 <p class="hdu"> 91 <img src="images/img05.jpg" width="545" height="200"/> 92 93 </p> 94 <p class="bd"> 95 Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem. 96 </p> 97 <p class="yd"> 98 <a href="#">Read More</a> 99 100 <a href="#">Comments</a> 101 </p> 102 </div> 103 </div> 104 </div> 105 106 <!-- 右侧内容--> 107 <div id="for"> 108 <h2>Categories</h2> 109 <ul> 110 <li><a href="#">Aliquam libero</a></li> 111 <li><a href="#">Consectetuer adipiscing elit</a></li> 112 <li><a href="#">Metus aliquam pellentesque</a></li> 113 <li><a href="#">Suspendisse iaculis mauris</a></li> 114 <li><a href="#">Urnanet non molestie semper</a></li> 115 <li><a href="#">Proin gravida orci porttitor</a></li> 116 </ul> 117 118 <h2>BLOGROLL</h2> 119 <ul> 120 <li><a href="#">Aliquam libero</a></li> 121 <li><a href="#">Consectetuer adipiscing elit</a></li> 122 <li><a href="#">Metus aliquam pellentesque</a></li> 123 <li><a href="#">Suspendisse iaculis mauris</a></li> 124 <li><a href="#">Urnanet non molestie semper</a></li> 125 <li><a href="#">Proin gravida orci porttitor</a></li> 126 </ul> 127 128 <h2>ARCHIVES</h2> 129 <ul> 130 <li><a href="#">Aliquam libero</a></li> 131 <li><a href="#">Consectetuer adipiscing elit</a></li> 132 <li><a href="#">Metus aliquam pellentesque</a></li> 133 <li><a href="#">Suspendisse iaculis mauris</a></li> 134 <li><a href="#">Urnanet non molestie semper</a></li> 135 <li><a href="#">Proin gravida orci porttitor</a></li> 136 </ul> 137 </div> 138 139 <div> 140 <img src="images/img03.png"/> 141 </div> 142 143 <div id="wb"> 144 <p> 145 COPYRIGHT (C) 2012 SITENAME.COM. ALL RIGHTS RESERVED. DESIGN BY FCT. PHOTOS BY FOTOGRPH. 146 </p> 147 </div> 148 </div> 149 150 <div id="tub"> 151 <div class="pic"> 152 <div class="icon">H</div> 153 <div class="icon-text">欢迎光临</div> 154 155 </div> 156 157 <div class="pic"> 158 <div class="icon">K</div> 159 <div class="icon-text">注册用户</div> 160 </div> 161 162 <div class="pic"> 163 <div class="icon">U</div> 164 <div class="icon-text">购买</div> 165 </div> 166 167 <div class="pic"> 168 <div class="icon">Ù</div> 169 <div class="icon-text">超级用户</div> 170 </div> 171 172 <div class="pic jl"> 173 <div class="icon">Û</div> 174 <div class="icon-text">记事本</div> 175 </div> 176 177 <div class="pic"> 178 <div class="icon">M</div> 179 <div class="icon-text">邮件箱</div> 180 </div> 181 182 <div class="pic"> 183 <div class="icon">S</div> 184 <div class="icon-text">花的论坛</div> 185 </div> 186 187 <div class="pic"> 188 <div class="icon"><</div> 189 <div class="icon-text"><a href="#sh">回到顶部</a></div> 190 </div> 191 </div> 192 193 </body> 194 </html>
这里就是css代码
效果图
