div+css三行两列布局怎么写,求大神解答

作者&投稿:晨凌 (若有异议请与网页底部的电邮联系)
CSS+div三行两列布局~

float 少一个

复制下面的代码试试!






无标题文档

<!--

#main{
width:780px;
height:700px;
background-color:#333333;
}
#left_m{
width:400px;
background-color:#0000FF;
float: left;
}
#right_m{
width:350px;
background-color:#FF3300;
float:right;
}
.clear{clear:both}

-->







this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!



this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!





你的意思是用表格?rowspan是上下合并单元格,也就是合并行,colspan是水平合并单元格,也就是合并列。
比如这样的一个表格,其实是第一行第一个表格,和第二行第一个表格的合并,在第一个td里写入rowspan,就可以了。 当然,也就相应的要删掉第二行第一个表格,也就是第二个tr里的一组td。第一行的两个表格合并,就用colspan。 看到这样一个表格,你就可以先确定是在三行两列的表格的基础上去实现,把你想要的效果先画出来,然后就知道需要几行几列了。
另外,这个并不是DIV+CSS布局啊,布局很少去用表格了,现在只是表单部分用表格方便点。

DIV+CSS三行两列经典布局

 

这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的,一个非常经典的布局,在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在原代码的基础上作了一定规范整理):

<html> 

<head> 

<meta http-equiv='Content-Type' content="text/html; charset=gb2312"> 

<title>XHTML之经典三行两列布局 - seobbs.net</title> 

<style type="text/css"> 

body 

{ background: #999; text-align: center; color: #333; fontfamily: Verdana, Arial, Helvetica, sans-serif; } 

a:link, visited 

{color:#004592;text-decoration:none;} 

a:hover {color:#004592;text-decoration:underline;} 

a:active {color:#004592;text-decoration: none;} 

img {border:0px;} 

#header { margin-right: auto; margin-left: auto; padding: 0px; width: 776px; background: #EEE; height: 60px; text-align: left;}

 #contain { margin-left: auto; margin-right: auto; width: 776px; } 

#mainbg { float: left; padding: 0px; width: 776px; background: #60A179; } 

#right { float: right; margin: 2px 0px 2px 0px; padding: 0px; width: 574px; background: #ccd2de; text-align:left; } 

#left { float: left; margin: 2px 2px 0px 0px; padding: 0px; background: #F2F3F7; width: 200px; text-align:left; } 

#footer { clear: both; margin-right: auto; margin-left: auto; padding: 0px; width: 776px; background: #EEE; height: 60px; }

 .text {margin:0px;padding:20px;} 

</style> 

</head> 

<body> 

<div id="header">header</div> 

<div id="contain"> 

<div id="mainbg">

<div id="right"> 

<div class="text">text<p>段落< /p><p>段落</p><p>段落</p><p>段落</p> <p>段落</p></div> </div> <div id="left"> <div class="text">left</div> </div> </div> </div> 

<div id="footer">footer</div> 

</body> 

</html>

效果演示及代码:www.st539.com/news_view.asp?id=123


SEO角度分析这个布局的优势:

我们先按网页设计惯例来看页面中的内容分布,一般情况下,头部(A区)为站点导航,底部(D区)为辅助导航及版权信息等,左侧(B区)会放搜索、列表、排行等功能性内容,核心内容就集中在右侧(C区)。

如上图标识所示,按传统的布局,代码编写顺序是“A->B->C->D”,也可以理解为“功能->功能->核心内容->功能”。

都知道,搜索引擎蜘蛛爬行时,是按着页面代码顺序自上而下的,这种情况下蜘蛛很难最快的爬行到核心内容;而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回,抓取到的是与其他页面一样的功能内容时,这个页面就成为相似网页。

为了避免这样的情况,包括新浪、搜狐、网易在内的很多网站(可能也包括你^_^),都在设计时将页面中B区和C区对调。

再来看本布局方式,页面代码顺序是“A->C->B->D”,按内容分布可以理解为“功能->核心内容->功能->功能”,在不改变页面展示的情况下,将核心内容部分放到了前面。

这样,蜘蛛爬行时就能在最短时间内索引到网页的核心内容。



外边用一个DIV 控制宽度 用LI 标签,每个LI 给border 每个LI margin-left:-1px; margin-top:-1px; 不明白就追问

没明白你的意思,如果你要做成表格,用table更合适


如何使用css让td中的文字自动换行
1、首先打开hbuilder软件,新建一个html文件,里面设置一个3行一列的table表格。2、然后在style标签中设置table的样式,给table一个宽度和高度,并且把字体调大,设置背景色;再设置td的样式,给它们添加word-wrap和word-break两个属性就可以了,此css属性表示 在长单词或 URL 地址内部进行换行。3、...

html css下面的表格应该怎么设计
这种标准的二维表格,我建议使用……来布局,你会发觉容易而简单的多。如果你想用table来布局的话,可以追问我代码。

浅谈CSS预处理器(一):为什么要使用预处理器
我们来比较一下以下两段代码:\/* 原生 CSS 代码 *\/strong { color: #ff4466; font-weight: bold;}\/* ... *\/.notice { color: #ff4466;}\/\/ ...举个例子,我们需要让一个容器最多只显示三行文字,在以前我们通常是这样写的:.wrapper { overflow-y: hidden; line-height: 1.5; max-height: 4.5em; ...

在CSS 中,用 float 和 position 的区别是什么
两者是有绝对的区别的,float是时元素浮动,而position是用来给一个元素定位的。1、float的定义和常见用法:float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。、...

怎么用CSS设置网页table边框样式
二、对td设置边框 - TOP 对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。详细案例教程如下:1、对应css代码 .table-b table td{border:1px solid #F00} \/* css注释:只对table td标签设置红色边框样式 *\/ 2、对应html源代码片段 站名 网址...

div标签如何预览css怎么预览
3、然后在p标签中输入的代码,style代表了这个p直接添加了CSS样式,这样就成功了。样式要在英文的引号中,否则是不起作用的。vtext使用教程?第一步,创建静态页面vtext.html,修改title显示的内容并引入vue.js,第二步,在body标签元素内插入两个span元素,在第一个span绑定v-text指令,第二个span中...

JS文件放到哪里?把CSS放在顶端,什么意思啊
文件名就是ikqb.css,这个文件里放的是页面的一些css设置,比如背景图片,字体颜色等,都是由这个文件控制的在下面的.quicklinks 是单独写到这个页面的css,用于控制本页的一些样式一般上面的这些东西都要写到这两个标签的里面还有类似这样的代码,是在本页写的一些js函数,一般要放到文件的底部,因为他要...

求一div与css
品牌二 品牌<\/d> 品牌 品牌<\/d> 品牌 大众 品牌一<\/d> 品牌二 品牌<\/d> 品牌 品牌<\/d> 品牌 品牌<\/d> 品牌 品牌<\/d> 品牌 大发 品牌一<\/d> 品牌二 品牌<\/d> 品牌<

CSS3下的渐变文字效果实现
一、方法一:借助mask-image属性如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果:相应的HTML代码如下:[code]h2 class="text-gradient" data-text="天赐美妞"天赐美妞\/h2[\/code][button value="复制代码"]与HTML相对应的CSS代码如下:[code].text-gradient {...

关于css 中间的div 自适应的问题。急求!!!
一、背景 在采用基于DIV+CSS的布局开发时,经常需要考虑各种浏览器版本的兼容性问题。常用的布局模式主要包括:左中右、上中下,以及两种模式的结合。在早期的开发,一般都采用Table标记的方式实现。当尝试采用基于DIV的模式,发现一切都变的似乎没那么简单了。特别是浏览器的兼容性问题,更加突出了。二、...

山阳县19328228120: div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做 -
欧喻猗清: 你的意思是用表格?rowspan是上下合并单元格,也就是合并行,colspan是水平合并单元格,也就是合并列.比如这样的一个表格,其实是第一行第一个表格,和第二行第一个表格的合并,在第一个td里写入rowspan,就可以了. 当然,也就相应的要删掉第二行第一个表格,也就是第二个tr里的一组td.第一行的两个表格合并,就用colspan. 看到这样一个表格,你就可以先确定是在三行两列的表格的基础上去实现,把你想要的效果先画出来,然后就知道需要几行几列了.另外,这个并不是DIV+CSS布局啊,布局很少去用表格了,现在只是表单部分用表格方便点.

山阳县19328228120: 如何用div+css制作一个两行三列的表格? -
欧喻猗清: 这个比较麻烦!给你个思想!用DIV的FLOAT属性就可以实现!剩下的就是宽高的问题!

山阳县19328228120: 请问如何用 div+css 写一个 2 行 3 列的表格,有会的,请给写个实例, -
欧喻猗清: css样式: .box{width:306px;} .box ul{overflow:hidden;} .box ul li{float:left;width:100px;border:1px red solid;}div+css代码:<div class='box'><ul><li>1</li><li>1</li><li>1</li></ul><ul><li>2</li><li>2</li><li>2</li></ul> </div>具体看效果吧.

山阳县19328228120: 用div+css写一个两列布局. -
欧喻猗清: 你好!这应该比较容易的啊,这是CSS中很基础的布局设计啊,不过你没有说主体的宽度是多少,那我就默认为100%,随浏览器的宽度而定.我就随手写一下代码,我就以建立一个CSS样式表,然后调用该CSS样式的做法,提供你参考一下: ...

山阳县19328228120: div+css中三列横向并排列的代码 -
欧喻猗清: 三列布局的话,设置宽度小于总宽的1/3,然后全部浮动左float:left;就可以了..

山阳县19328228120: CSS+div三行两列布局 -
欧喻猗清: float 少一个 </div> 复制下面的代码试试!<!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-...

山阳县19328228120: 如何用div+css制作一个两行三列的表格?
欧喻猗清: 给你发个简单的事例! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <style type="text/css"> #a1{ width:100px; height:20px; border:1px solid red; ...

山阳县19328228120: 谁有DIV+CSS常用的网页布局代码 -
欧喻猗清: 可以运用Javascript来设置DIV的位置的,更简单,以下是代码:各阶段版本信息 关 闭 /*显示DIV*/ function showDIV() { /*获取当前鼠标左键按下后的位置,据此定义DIV显示的位置*/ var leftedge = document.body.clientWidth-event.clientX; var ...

山阳县19328228120: DIV+CSS一行三列代码如何写? -
欧喻猗清: 大概的结构如下:<div><div class=“left”><!-----左边盒子-----><ul><li>条目1</li><li>条目2</li><li>条目3</li> ……</ul></div> <div class=“middle”><!-----左边盒子-----><ul><li>条目1</li><li>条目2</li><li>条目3</li> ……</ul></div> <div class=...

山阳县19328228120: 用div css布局网页的技巧? -
欧喻猗清: 单行一列Example Source Code body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;} 两行一列 Example Source Code body{margin:0px;padding:0px;text-align:center;} #content-top{...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网