導航:首頁 > 萬維百科 > 三行兩列的網頁首頁設計

三行兩列的網頁首頁設計

 發布時間：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。
當一個列中什麼數據都沒有的時候，那您最好是寫一個空格符 因為有的瀏覽器會認為您沒有任何數據，而把它給忽略掉的
。希望我說的能幫到您

與三行兩列的網頁首頁設計相關的知識