zoukankan html css js c++ java

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代码

效果图

查看全文

相关阅读:
Call to undefined function curl_init() 解决方案-PHP
手机web禁止微信调整字体
 Apache2.4+PHP7+MySQL5.7配置
 pip下载时临时指定源
 form提交表单时，action携带参数（form跳转页面时在url中拼接字符串）
pyspark 出现pyspark.sql.utils.IllegalArgumentException: 'requirement failed: Column prediction must be of type double but was actually float.'异常
 安装vue
ubuntu安装ssh和ssh本地免密登录
 Python获取当前目录和上级目录
 购买了云服务器后做的一些事

原文地址：https://www.cnblogs.com/LCH-M/p/7565356.html