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                                     &nbsp;
 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                                     &nbsp;
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代码

效果图

相关阅读:
设计模式 — 责任链模式
 BlockingQueue 阻塞队列（生产/消费者队列）
DDD工作流持久化（十六）
js中匿名函数和回调函数
 DDD模型领域WF到领域层（十五）
DDD领域模型系统的工作流（十四）
DDD领域模型数据访问权限之权限（十二）
DDD领域模型数据访问之对象（十一）
DDD领域模型数据访问权限之用户权限（十）
DDD领域模型数据访问权限（九）
原文地址：https://www.cnblogs.com/LCH-M/p/7565356.html