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.效果
