zoukankan html css js c++ java

023 一个完整的简单页面

1.index.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <link rel="stylesheet" href="css/index.css" />
  7 </head>
  8 <body>
  9     <!-- header部分 -->
 10     <div class="header">
 11         <div class="inner">
 12             <div class="logo">
 13                 <!-- 在logo上加一个连接 -->
 14                 <a href="#"><img src="image/logo.png" height="63px" alt="logo"></a>
 15             </div>
 16             <div class="nav">
 17                 <!-- nav链接 -->
 18                 <ul>
 19                     <li><a href="#">首页</a></li>
 20                     <li><a href="#">商城</a></li>
 21                     <li><a href="#">门店</a></li>
 22                     <li><a href="#">平台</a></li>
 23                     <li><a href="#">联盟</a></li>
 24                     <li><a href="#">关于云道</a></li>
 25                 </ul>
 26             </div>        
 27         </div>
 28     </div>
 29     <!-- banner部分 -->
 30     <div class="banner">
 31             <!-- 使用背景-->
 32     </div>
 33     <!-- 服务块 -->
 34     <div class="service">
 35         <!-- 我们的产品 -->
 36         <div class="service-hd">
 37             <h3>
 38                 <img src="image/produce.jpg" alt="">
 39             </h3>
 40             <p>平台上诸多优秀设计师开设个人公众号，分享设计知识、设计经验及行业资讯等内容。为整合更多优质内容，同时也为平台用户带来更好的阅读体验，UI中国推出设计公众号联盟。UI中国愿与优秀设计师们，共同打造良好的设计知识生态圈。</p>
 41         </div>
 42         <div class="service-bd">
 43             <ul>
 44                 <li class="service-li-head">
 45                     <img src="image/a.jpg" alt="">
 46                     <h3>云商场</h3>
 47                     <p>能够让企业看到未来互联网网上商城的发展，也能让企业的渗透性得到很大的提升！云商城为什么这么的神奇，看到下文你就知道云商城带给你的魅力了！</p>
 48                     <a href="#">用心服务</a>
 49                 </li>
 50                 <li class="service-li-middle">
 51                     <img src="image/b.jpg" alt="">
 52                     <h3>云综合</h3>
 53                     <p>能够让企业看到未来互联网网上商城的发展，也能让企业的渗透性得到很大的提升！云商城为什么这么的神奇，看到下文你就知道云商城带给你的魅力了！</p>
 54                     <a href="#">用心服务</a>
 55                 </li>
 56                 <li>
 57                     <img src="image/c.jpg" alt="">
 58                     <h3>云门店</h3>
 59                     <p>能够让企业看到未来互联网网上商城的发展，也能让企业的渗透性得到很大的提升！云商城为什么这么的神奇，看到下文你就知道云商城带给你的魅力了！</p>
 60                     <a href="#">用心服务</a>
 61                 </li>
 62 
 63             </ul>
 64         </div>
 65     </div>
 66     <!-- 经典案例 -->
 67     <div class="case">
 68         <!-- 我们的产品 -->
 69         <div class="service-hd">
 70             <h3>
 71                 <img src="image/produce.jpg" alt="">
 72             </h3>
 73         </div>
 74         <div class="case-bd clearfix">
 75             <ul>
 76                 <li class="case-bd-head">
 77                     <img src="image/1.png" alt="" height="210" width="324">
 78                     <div class="mask"></div>
 79                 </li>
 80                 <li class="case-bd-middle">
 81                     <img src="image/2.png" alt="" height="210" width="324">
 82                     <div class="text">帮助中小企业进步</div>
 83                     <div class="mask"></div>
 84                 </li>
 85                 <li>
 86                     <img src="image/3.png" alt="" height="210" width="324">
 87                     <div class="text">帮助中小企业进步</div>
 88                     <div class="mask"></div>
 89                 </li>
 90             </ul>
 91             <!-- 两个箭头 -->
 92             <a href="#" class="left"><</a>
 93             <a href="#" class="right">></a>
 94         </div>
 95     </div>
 96     <br/>
 97     <!-- 合作媒体 -->
 98     <div class="case">
 99         <!-- 我们的产品 -->
100         <div class="service-hd">
101             <h3>
102                 <img src="image/830.png" alt="">
103             </h3>
104         </div>
105         <div class="media-bd clearfix">
106             <ul>
107                 <li>
108                     <img src="image/aa.jpg" alt="">
109                 </li>
110                 <li>
111                     <img src="image/bb_03.jpg" alt="">
112                 </li>
113                 <li>
114                     <img src="image/cc_03.jpg" alt="">
115                 </li>
116                 <li>
117                     <img src="image/dd_03.jpg" alt="">
118                 </li>
119             </ul>
120         </div>
121     </div>
122     <!-- 页面底部 -->
123     <div class="footer">
124         <div class="subnav">
125             <a href="#">shopcmd</a>
126             <a href="#">首页</a>
127             <a href="#">官网</a>
128             <a href="#">第三方</a>
129             <a href="#">销售</a>
130             <a href="#">云商场</a>
131         </div>
132         <p>@Copyright 2015 公司版权所有</p>
133     </div>
134     <br>
135     <div class="employ_height"></div>
136 </body>
137 </html>

2.css

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 body {
  6     background-color: #fafafa;
  7 }
  8 .nav li {
  9     list-style: none;
 10     float: left;
 11     margin: 0 20px;
 12 }
 13 
 14 /* 顶部导航栏*/
 15 .header {
 16     height: 63px;
 17     background-color: #fff;
 18 }
 19 .inner {
 20     height: 63px;
 21     width: 1157px;
 22     margin: 0 auto;
 23     /*background-color: #e5c5f6;*/
 24     line-height: 63px; /*行高会继承，所以li会得到*/
 25 }
 26 .logo {
 27     height: 63px;
 28     float: left;
 29 }
 30 .nav {
 31     height: 63px;
 32     float: right;
 33 }
 34 
 35 .nav li a {
 36     color: #333;
 37     text-decoration: none;
 38 }
 39 .nav li a:hover {
 40     color: #207adf;
 41 }
 42 
 43 .banner {
 44     height: 350px;
 45     background: url(../image/banner.jpg) no-repeat top center;
 46 }
 47 .service {
 48     /*margin-top: 75px;*/
 49     width: 1157px;
 50     /*height: 650px;*/
 51     margin: 25px auto 0;
 52     /*background-color: pink;*/
 53 }
 54 .service-hd {
 55     border-top: 1px dashed black;
 56     margin: 0 25px; 
 57 }
 58 .service-hd h3 {
 59     width: 103px;
 60     height: 20px;
 61     margin: 0 auto;
 62     margin-top: -8px;
 63 }
 64 .service-hd p {
 65     font-size: 16px;
 66     color: #666;
 67     line-height: 26px;
 68     text-align: center;
 69     width: 900px;
 70     margin: 15px auto 0;
 71 }
 72 
 73 .service-bd {
 74     margin-top: 40px;
 75     overflow: hidden;  /*清除浮动*/
 76 }
 77 .service-bd li{
 78     /*border: 1px solid red;*/
 79     width: 330px;
 80     height: 500px;
 81     background-color: #eee;
 82     list-style: none;
 83     float: left;
 84 }
 85 .service-li-head {
 86     margin-left: 30px ; 
 87 }
 88 .service-li-middle {
 89     margin: 0 60px; 
 90 }
 91 
 92 .service-bd img {
 93     /*margin: 30px 48px;*/
 94     margin: 30px auto;
 95     display: block;
 96 }
 97 .service-bd h3 {
 98     text-align: center;
 99     font-size: 18px;
100     font-weight: normal;
101 }
102 
103 .service-bd p {
104     font-size: 16px;
105     color: #666;
106     width: 200px;
107     margin: 0 auto;
108     line-height: 24px;
109 }
110 .service-bd a {
111     display: block;
112     width: 190px;
113     height: 45px;
114     border: 1px solid #ff9412;
115     margin: 25px auto;
116     text-align: center;
117     line-height: 45px;
118     font-size: 20px;
119     text-decoration: none;
120     border-radius: 8px;
121 }
122 .service-bd a:hover {
123     color: red;
124     background-color: #ff9412;
125 }
126 
127 .case {
128     /*margin-top: 75px;*/
129     width: 1157px;
130     /*height: 650px;*/
131     margin: 70px auto 0;
132     /*background-color: pink;*/
133 }
134 
135 .case-bd {
136     margin-top: 80px;
137     position: relative;
138 }
139 
140 .case-bd li{
141     width: 325px;
142     height: 210px;
143     background-color: pink;
144     float: left;
145     list-style: none;
146     position: relative;
147 }
148 
149 .case-bd-middle {
150     margin: 0 70px;
151 }
152 
153 .case-bd-head {
154     margin-left: 25px ; 
155 }
156 
157 /*图片上的下地字体*/
158 .text {
159     height: 45px;
160     width: 100%;
161     position: absolute;
162     left: 0;
163     bottom: 0;
164     background: rgba(0,0,0,0.3);
165     line-height: 45px;
166     text-align: center;
167     font-size: 18px;
168     color: red;
169 }
170 
171 .mask {
172     width: 100%;
173     height: 100%;
174     background: rgba(0,0,0,0.3) url(../image/timg.jpg) center no-repeat;
175     position: absolute;
176     top: 0;
177     left: 0;
178     display: none;
179 }
180 .case-bd li:hover .mask{
181     display: block;
182 }
183 
184 .left, .right {
185     width: 60px;
186     height: 60px;
187     background: rgba(0,0,0,0.5);
188     position: absolute;
189     top: 50%;
190     margin-top: -30px;
191     /*樣式*/
192     text-align: center;
193     line-height: 60px;
194     color: #fff;
195     font-size: 20px;
196     text-decoration: none;
197     border-radius: 50%;
198 
199 }
200 .left {
201     left: -60px;
202 }
203 
204 .right {
205     right: -60px;
206 }
207 
208 .clearfix:before,.clearfix:after {
209     content: "";
210     display: table;
211 }
212 .clearfix:after {
213     clear: both;
214 }
215 
216 .case-bd a:hover {
217     background: rgba(0,255,0,0.2);
218 }
219 
220 .media-bd {
221     margin: 10px;
222 }
223 
224 .media-bd li {
225     width: 238px;
226     height: 92px;
227     background-color: #eee;
228     float: left;
229     list-style: none;
230     margin: 0 20px;
231     border: 2px solid #ccc;
232     text-align: center;
233 }
234 .employ_height {
235     height: 10px;
236 }
237 
238 .footer {
239     height: 135px;
240     background-color: #212425;
241     margin-top: 100px;
242     overflow: hidden;
243 }
244 .subnav {
245     text-align: center;
246     margin-top: 50px;
247 }
248 
249 .subnav a {
250     color: #f0f1f1;
251     text-decoration: none;
252     font-size: 18px;
253     margin: 0 20px;
254 }
255 
256 .footer p {
257     text-align: center;
258     color: #888;
259     margin-top: 20px;
260 
261 }

3.效果

查看全文

相关阅读:
Func<>委托、扩展方法、yield、linq ForEach综合运用
 EntityFramework学习要点记一
 MVC模型验证
 MVC过滤器
 解决EntityFramework与System.ComponentModel.DataAnnotations命名冲突
 Linq操作之Except,Distinct,Left Join 【转】
WebClient小结
 Code First项目Migrations
jquery之on()绑定事件和off()解除绑定事件
 Bootstrap页面响应式设计

原文地址：https://www.cnblogs.com/juncaoit/p/11027192.html