每天点滴的进行，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=" ...
随机推荐
- Memcache的一些学习
Memcache的一些学习 首先,Memcache是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动 ...
- python JSON API duckduckgo search engine 使用duckduckgo API 尝试搜索引擎
The duckduckgo.com's search engine is very neat to use. Acutally it has many things to do with other ...
- 人机ai五子棋 ——五子棋AI算法之Java实现
人机ai五子棋 下载:chess.jar (可直接运行) 源码:https://github.com/xcr1234/chess 其实机器博弈最重要的就是打分,分数也就是权重,把棋子下到分数大的地方, ...
- openresty 前端开发轻量级MVC框架封装一（控制器篇）
通过前面几章,我们已经掌握了一些基本的开发知识,但是代码结构比较简单,缺乏统一的标准,模块化,也缺乏统一的异常处理,这一章我们主要来学习如何封装一个轻量级的MVC框架,规范以及简化开发,并且提供类似p ...
- 【CSS学习笔记】整齐的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 使用spring-data-mongodb操作mongodb
mongodb.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...
- USACO 3.4 Raucous Rockers
Raucous Rockers You just inherited the rights to N (1 <= N <= 20) previously unreleased songs ...
- Android 消息传递之Bundle的使用——实现object对象传输（二）
上面学习了线程通过Massage发送字符串消息,Handler接收字符串消息,这样的形式来更新ui,接下来,一起分享怎么把一个对象利用消息机制发送出去,让主线程接收来更新ui. 下面就利用一个服务Se ...
- npoi导入--从varchar数据类型到datetime数据类型转换产生一个超出范围的值问题
一,导入问题如图: 二,解决方法和原因: 1,经过调试发现导入获取到的日期数据被装换成1/1/10 0:00,如下图: 而将以上的数据插入数据库类型为datatime的列时会报错 2,经过去了解npo ...
- 【转】Oracle + PHP Cookbook（php oracle clob 长度超过4000如何写入）
在甲骨文LOB和PHP工作 由哈里Fuecks 达到4,000字节的限制?输入LOB ... 在这个"Oracle + PHP Cookbook"HowTo中,您将学习可用的L ...