首页 > 代码库 > 每天点滴的进行，css+div简单布局...布局
每天点滴的进行，css+div简单布局...布局
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="">招聘岗位</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 <div class="top_head"> 81 <a href="#top"><img src="image/jiantou.png"/></a> 82 </div> 83 </body> 84 </html>
css：
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 padding-top: 58px; 10 } 11 /*头部盒子 头部logo部分*/ 12 .head{ 13 text-align: center; 14 width: 100%; 15 height: 58px; 16 background-color:#191d3a; 17 position: fixed; 18 top: 0px; 19 left: 0px; 20 } 21 .head_logo_conten{ 22 width: 1000px; 23 height: 58px; 24 margin: 0px auto; 25 } 26 .head_logo_conten .head_logo_logo{ 27 width:184px ; 28 background: url(../image/logo.png) no-repeat center center; 29 } 30 .head_logo_conten .head_logo_right{ 31 width:184px ; 32 background: url(../image/jrwm.png) no-repeat center center; 33 } 34 .head_logo_conten li{ 35 width: 100px; 36 height: 58px; 37 line-height: 58px; 38 float: left; 39 } 40 a{ 41 text-decoration: none; 42 } 43 a:link,a:visited{ 44 color: gray; 45 } 46 a:hover{ 47 color: white; 48 font-weight: bold; 49 } 50 51 /*banner部分*/ 52 .head_banner{ 53 margin: 0 auto; 54 background: url(../image/banner.jpg) no-repeat center center; 55 width:100%; 56 height: 465px; 57 } 58 59 /*conten内容部分*/ 60 .conten{ 61 margin: 0 auto; 62 width: 1100px; 63 height: 650px; 64 } 65 .conten_top{ 66 width: 1100px; 67 height: 320px; 68 text-align: center; 69 } 70 hr{ 71 font-weight: bold; 72 width: 1000px; 73 } 74 .conten_top_img{ 75 width: 220px; 76 height: 260px; 77 margin:50px 0 0 40px; 78 float: left; 79 } 80 .conten_top_img li{ 81 margin-bottom: 10px; 82 } 83 .conten_top_img li a{ 84 color: green; 85 font-size: 12px; 86 padding-right: 10px; 87 background: url(../image/xjt.png) no-repeat right center; 88 } 89 90 /*底部部分*/ 91 .conten_footer{ 92 width: 1100px; 93 height: 310px; 94 } 95 .conten_footer_left,.conten_footer_right{ 96 width: 500px; 97 height: 310px; 98 margin-left: 30px; 99 float: left; 100 } 101 .conten_footer_left{ 102 background: url(../image/bynewsbg.jpg) no-repeat center; 103 } 104 .conten_footer_left li{ 105 margin-left: 20px; 106 height: 45px; 107 list-style: 45px; 108 } 109 .conten_footer_left li p{ 110 height: 28px; 111 border-bottom: 1px dashed gray; 112 } 113 .conten_footer_left li span{ 114 float: right; 115 } 116 .conten_footer_right{ 117 background: url(../image/zczp.jpg) no-repeat center; 118 } 119 .conten_footer_right li{ 120 margin-left:20px; 121 margin-top: 20px; 122 font-weight: bold; 123 width: 350px; 124 height: 40px; 125 line-height: 40px; 126 padding-left:10px ; 127 } 128 .title{ 129 background: url(../image/jrwm.png) no-repeat right center; 130 } 131 .conten_footer_right .title a{ 132 font-size: 18px; 133 font-weight: bold; 134 color:black; 135 padding-left: 50px; 136 } 137 /*返回顶部 定位*/ 138 .top_head{ 139 width:19px ; 140 height: 19px; 141 border: 1px solid gainsboro; 142 border-radius:19px; 143 position: fixed; 144 right: 50px; 145 bottom: 50px; 146 } 147
效果图50%窗口：
每天点滴的进行，css+div简单布局...布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。