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布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
随机推荐
- Python’s SQLAlchemy vs Other ORMs[转发 2]Storm
Storm Storm is a Python ORM that maps objects between one or more databases and Python. It allows de ...
- VPS/云主机 如何试用远程连接登录主机服务器_
1.windows主机如何远程登录 点本地电脑开始>运行(或者按"window+R")>输入mstsc点确定 弹出远程连接的框输入IP连接, 如果是VPS,直接输入I ...
- python 学习1
安装环境 python(2.7.x)(64位) + django(1.9.7) + python-mysql(64位) 安装python时自带pip与easy_install,因此可用 pip ins ...
- 3level_menus
# encoding: utf-8 # Creator:耿亚月 Creation time:2017-1-2 # Modifier:耿亚月 Modification time:2017-1-2 #输入 ...
- Mac OS X下重启apache
打开终端 重启apache:sudo /usr/sbin/apachectl restart 关闭apache:sudo /usr/sbin/apachectl stop 开启apache:sudo ...
- 安装 node-sass 的正确姿势
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
- 手机升级到iOS10,用Xcode7.3进行真机调试方法
今天发布的正式版的iOS10,手机果断升级了,结果发现Xcode7.3不能真机调试了,原因是Xcode7.3里面没有iOS10的sdk,下面这个压缩包你可以下载下来放在你的Xcode7.3里面,当然了 ...
- TRACERT命令
这半个月 服务器从联通线路换到移动线路 导致基层用联通和电信线路的用户 上不去收费软件 tracert 120.194.42.142:8090 发现路由器 解析地址绕过很多条街后 出现丢包现象 联系 ...
- AnyCAD.NET C#开发CAD软件实践(一)
免费的AnyCAD.NET发布了!俺喜欢的C#有了大展前途的机会了. 打算用这个框架搭建一套实用的CAD系统,目标是能买出去10套以上. 先看看AnyCAD.NET的自我介绍. http://www. ...
- React Native 组件样式测试
View组件默认样式(注意默认flexDirection:'column') {flexGrow:0,flexShrink:0,flexBasis:'auto',flexDirection:'colu ...