导航:首页 > 万维百科 > 三行两列的网页首页设计

三行两列的网页首页设计

 发布时间：2020-12-31 11:11:43

1、在网页里如何用代码写出三行两列的表格？

用HTML写的话是这样写的：<tr></tr>代表行，<td></td>代表单元格
<table>
<tr><td>这里版是单元格内权容</td><td>这里是单元格内容</td></tr>
<tr><td>这里是单元格内容</td><td>这里是单元格内容</td></tr>
<tr><td>这里是单元格内容</td><td>这里是单元格内容</td></tr>
</table>

就是这样的了。

2、div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

我理解的方法如下，没做完整代码，class或使用ID的CSS属性需自己添加第一行：回
<div
class="行1">
<div
class="行中的列答1">
<div
class="行中列的块">块1内容</div>
<div
class="行中列的块">块2内容</div>
<div
class="行中列的块">块3内容</div>
<div
class="行中列的块">块4内容</div>
</div>
<div
class="行中的列2">
<div
class="行中列的块">块1内容</div>
<div
class="行中列的块">块2内容</div>
<div
class="行中列的块">块3内容</div>
<div
class="行中列的块">块4内容</div>
</div>
</div>
同理行二和行三。
~

3、用HTML的<table>标签，怎么写出一个三行两列的表格？

代码如下：

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

扩展资料

<table>标签定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及专一个或多个 tr、th 或 td 元素组属成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

4、CSS+div三行两列布局

float 少一个 </div>

复制下面的代码试试！

<! 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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--

#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}

-->
</style>
</head>

<body>

<div id="main">
<div id="left_m">
<p>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!</p>
</div>
<div id="right_m"><p>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!</p>

</div>
</div>

</body>
</html>

5、如何实现css布局三行二列布局代码．

div的嵌套

6、div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

我理解的方法如下，没做完整代码，class或使用ID的CSS属性需自己添加
第一行专：
<div class="行1">
<div class="行中属的列1">
<div class="行中列的块">块1内容</div>
<div class="行中列的块">块2内容</div>
<div class="行中列的块">块3内容</div>
<div class="行中列的块">块4内容</div>
</div>
<div class="行中的列2">
<div class="行中列的块">块1内容</div>
<div class="行中列的块">块2内容</div>
<div class="行中列的块">块3内容</div>
<div class="行中列的块">块4内容</div>
</div>
</div>
同理行二和行三。

7、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”，按内容分布可以理解为“功能->核心内容->功能->功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。

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

8、html 三行两列

<html >
<head>
<title>标题1</title>
</head>
<body>
<table border="1">

<tr>
<td>张三 </td>
<td>李四</td>
</tr>

<tr>
<td>张三地址：专 </td>
<td>李四地址： </td>
</tr>
<tr>
<td>张三电话属： </td>
<td>李四电话： </td>
</tr>

</table>
</body>
</html>

9、div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

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

10、怎么样用HTML创建一个3行两列的表格

这个问题既然是表格的话，那么就都有table。
css只是用来控制样式，如果您专只是想要一个三行两列属的表格而且什么要求都没有的话那就太简单了.
<table>
<tr>

<td>这里是第一行第一列</td>

<td>这里是第一行第二列</td>
</tr>
<tr>

<td>这里是第二行第一列</td>

<td>这里是第二行第二列</td>
</tr>
<tr>

<td>这里是第三行第一列</td>

<td>这里是第三行第二列</td>
</tr>
</table>

上面就是简单的表格制作
，如果您要给表格一个宽度或者高度
，那就得自己写样式
或者给它一个width
和height。
当一个列中什么数据都没有的时候，那您最好是写一个空格符 因为有的浏览器会认为您没有任何数据，而把它给忽略掉的
。希望我说的能帮到您

与三行两列的网页首页设计相关的知识