每天点滴的进行，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简单布局...布局的更多相关文章

HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
【转载】CSS + DIV 实现局部布局
HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局 ...
【转载】CSS + DIV 实现整理布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
CSS+DIV网页样式布局实战从入门到精通中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
HTML CSS + DIV实现排版布局
HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
HTML CSS + DIV实现整体布局 part2
9.盒模型的层次关系我们通过一个经典的盒模型3D立体结构图来理解,如图: 从上往下看,层次关系如下: 第1层:盒子的边框(border), 第2层:元素的内容(content).内边 ...
css+html简单的布局demo
于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...

随机推荐

Cassandra
NoSQL之Cassandra 9月初听了一个讲座,演讲者是张月同学,他给我们分享了Cassandra nosql数据库,讲得很精彩,听完之后收益良多. Cassandra是一个noSQL数据库, ...
.net调用Outlook 批量发送邮件，可指定Outlook中的账号来发送邮件
.net调用Outlook 批量发送邮件,可指定Outlook中的账号来发送邮件源码可以在我的资源列表中下载: MPOEMail http://download.csdn.net/my VS2012 ...
ASP.NET MVC页面UI之多级数据选择UI（行业信息、专业信息、职位信息的选择）
多级数据选择操作在开发中是常见的操作,比如选择行业信息时,一般有个大类,每个大类下边又包含很多小类,本文简单实现了弹出窗口一级一级选择功能. 本文博客出处:http://www.kwstu.com/A ...
SQL Server 如何读写数据
01. SQL Server 如何读写数据一. 数据读写流程简要SQL Server作为一个关系型数据库,自然也维持了事务的ACID特性,数据库的读写冲突由事务隔离级别控制.无论有没有显示开启事 ...
CentOS中安装Python-PIP
wget http://pypi.python.org/packages/source/p/pip/pip-1.0.2.tar.gz tar zxf pip-1.0.2.tar.gz cd pip-1 ...
一步一步深入spring(2)-三种方式来实例化bean
在一步一步深入spring(1)--搭建和测试spring的开发环境中提到了一种实例化bean的方式,也是最基本的使用构造器实例化bean 1.使用构造器实例化bean:这是最简单的方式,Spring ...
典型的团队VS优秀团队
如果做不了优秀的团队,那么就做一个典型的团队,公司需要这么一个神话,需要这么一个领头羊. 我在进入某公司后,第一个项目用的是"敏捷开发方法".而公司的理念恰恰是:开发.协作性强.扁 ...
Operation not permitted引发的惊魂72小时
0.问题及描述在测试产品的时候,莫名其妙发现了我们的主进程VPNd会出现以下的报错: 2013-07-18 13:05:13 www.1.com/192.168.200.220:65527 wri ...
JVM内存模型及垃圾收集策略解析(一)
JVM内存模型是Java的核心技术之一,之前51CTO曾为大家介绍过JVM分代垃圾回收策略的基础概念,现在很多编程语言都引入了类似Java JVM的内存模型和垃圾收集器的机制,下面我们将主要针对Jav ...
怎样清除SWAP里的文件
在vim 编辑一个文件时断了网,文件就留在SWAP里,但我再vim这个文件保存后,再打开时又提示SWAP里有这文件了,此时swapoff -a后再ls -al查看,把文件所在目录里*.swp结尾的文件 ...

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

每天点滴的进行，css+div简单布局...布局的更多相关文章

随机推荐

热门专题