DIV+CSS布局网站基本框架
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS布局网站首页实例</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="banner">
</div>
<div id="tool">
</div>
<div class="nav"></div>
<div id="menu">
<ul>
<li><a href="#">联系我们</a></li>
<li class="tiao"></li>
<li><a href="#">联系我们</a></li>
<li class="tiao"></li>
<li><a href="#">联系我们</a></li>
<li class="tiao"></li>
<li><a href="#">联系我们</a></li>
<li class="tiao"></li>
<li><a href="#">联系我们</a></li>
<li class="tiao"></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<div class="nav"></div>
<div id="main">
<div class="leftbox">
<div class="left">
<div class="tit"><h3>热门文章</h3></div>
<div class="content">
<ul>
<li><a href="#">aaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaa</a></li>
</ul>
</div>
</div>
<div class="right">
</div>
<div class="nav"></div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="rightbox">
</div>
<div class="nav"></div>
<div class="guanggao">
<div class="tit"><h3>热门文章</h3></div>
</div>
<div class="nav"></div>
<div class="leftbox">
<div class="left">
<div class="tit"><h3>热门文章</h3></div>
<div class="content"></div>
</div>
<div class="right">
</div>
<div class="nav"></div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="rightbox">
</div>
</div>
<div class="nav"></div>
<div id="footer">
</div>
</div>
</body>
</html>
layout.css代码
/* CSS Document */
body{
margin:0px;
padding:0px;
font:12px "宋体";
text-align:center;
}
#container{
margin-left:auto;
margin-right:auto;
width:1300px;
text-align:left;
}
#header{
width:100%;
float:left;
}
#header #logo{
width:19%;
height:80px;
background:#ff00ff;
float:left;
}
#header #banner{
width:65%;
height:80px;
margin-left:1%;
background:blue;
float:left;
}
#header #tool{
width:14%;
height:80px;
background:black;
float:right;
}
#header #menu{
width:100%;
/*height:28px;*/
background-color:#aaa;
float:inherit;
/*float:left;
float:both;*/
}
#main{
width:1300px;
float:left;
}
#main .leftbox{
float:left;
width:990px;
}
.leftbox .left{
float:left;
width:400px;
height:195px;
background:yellow;
}
.tit{
float:left;
width:100%;
height:26px;
background:url(../images/title.png) no-repeat right;
}
.content{
float:left;
width:398px !important;
width:400px;
height:169px;
border:1px solid #bbb;
}
.content li{
width:100%;
text-align:left;
padding-left:5px;
line-height:20px;
font-size:16px;
}
.content li{
background:url(../images/li_icon.gif) no-repeat 0 center;
padding-left:15px;
}
.content li a{
text-decoration:none;
background:url(../images/dot.gif) repeat-x bottom;
}
.tit h3{
margin:0px;
padding:0px;
padding-left:5px;
width:350px;
line-height:26px;
font-size:14px;
background:url(../images/title.png) no-repeat left;
}
.leftbox .right{
float:right;
width:580px;
height:195px;
background:yellow;
}
#main .rightbox{
float:right;
width:300px;
height:400px;
background:red;
}
.guanggao{
float:left;
width:100%;
height:100px;
background:green;
}
ul{
background:yellow;
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
height:20px;
line-height:20px;
padding-top:5px;
padding-bottom:5px;
width:100px;
float:left;
text-align:center;
}
#menu a{
color:white;
}
#header #menu .tiao{
width:1px;
height:10px;
margin-top:5px;
overflow:hidden;
background:#000;
float:left;
}
#footer{
width:1300px;
height:80px;
background:blue;
float:left;
}
.nav{
width:100%;
height:10px;
clear:both;
overflow:hidden; /*IE指定的最小高度为18px，所以我们让超出部分隐藏*/
float:left;
}
a:hover{
position:relative;
top:1px;
left:1px;
color:red;
}
DIV+CSS布局网站基本框架的更多相关文章
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
随机推荐
- 转，Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数
关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...
- Redis一个异常的解决办法，异常描述：Could not get a resource from the pool
异常描述: redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the poo ...
- 浅析final 关键字
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.下 ...
- 2016年2月16日开始，每天一篇，记录学习心得，【基本技能篇】>>开篇《如何阅读一本书——心得》
如何阅读一本书——心得 ——2016年2月12日 要达到阅读的所有目的,就必须在阅读不同书籍的时候,运用适当的不同速度.读的太快或太慢,都一无所获. 四个阅读层次:①基础阅读,具有基本阅读的能力,包括 ...
- java selenium (八) Selenium IDE 用法
Selenium IDE 是Firefox 浏览器的一个插件, 它会记录你对Firefox的操作,并且可以回放它的操作. 用法简单,不过我觉得这个没多大的用处 阅读目录 Selenium IDE ...
- 做App还是微信公众号，你该如何抉择？
我不够聪明,因为我经常出于好奇被自己提出的问题所困扰,于是乎就有些强迫症似的拼命去寻求答案——我只是想说服自己,让自己从困扰的谜团中清醒.坚定方向,进而能从容不迫的走下去... 最近在考虑一个问题:做 ...
- node.js+socket.io安装
最近做安卓遇到一个网络包的bug,服务端使用node做的,通讯用socket.io,但是服务端没法调试,没办法,还是自己搭建一个服务器端吧,索性买了阿里云的ecs测试,之前也配置过node+socke ...
- NSTimer “定时器”
•NSTimer叫做“定时器”,它的作用如下 Ø在指定的时间执行指定的任务 Ø每隔一段时间执行指定的任务 Ø •调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTime ...
- iOS网络推送消息
在iOS项目的appdelegate.m文件中: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpti ...
- 关于Gridview的列名问题
Gridview的的数据绑定方法有两种: 一种就是datasourceid的绑定在绑定过程当中也可以通过select来选择性的绑定. 二种就是databind(): SqlDataAdapter da ...