每天点滴的进行，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=" ...
随机推荐
- 基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺
第一个基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺 还没来得及用 API 重写软件, 先写个小程序来缓解一下手工压力: 批量Copy 产品到不同的店铺. 开网店 ...
- Servlet的Request.getInputStream()只能读取一次问题
Servlet的Request.getInputStream()只能读取一次问题 这个星期公司的项目接口进行改造,公司的接口有的采用了WebService的方式,有的使用的是Http协议+Servle ...
- mosquitto awareness when before it's being compiling, and you do settings and testing
Mostly, this clearify the usage of ' mosquitto.conf ' in easy-understanding language. 1. compile ...
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 在android中有时候可能要实现一个底部弹 ...
- DEV gridcontrol 设置行数据超宽换行
第一 在main > columns 的 某个gridcolumn下的 columnEdit为新建为 repositoryitemmemoedit 第二 repositor下的optionvie ...
- C#:using与.net对象销毁
一 . 1.using 语句获取一个或多个资源,执行一个语句,然后处置该资源. 2.using 语句: using ( 资源获取 ) 嵌入语句 3.资源获取: 局部变量声明 表达式 资源是实现 ...
- azkaben任务调度器
azkaban学习笔记总结 01.工作流调度器azkaban 1. 任务调度概述 一个完整的数据分析系统通常都是由大量任务单元组成: shell脚本程序,java程序,mapreduce程序.hive ...
- Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...
- 编写高性能SQL的注意事项
在数据库部分,对数据库应用性能改进来说,需要重点关注应用程序,在查询设计和索引策略等方面进行优化,甚至可以把数据库查询效率提高数百倍,在其他方面的优化努力,其效果就没有这么明显(见下图).本文重点描述 ...
- CodeForces 721D Maxim and Array
贪心,优先队列. 先看一下输入的数组乘积是正的还是负的. ①如果是负的,也就是接下来的操作肯定是让正的加大,负的减小.每次寻找一个绝对值最小的数操作就可以了. ②如果是正的,也是考虑绝对值,先操作绝对 ...