1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_23 实战: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"></div> 100 </body> 101 </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 }