<!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简单布局...布局的更多相关文章

  1. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  2. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  3. 【转载】CSS + DIV 实现局部布局

    HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    ...

  4. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  6. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  7. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

  8. HTML CSS + DIV实现整体布局 part2

    9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图:     从上往下看,层次关系如下: 第1层:盒子的边框(border),     第2层:元素的内容(content).内边 ...

  9. css+html简单的布局demo

    于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...

随机推荐

  1. SpringMVC入门笔记一

    SpringMVC优势    性能比struts2好    简单 便捷 易学    和Spring无缝集成(使用spring ioc aop)    约定优于配置    能够简单进行Junit测试   ...

  2. GC算法精解(五分钟让你彻底明白标记/清除算法)

    GC算法精解(五分钟让你彻底明白标记/清除算法) 相信不少猿友看到标题就认为LZ是标题党了,不过既然您已经被LZ忽悠进来了,那就好好的享受一顿算法大餐吧.不过LZ丑话说前面哦,这篇文章应该能让各位彻底 ...

  3. javascript计算字符串中出现最多的字符和个数

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

  4. 解决MSSQL 2008不能用IP登录的问题

        解决MSSQL 2008不能用IP登录的问题   前提准备:mssql 2008已安装好了一个实例(我按默认情况下安装的实例是:SQLEXPRESS),并安装了SQL Server Manag ...

  5. VC 编程ANSI环境下读写Unicode文件

    没有注意到文件编码的不同会产生这么多的问题,在动手以前查询了很多资料,在本博客中收藏了不少先辈的成果,在这里一并表示致敬!       关于ANSI和Unicode编码的原理在这里也不说了,主要讲下如 ...

  6. C#新功能--命名参数与可选参数

    C#新功能--命名参数与可选参数 可能是篇幅太短了,又被打入冷宫了.先重发一篇加上可选参数.本来不想加这个呢,因为可选参数可能大家用的会多点.其实这 两个在VB中早就有了,在C#中,只有在.net4以 ...

  7. POJ 1033 Defragment

    根据http://hi.baidu.com/algorithm/item/d51b15f7a8ea1c0a84d278be这个开始练习ac,刚开始接触这道题时以为是道搜索题,读完之后深思了一下,感觉不 ...

  8. 【使用教程】论Windows下必备的抓包工具Fiddler2如何安装证书(查看Https)

    一.写在前面 好久没更新博客了,最近也是忙着年前的一些事情,所以一直没来得及弄一些有价值的东西,还是来冒个泡.随着苹果公司要求的2017年开始上架审核必须是Https,而原本Http的上架需要提交强烈 ...

  9. [ios2]ASIHTTPReques 清除所有持久连接

    http://www.winddisk.com/2012/08/27/iphone_screenlock_network_disconnection/ + (void)clearPersistentC ...

  10. [ios2]ios系统中各种设置项的url链接

    在代码中调用如下代码:(ps: ios 5.0 以后不可用)NSURL*url=[NSURL URLWithString:@"prefs:root=WIFI"];[[UIAppli ...