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布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

随机推荐

Delphi与Windows 7下的用户账户控制(UAC)机制及禁用兼容性助手
WIN7, Vista提供的UAC机制,它的主要目的是防止对于操作系统本身的恶意修改.对于Delphi程序的影响,UAC主要在于以下几点:1.由于UAC机制,Delphi对于系统的操作可能无声的失败, ...
abap调vb写的dll实现电子天平的读数（带控件版）
废话不多说,直接上. 鉴于abap调研的dll文件需要在wins注册,自己尝试过delphi和C#感觉不是很好,最后毅然选择了VB来写因为需要用到MScomm控件,所以对于将要写的dll需要带for ...
话说Spring Security权限管理（源码）
最近项目需要用到Spring Security的权限控制,故花了点时间简单的去看了一下其权限控制相关的源码(版本为4.2). AccessDecisionManager spring security ...
MVC3 新建项目
一.安装工具二.新建项目 step1:新建MVC3项目打开新建项目窗口,在“已安装的模板”列表中选择“Web”,在右侧应用程序模板列表中选择“ASP.NET MVC3 Web应用程序”,修改项目名 ...
oracle initialization or shutdown in progress解决方法
[解决方法] SQL> connect sys/hope as sysdba 已连接. SQL> shutdown normal ORA-01109: 数据库未打开已经卸载数 ...
iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页
①iPhone的设计尺寸 iPhone界面尺寸: 设备分辨率状态栏高度导航栏高度标签栏(工具栏)高度 iPhone6 plus设计版 1242 × 2208 60px 132px 146px ...
C# 将容器内容转成图片导出
/// 将容器内容转成图片导出,这里的controller就是this /// </summary> private void OutTheContro ...
AutoHotkey(AHK)
这是2009年用过的一个软件,自动键盘执行的一个东西,能提高效率,代替人工击键和鼠标操作,现在中文化很好了,如下地址是中文文档 http://ahkcn.sourceforge.net/docs/Tu ...
php 图片验证码生成前后台验证
自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一下,希望大家在用到相关问题的时候可以有一定的参考性. 首先,php验证码生成. 代码如下: 1.生成图像代 ...
wxPython入门练习代码一
Bare.py: #1.导入必须的wxPython包 import wx #2.子类化wx应用程序类 class App(wx.App): #3.定义应用程序初始化方法 def OnInit(self ...

DIV+CSS布局网站基本框架

DIV+CSS布局网站基本框架的更多相关文章

随机推荐

热门专题