首页 > 代码库 > 学习任务在继续...css...
学习任务在继续...css...
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>博雅互动</title> 6 <link rel="stylesheet" type="text/css" href="css/boya.css" /> 7 </head> 8 <body> 9 <div class="head"> 10 <div class="head_logo_conten"> 11 <ul> 12 <li class="head_logo_logo"></li> 13 <li><a href="#">首页</a></li> 14 <li><a href="#">博雅互动</a></li> 15 <li><a href="#">博雅互动</a></li> 16 <li><a href="#">博雅互动</a></li> 17 <li><a href="#">博雅互动</a></li> 18 <li><a href="#">博雅互动</a></li> 19 <li class="head_logo_right"></li> 20 </ul> 21 </div> 22 </div> 23 <div class="head_banner"> 24 25 </div> 26 <div class="conten"> 27 <div class="conten_top"> 28 <div class="conten_top_img"> 29 <ul> 30 <li><img src="image/bpt1.jpg" /></li> 31 <li>博雅互动</li> 32 <li><a href="#">点我互动</a></li> 33 </ul> 34 </div> 35 <div class="conten_top_img"> 36 <ul> 37 <li><img src="image/bpt2.jpg" /></li> 38 <li>博雅互动</li> 39 <li><a href="#">点我互动</a></li> 40 </ul> 41 </div> 42 <div class="conten_top_img"> 43 <ul> 44 <li><img src="image/bpt1.jpg" /></li> 45 <li>博雅互动</li> 46 <li><a href="#">点我互动</a></li> 47 </ul> 48 </div> 49 <div class="conten_top_img"> 50 <ul> 51 <li><img src="image/bpt2.jpg" /></li> 52 <li>博雅互动</li> 53 <li><a href="#">点我互动</a></li> 54 </ul> 55 </div> 56 </div> 57 <hr /> 58 <div class="conten_footer"> 59 <div class="conten_footer_left"> 60 <ul> 61 <li></li> 62 <li></li> 63 <li></li> 64 <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li> 65 <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li> 66 <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li> 67 </ul> 68 </div> 69 <div class="conten_footer_right"> 70 <ul> 71 <li class="title"><a href="">PHP 专场招聘</a></li> 72 <li><a href="">PHP 专场招聘</a></li> 73 <li><a href="">PHP 专场招聘</a></li> 74 <li><a href="">PHP 专场招聘</a></li> 75 <li><a href="">PHP 专场招聘</a></li> 76 </ul> 77 </div> 78 </div> 79 </div> 80 </body> 81 </html>
1 /*初始化状态*/ 2 body,li,ul,div{ 3 margin: 0px; 4 padding: 0px; 5 list-style: none; 6 } 7 body{ 8 background: url(../image/indexmainbg.jpg) no-repeat center bottom; 9 } 10 /*头部盒子 头部logo部分*/ 11 .head{ 12 text-align: center; 13 width: 100%; 14 height: 58px; 15 background-color:#191d3a; 16 } 17 .head_logo_conten{ 18 width: 1000px; 19 height: 58px; 20 margin: 0px auto; 21 } 22 .head_logo_conten .head_logo_logo{ 23 width:184px ; 24 background: url(../image/logo.png) no-repeat center center; 25 } 26 .head_logo_conten .head_logo_right{ 27 width:184px ; 28 background: url(../image/jrwm.png) no-repeat center center; 29 } 30 .head_logo_conten li{ 31 width: 100px; 32 height: 58px; 33 line-height: 58px; 34 float: left; 35 } 36 a{ 37 text-decoration: none; 38 } 39 a:link,a:visited{ 40 color: gray; 41 } 42 a:hover{ 43 color: white; 44 font-weight: bold; 45 } 46 47 /*banner部分*/ 48 .head_banner{ 49 margin: 0 auto; 50 background: url(../image/banner.jpg) no-repeat; 51 width:1348px; 52 height: 465px; 53 } 54 55 /*conten内容部分*/ 56 .conten{ 57 margin: 0 auto; 58 width: 1100px; 59 height: 650px; 60 } 61 .conten_top{ 62 width: 1100px; 63 height: 320px; 64 text-align: center; 65 } 66 hr{ 67 font-weight: bold; 68 width: 1000px; 69 } 70 .conten_top_img{ 71 width: 220px; 72 height: 260px; 73 margin:50px 0 0 40px; 74 float: left; 75 } 76 .conten_top_img li{ 77 margin-bottom: 10px; 78 } 79 .conten_top_img li a{ 80 color: green; 81 font-size: 12px; 82 padding-right: 10px; 83 background: url(../image/xjt.png) no-repeat right center; 84 } 85 86 /*底部部分*/ 87 .conten_footer{ 88 width: 1100px; 89 height: 310px; 90 } 91 .conten_footer_left,.conten_footer_right{ 92 width: 500px; 93 height: 310px; 94 margin-left: 30px; 95 float: left; 96 } 97 .conten_footer_left{ 98 background: url(../image/bynewsbg.jpg) no-repeat center; 99 } 100 .conten_footer_left li{ 101 margin-left: 20px; 102 height: 45px; 103 list-style: 45px; 104 } 105 .conten_footer_left li p{ 106 height: 28px; 107 border-bottom: 1px dashed gray; 108 } 109 .conten_footer_left li span{ 110 float: right; 111 } 112 .conten_footer_right{ 113 background: url(../image/zczp.jpg) no-repeat center; 114 } 115 .conten_footer_right li{ 116 margin-left:20px; 117 margin-top: 20px; 118 font-weight: bold; 119 width: 350px; 120 height: 40px; 121 line-height: 40px; 122 padding-left:10px ; 123 } 124 .title{ 125 background: url(../image/jrwm.png) no-repeat right center; 126 } 127 .conten_footer_right .title a{ 128 font-size: 18px; 129 font-weight: bold; 130 color:black; 131 padding-left: 50px; 132 133
浏览器缩放50%下的视图
最后一个div中的ui li就粗糙排了 改改就好
学习任务在继续...css...
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。