1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_24 实战: div+css企业站-尾部
.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>企业首页</title> 6 <link rel="stylesheet" href="./css/style.css"> 7 </head> 8 <body> 9 <div class="bg1"> 10 <div class="max"> 11 <div class="mid"> 12 <div class="logo"> 13 <img src="./images/logo.jpg"> 14 </div> 15 <div class="fav"> 16 <span>加入收藏 | 企业邮箱</span> 17 </div> 18 </div> 19 <dir class="clear"></dir> 20 <div class="nav"> 21 <ul> 22 <li><a href="#">首页</a></li> 23 <li class="active"><a href="#" class="nobd">走进新时光</a></li> 24 <li><a href="#">企业文化</a></li> 25 <li><a href="#">新闻视角</a></li> 26 <li><a href="#">综合性广告业务</a></li> 27 <li><a href="#">户外媒体资源</a></li> 28 <li><a href="#">加入我们</a></li> 29 <li><a href="#">合作伙伴</a></li> 30 <li><a href="#" class="nobd">联系我们</a></li> 31 </ul> 32 </div> 33 <div class="son-nav"> 34 <ul> 35 <li><a href="#">公司简介</a></li> 36 <li><a href="#">公司简介</a></li> 37 <li><a href="#">公司简介</a></li> 38 <li><a href="#">公司简介</a></li> 39 <li><a href="#">公司简介</a></li> 40 <li class="nobd"><a href="#">公司简介</a></li> 41 </ul> 42 </div> 43 <div class="banner"> 44 <img src="./images/banner.jpg"> 45 </div> 46 </div> 47 </div> 48 49 <div class="bg2"> 50 <div class="max"> 51 <div class="rec"> 52 <div class="item"> 53 <h3>综合性广告业务</h3> 54 <div class="img"> 55 <img src="./images/1.jpg"> 56 </div> 57 <ul> 58 <li><a href="#">广告策划</a></li> 59 <li><a href="#">大型活动策划</a></li> 60 <li><a href="#">广告策划</a></li> 61 <li><a href="#">广告策划</a></li> 62 <li><a href="#">广告策划</a></li> 63 </ul> 64 <div class="clear"></div> 65 <a href="#" class="more">更多</a> 66 </div> 67 <div class="item"> 68 <h3>综合性广告业务</h3> 69 <div class="img"> 70 <img src="./images/2.jpg"> 71 </div> 72 <ul> 73 <li><a href="#">广告策划</a></li> 74 <li><a href="#">大型活动策划</a></li> 75 <li><a href="#">广告策划</a></li> 76 <li><a href="#">广告策划</a></li> 77 <li><a href="#">广告策划</a></li> 78 </ul> 79 <div class="clear"></div> 80 <a href="#" class="more">更多</a> 81 </div> 82 <div class="item"> 83 <h3>综合性广告业务</h3> 84 <div class="img"> 85 <img src="./images/video.jpg"> 86 </div> 87 <ul> 88 <li><a href="#">广告策划</a></li> 89 <li><a href="#">大型活动策划</a></li> 90 <li><a href="#">广告策划</a></li> 91 <li><a href="#">广告策划</a></li> 92 <li><a href="#">广告策划</a></li> 93 <a href="#" class="more">更多</a> 94 </ul> 95 </div> 96 </div> 97 </div> 98 </div> 99 <div class="bg3"> 100 <div class="max"> 101 <div class="rec"> 102 <div class="item"> 103 <h3>公司简介</h3> 104 <div class="desc"> 105 <img src="./images/intro.jpg"> 106 <p>新时光广告于2002年开始组建和发展，是一家集“广告资源与技术开发及管理、活动策划与执行、品牌推广与维护、创意设计与制作、礼品开发 107 与采购、工程装饰制作、展示展览、影视录制、动画动漫制作”等业务形式的大型综合性广告企业。 108 <br/><span>公司总部设立在深圳，公司立足于国内最活跃的经济体之一——珠三角，企业业绩保持每年20%的增速。经过几年的发展和成长，先后在深圳、广州、佛山、东莞、惠州、河源、梅州、中山、江门成立6个分公司及3个办事处，并根据发展需求… <a href="#">[详细]</a></span></p> 109 </div> 110 </div> 111 <div class="item"> 112 <h3>企业文化</h3> 113 <div class="pic"><img src="./images/qy1.jpg"></div> 114 <div class="pic"><img src="./images/qy2.jpg"></div> 115 <div class="clear"></div> 116 <div class="pic"><img src="./images/qy3.jpg"></div> 117 <div class="pic"><img src="./images/qy4.png"></div> 118 </div> 119 <div class="item"> 120 <h3>新闻动态</h3> 121 <ul> 122 <li><a href="#">新时光广告于2002年开始组建和发展</a></li> 123 <li><a href="#">新时光广告于2002年开始组建和发展</a></li> 124 <li><a href="#">新时光广告于2002年开始组建和发展</a></li> 125 <li><a href="#">新时光广告于2002年开始组建和发展</a></li> 126 <li><a href="#">新时光广告于2002年开始组建和发展</a></li> 127 <li><a href="#">新时光广告于2002年开始组建和发展</a></li> 128 </ul> 129 <a href="#" class="more2">更多</a> 130 </div> 131 <div class="clear"></div> 132 </div> 133 <div class="partner"> 134 <h3>合作伙伴：</h3> 135 <div class="div"> 136 <img src="./images/yd.jpg"> 137 <img src="./images/yd.jpg"> 138 <img src="./images/yd.jpg"> 139 <img src="./images/yd.jpg"> 140 <img src="./images/yd.jpg"> 141 <img src="./images/yd.jpg"> 142 </div> 143 </div> 144 <div class="policy"> 145 <ul> 146 <li><a href="#">公司简介</a></li> 147 <li><a href="#">公司简介</a></li> 148 <li><a href="#">公司简介</a></li> 149 <li><a href="#">公司简介</a></li> 150 <li><a href="#">公司简介</a></li> 151 <li><a href="#">公司简介</a></li> 152 <li><a href="#">公司简介</a></li> 153 <li><a href="#" class="nobd">公司简介</a></li> 154 </ul> 155 </div> 156 <div class="clear"></div> 157 <div class="copyright"> 158 新时光集团 版权所有 159 </div> 160 </div> 161 </div> 162 </body> 163 </html>
.css
1 * { 2 margin: 0px; 3 padding: 0px; 4 list-style-type: none; 5 } 6 a { 7 text-decoration: none; 8 color: #666; 9 } 10 body { 11 font-family: "宋体"; 12 font-size: 12px; 13 } 14 .bg1 { 15 background: url("../images/bg.jpg") no-repeat center top; 16 height: 547px; 17 width: 100%; 18 } 19 .bg1 .max { 20 width: 1002px; 21 margin: 0px auto; 22 } 23 .bg1 .max .mid { 24 width: 968px; 25 margin: 0px auto; 26 position: relative; 27 top: 20px; 28 height: 70px; 29 } 30 .bg1 .max .mid .logo { 31 float: left; 32 } 33 .bg1 .max .mid .fav { 34 float: right; 35 margin: 40px 20px 0px 0px; 36 } 37 .clear { 38 clear: both; 39 } 40 .bg1 .nav { 41 width: 1002px; 42 margin: 0px auto; 43 background: url("../images/nav.png") no-repeat; 44 height: 41px; 45 } 46 .bg1 .nav ul { 47 position: relative; 48 top: 8px; 49 } 50 .bg1 .nav ul li { 51 float: left; 52 padding: 7px 0px 10px; 53 } 54 .bg1 .nav ul li a { 55 color: white; 56 font-size: 14px; 57 font-weight: bold; 58 border-right: 1px solid #000; 59 padding: 0px 20px; 60 } 61 .bg1 .nav ul li a.nobd { 62 border-right: none; 63 } 64 .bg1 .nav ul li .active { 65 background: #0D8F57; 66 } 67 68 .bg1 .son-nav { 69 width: 1002px; 70 margin: 10px auto; 71 } 72 .bg1 .son-nav ul { 73 margin-left: 60px; 74 height: 10px; 75 } 76 .bg1 .son-nav ul li { 77 float: left; 78 border-right: 1px solid #ccc; 79 padding: 0px 20px; 80 } 81 .bg1 .son-nav ul li.nobd { 82 border-right: none; 83 } 84 .bg1 .son-nav ul li a { 85 color: #666; 86 } 87 .bg1 .banner { 88 width: 968px; 89 margin: 0px auto; 90 } 91 92 .bg2 { 93 background: url("../images/img_bj_02.jpg") repeat-y center top; 94 width: 100%; 95 } 96 .bg2 .max { 97 width: 1002px; 98 margin: 0px auto; 99 } 100 .bg2 .max .rec { 101 width: 968px; 102 margin: 0px auto; 103 padding: 0px auto; 104 background: #eee; 105 overflow: hidden; 106 } 107 .bg2 .max .rec .item { 108 width: 280px; 109 float: left; 110 padding: 10px 20px; 111 } 112 .bg2 .max .rec .item h3 { 113 color: green; 114 font-weight: bold; 115 margin: 10px 0px; 116 } 117 .bg2 .max .rec .item .img { 118 float: left; 119 margin-right: 20px; 120 } 121 .bg2 .max .rec .item ul li { 122 font-size: 12px; 123 margin-bottom: 8px; 124 padding-left: 10px; 125 background: url("../images/arrow.jpg") left center no-repeat; 126 } 127 .bg2 .max .rec .item a.more { 128 color: green; 129 } 130 131 132 133 134 135 136 .bg3 { 137 background: url("../images/img_bj_04.jpg") no-repeat center top; 138 width: 100%; 139 } 140 .bg3 .max { 141 width: 1002px; 142 margin: 0px auto; 143 } 144 .bg3 .rec { 145 width: 968px; 146 margin: 0px auto; 147 } 148 .bg3 .rec .item { 149 width: 301px; 150 float: left; 151 padding: 10px 10px; 152 } 153 .bg3 .rec .item h3 { 154 width: 120px; 155 height: 33px; 156 background: url("../images/green.jpg") no-repeat; 157 text-align: center; 158 line-height: 33px; 159 margin: 20px 0px 10px; 160 color: white; 161 } 162 .bg3 .rec .item .desc img { 163 float: left; 164 margin-right: 20px; 165 } 166 .bg3 .rec .item .desc p { 167 color: #666; 168 font-size: 12px; 169 line-height: 18px; 170 text-indent: 2em; 171 } 172 .bg3 .rec .item .desc span { 173 text-indent: 2em; 174 display: inline-block; 175 } 176 .bg3 .rec .item .desc span a { 177 color: green; 178 } 179 .bg3 .rec .item .pic { 180 float: left; 181 padding: 5px; 182 border: 1px solid #ccc; 183 margin: 3px 4px 10px; 184 } 185 .bg3 .rec .item ul li { 186 padding: 10px 0px 6px 0px; 187 border-bottom: 1px dotted #ccc; 188 } 189 .bg3 .rec .item .more2 { 190 background: green; 191 color: white; 192 padding: 2px 10px; 193 } 194 .bg3 .partner { 195 width: 968px; 196 border: 1px solid #ccc; 197 height: 60px; 198 margin: 0px auto; 199 } 200 .bg3 .partner h3 { 201 float: left; 202 margin: 25px 20px 20px; 203 color: green; 204 font-weight: bold; 205 } 206 .bg3 .partner .pic { 207 margin-top: 15px; 208 } 209 .bg3 .policy { 210 width: 968px; 211 margin: 0px auto; 212 height: 40px; 213 margin-top: 20px; 214 background: green; 215 line-height: center; 216 } 217 .bg3 .policy ul { 218 text-align: center; 219 width: 600px; 220 margin: 0px auto; 221 } 222 .bg3 .policy ul li { 223 float: left; 224 } 225 .bg3 .policy ul li a { 226 color: white; 227 border-right: 1px solid white; 228 padding: 0px 13px; 229 } 230 .bg3 .policy ul li a.nobd { 231 border-right: none; 232 } 233 .bg3 .copyright { 234 text-align: center; 235 margin: 20px 0px 40px; 236 color: #666; 237 font-size: 14px; 238 }