每天点滴的进行，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 </span></p></li>
<li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li>
<li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </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=" ...
随机推荐
- cocos2d（背景图片循环滚动）
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- ASP.NET Web API是如何根据请求选择Action的？[上篇]
ASP.NET Web API是如何根据请求选择Action的?[上篇] Web API的调用请求总是针对定义在某个HttpController中的某个Action方法,请求响应的内容来源于调用目标A ...
- 一个使用MVC3+NHibernate “增删改查” 的项目
一个使用MVC3+NHibernate “增删改查” 的项目 前言: 谈到NHibernate大伙并不陌生,搞Java的更是清楚,Hibernate是一个目前应用的最广泛的开放源代码的对象关系映射框 ...
- JavaScript 面向对象编程（三）如何写类和子类
在JavaScript面向对象编程(一)原型与继承和JavaScript面向对象编程(二)构造函数和类中,我们分别讨论了JavaScript中面向对象的原型和类的概念.基于这两点理论,本篇文章用一个简 ...
- txt文件保存问题
今天终于解决了文件的保存问题,之前删除文件,再保存,发现删除的内容还是在文件中. 这是因为保存内容时,是将数组内容一行一行覆盖原来的内容,没有覆盖到的还是保存在文件内. 我用的是CFile类 所以直接 ...
- Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
- 行业介绍：车载DVD MID 导航用料一般包含国腾LVDS芯片GM8284C/GM8283
车载DVD MID 导航用料一般包含国腾LVDS芯片 GM8284C/GM8283/替代SN75LVDS83,THC63LVDM83C , 音频ES7144/CS4344, 龙讯MHL HDMI芯片 ...
- javaSocket与C通信
前段时间写了个web端与C服务端之间的通信不过用的是短连接 非堵塞的方式,一直想使用长连接,使tomcat启动的时候就和C服务端进行通信,但是一直没找到方法希望je的朋友能给点思路.先来看我现在的具体 ...
- 看完这篇文章才对【GIT】有了大彻大悟的认识
git定义:版本管理工具 历史:没有git的时候,我们修改完一个文件,要先把文件拷贝一个副本到备份文件夹中,还要建个文档来记录当前文件的信息和操作记录.当文件多的时候,人工操作起来将是个非常辛苦非常庞 ...
- Web API 2中的Action Results
[译]Action Results in Web API 2 单击此处查看原文 本文阐述了ASP.NET Web API是如何将controller action的返回值转换为HTTP respons ...