每天点滴的进行,css+div简单布局...布局

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>博雅互动</title>
         <link rel="stylesheet" type="text/css" href="css/boya.css" />
     </head>
     <body>
         <div class="head">
                 <div class="head_logo_conten">
                     <ul>
                         <li class="head_logo_logo"></li>
                         <li><a href="#">首页</a></li>
                         <li><a href="#">博雅互动</a></li>
                         <li><a href="#">博雅互动</a></li>
                         <li><a href="#">博雅互动</a></li>
                         <li><a href="#">博雅互动</a></li>
                         <li><a href="#">博雅互动</a></li>
                         <li class="head_logo_right"></li>
                     </ul>
                 </div>
         </div>
         <div class="head_banner">

         </div>
         <div class="conten">
             <div class="conten_top">
                 <div class="conten_top_img">
                     <ul>
                         <li><img src="data:image/bpt1.jpg" /></li>
                         <li>博雅互动</li>
                         <li><a href="#">点我互动</a></li>
                     </ul>
                 </div>
                 <div class="conten_top_img">
                     <ul>
                         <li><img src="data:image/bpt2.jpg" /></li>
                         <li>博雅互动</li>
                         <li><a href="#">点我互动</a></li>
                     </ul>
                 </div>
                 <div class="conten_top_img">
                     <ul>
                         <li><img src="data:image/bpt1.jpg" /></li>
                         <li>博雅互动</li>
                         <li><a href="#">点我互动</a></li>
                     </ul>
                 </div>
                 <div class="conten_top_img">
                     <ul>
                         <li><img src="data:image/bpt2.jpg" /></li>
                         <li>博雅互动</li>
                         <li><a href="#">点我互动</a></li>
                     </ul>
                 </div>
             </div>
             <hr />
             <div class="conten_footer">
                 <div class="conten_footer_left">
                     <ul>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23&nbsp;</span></p></li>
                         <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23&nbsp;</span></p></li>
                         <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23&nbsp;</span></p></li>
                     </ul>
                 </div>
                 <div class="conten_footer_right">
                     <ul>
                         <li class="title"><a href="">招聘岗位</a></li>
                         <li><a href="">PHP 专场招聘</a></li>
                         <li><a href="">PHP 专场招聘</a></li>
                         <li><a href="">PHP 专场招聘</a></li>
                         <li><a href="">PHP 专场招聘</a></li>
                     </ul>
                 </div>
             </div>
         </div>
     <div class="top_head">
         <a href="#top"><img src="data:image/jiantou.png"/></a>
     </div>
     </body>
 </html>

css:

         /*初始化状态*/
         body,li,ul,div{
             margin: 0px;
             padding: 0px;
             list-style: none;
         }
         body{
             background: url(../image/indexmainbg.jpg) no-repeat center bottom;
             padding-top: 58px;
         }
         /*头部盒子  头部logo部分*/
         .head{
             text-align: center;
             width: 100%;
             height: 58px;
             background-color:#191d3a;
             position: fixed;
             top: 0px;
             left: 0px;
         }
         .head_logo_conten{
             width: 1000px;
             height: 58px;
             margin: 0px auto;
         }
         .head_logo_conten .head_logo_logo{
             width:184px ;
             background: url(../image/logo.png) no-repeat center center;
         }
         .head_logo_conten .head_logo_right{
             width:184px ;
             background: url(../image/jrwm.png) no-repeat center center;
         }
         .head_logo_conten li{
             width: 100px;
             height: 58px;
             line-height: 58px;
             float: left;
         }
         a{
             text-decoration: none;
         }
         a:link,a:visited{
             color: gray;
         }
         a:hover{
             color: white;
             font-weight: bold;
         }

         /*banner部分*/
         .head_banner{
             margin: 0 auto;
             background: url(../image/banner.jpg) no-repeat center center;
             width:100%;
             height: 465px;
         }

         /*conten内容部分*/
         .conten{
             margin: 0 auto;
             width: 1100px;
             height: 650px;
         }
         .conten_top{
             width: 1100px;
             height: 320px;
             text-align: center;
         }
         hr{
             font-weight: bold;
             width: 1000px;
         }
         .conten_top_img{
             width: 220px;
             height: 260px;
             margin:50px 0 0 40px;
             float: left;
         }
         .conten_top_img li{
             margin-bottom: 10px;
         }
         .conten_top_img li a{
             color: green;
             font-size: 12px;
             padding-right: 10px;
             background: url(../image/xjt.png) no-repeat right center;
         }

         /*底部部分*/
         .conten_footer{
             width: 1100px;
             height: 310px;
         }
         .conten_footer_left,.conten_footer_right{
             width: 500px;
             height: 310px;
             margin-left: 30px;
             float: left;
         }
         .conten_footer_left{
             background: url(../image/bynewsbg.jpg) no-repeat center;
         }
         .conten_footer_left li{
             margin-left: 20px;
             height: 45px;
             list-style: 45px;
         }
         .conten_footer_left li p{
             height: 28px;
             border-bottom: 1px dashed gray;
         }
         .conten_footer_left li span{
             float: right;
         }
         .conten_footer_right{
             background: url(../image/zczp.jpg) no-repeat center;
         }
         .conten_footer_right li{
             margin-left:20px;
             margin-top: 20px;
             font-weight: bold;
             width: 350px;
             height: 40px;
             line-height: 40px;
             padding-left:10px ;
         }
         .title{
             background: url(../image/jrwm.png) no-repeat right center;
         }
         .conten_footer_right .title a{
             font-size: 18px;
             font-weight: bold;
             color:black;
             padding-left: 50px;
         }
         /*返回顶部   定位*/
         .top_head{
             width:19px ;
             height: 19px;
             border: 1px solid gainsboro;
             border-radius:19px;
             position: fixed;
             right: 50px;
             bottom: 50px;
         }
     

效果图50%窗口:

每天点滴的进行,css+div简单布局...布局

上一篇:Oracle V$SESSION


下一篇:idea安装Scala插件