div+css网页布局代码（div+css如何做页面的一行两列布局）

本文目录

• div+css如何做页面的一行两列布局
• 请帮我写一个简单的DIV+CSS网页布局例子
• 网站代码优化操作流程，如何给网站做代码优化
• 用div+css设计一个页面布局

div+css如何做页面的一行两列布局

div+css做页面的一行两列布局，首先我们是需要三个div的，第一个div包裹着其他的2个div，然后给那2个div设置float属性和width，height，最好是给个border利于布局的时候方便观察，这里举个例子： 《html》《head》《style》#div1{width:960px; //通过id来控制height:600px;} .left{width:400px height:400px;border:1px solid #f00;float:left;marign-right:40px; //距离第三个div有点距离} .right{width:400px; border:1px solid #f00;height:400px;float:left;}《/style》《/head》 《body》《div id=’div1’》 《div class=’left’》我是左边的《/div》《div class=’right’》我是右边的《/div》《/div》《/body》《/html》

请帮我写一个简单的DIV+CSS网页布局例子

CSS/*基本信息*/body{font:12pxTahoma;background:#CCCCCC;}/*适用于页面整体：字体及字体大小，页面页边距全部设置为0，文字对齐方式为居中，背景颜色*/*{margin:0;padding:0;border:0;}/*全局设定，外边距，内边距和表格边框全部为0*/html,body{height:100%;}/*全局设定高度为100％*//*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*//*页面主体*/#pagebody{width:780px;/*设定宽度*/margin:0pxauto;/*居中*/}#mainleft{width:192px;/*设定宽度*/float:left;/*浮动居左*/clear:left;/*不允许左侧存在浮动*/overflow:hidden;/*超出宽度部分隐藏*/border:1pxsolid#006699;margin:5pxauto;height:auto;}#mainright{width:580px;text-align:left;float:right;/*浮动居右*/clear:right;/*不允许右侧存在浮动*/overflow:hidden;border:0pxsolid#E00;/*初始使用表格，留存使用*/margin:5pxauto;}#mainright2{width:578px;float:right;/*浮动居右*/clear:right;/*不允许右侧存在浮动*/overflow:hidden;border:0pxsolid#006699;margin:2pxauto;height:auto;}#mainright3{width:285px;/*设定宽度*/float:left;/*浮动居左*/clear:left;/*不允许左侧存在浮动*/overflow:hidden;/*超出宽度部分隐藏*/border:1pxsolid#006699;margin:2pxauto;height:auto;}#mainright4{width:285px;/*设定宽度*/float:right;/*浮动居左*/clear:right;/*不允许左侧存在浮动*/overflow:hidden;/*超出宽度部分隐藏*/border:1pxsolid#006699;margin:2pxauto;height:auto;}/*字体设置*/#biaoti{font-size:10px;font-weight:bold;padding-left:10px;color:#FFf;background-color:#006699;height:20px;}页面《!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"***隐藏网址***《html***隐藏网址***《head》《meta***隐藏网址***content="text/html;charset=gb2312"/》《title》无标题文档《/title》《linkhref="css.css"rel="stylesheet"type="text/css"/》《/head》《body》《divid="pagebody"》《!--页面主体--》《divid="mainleft"》左侧显示《/div》《!--左侧关闭--》《divid="mainright2"》《divid="mainright3"》右侧一显示《/div》《divid="mainright4"》右侧二显示《/div》《/div》《/div》《/body》《/html》

网站代码优化操作流程，如何给网站做代码优化

给网站代码做优化，可以从以下几个方面进行：

1、head部分代码规范化

head部分代码是搜索引擎爬行网站的入口部分，将网站的代码规范化，建立起网站独一无二的head部分。

2、使用div+css布局网页

大多数网页都在用div+css另外，一些网站会使用外部文件，将css和js放在外部文件中，页面html中只要放一样代码调用就可以了，

3、css优化

css是页面效果呈现中非常重要的组成部分，它包括颜色、大小尺寸、背景和字体等。所有css定义代码的位置要放到网站之前。网站上的一些图片可以采用csssprite技术进行合并，减少加载请求次数，从而提高网页的加载速度，减小css文件的大小，尽量不要使用内嵌式css。

将html控制方式转换为CSS控制比如利用标签内对内容进行控制，比如img标签里通过width和height来控制图片的大小，尽量将这些代码转换成外调式的CSS，使网页代码减少。

4、JS优化

将js放在页面最后，这样可以加快页面打开速度。合并js合并相同域名下的js，通过减少网络连接次数从而提高网页的打开速度。当前的搜索引擎还是不能够识别JS代码的，可以将用到Javascript代码用外部调用的形式放在网站中，降低页面对于JS的依赖性，尤其是页面的关键位置如导航栏，尽量采用DIV+CSS的设计方法。

5、清除页面中多余的代码，比如注释代码，减少页面代码的容量。

6、缓存静态资源

通过设置浏览器缓存，将css、js等不太经常更新的文件缓存在浏览器端，这样同一访客再次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、js等，在一定程度上加快了网站的打开速度，而不必每次都从你的服务器读取，节省服务器流量。

7、网页压缩技术

启用服务器Gzip，对页面Gzip压缩，减少元素的体积，从而减少数据的传输，进而提高网页的打开速度。

用div+css设计一个页面布局

《style》.head{width:100%;height:60px;}.main{width:70%;height:400px;float:left;}.main{width:30%;height:400px;float:right;}.footer{width:100%;height:60px;}《/style》《div class ="head"》这里是head区域《/div》《div class ="main"》这里是主要内容区域《/div》《div class="main_left"》这里是右侧区域《/div》《div class="footer"》这里是页脚区域《/div》