作家
登录

DIV+CSS通用样式布局实例代码

作者: 来源:www.28hudong.com 2012-11-19 17:37:08 阅读 我要评论

一下是一个非常简单易懂的通用样式布局,希望对于刚开始接触DIV+CSS的同学有帮助。先看效果图: 我们可以看出通常的页面布局有以下几个部分:头部、内容、底部,其中内容有左侧主显区和右侧边栏。下面贴出代码: 复制代码代码如下: <!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=gbk" /> <title>DIV+CSS practice</title> <link href="css/common.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <!-- 头部 --> <div id="head"> </div> <!--END 头部 --> <!-- 主容器 --> <div id="container"> <!-- 左侧主显区 --> <div id="content"> </div> <!-- END 左侧主显区 --> <!-- 右侧边栏 --> <div id="side"> </div> <!-- END 右侧边栏 --> </div> <!-- END 主容器 --> <div class="clear"></div> <!-- 底部 --> <div id="foot"> </div> <!-- END 底部 --> </body> </html> common.css样式文件: *{ margin:0; padding:0; } body{ background-color:gray; } .clear{ clear:both; } /*head*/ #head{ background-color:blue; height:150px; } /*container*/ #container{ background-color:red; width:960px; height:800px; margin:20px auto; } /*content*/ #content{ background-color:yellow; float:left; width:685px; height:100%; } /*side*/ #side{ background-color:green; float:right; width:255px; height:100%; } /*foot*/ #foot{ background-color:white; height:150px; width:960px; margin:20px auto; } 大致布局很简单了,首先要有这个大局观,然后再完善其中的细节,学习PHP或者其他语言同样如此,首先要有一个思想,知道每一步做什么,怎么做,这样才能把知识灵活运用。

  推荐阅读

  浮动的ul背景及图片的边框的使用

今天遇到的问题整理: 1.ul中的li浮动时,无论给外层div的class写背景,还是给ul写背景,都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。解决方法是给外层div加上cle>>>详细阅读


本文标题:DIV+CSS通用样式布局实例代码

地址:http://www.17bianji.com/kaifa2/CSS/16495.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)