❶ div+css三行兩列布局怎麼寫,求大神解答
DIV+CSS三行兩列經典布局
這個XHTML1標準的DIV+CSS布局是著名網頁設計師2004年發布在《網頁設計師》上的,一個非常經典的布局,在IE、Mozilla和Opera瀏覽器中均可以實現居中和高度自適應。完整代碼如下(在原代碼的基礎上作了一定規范整理):
<html>
<head>
<metahttp-equiv='Content-Type'content="text/html;charset=gb2312">
<title>XHTML之經典三行兩列布局-seobbs.net</title>
<styletype="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:2px0px2px0px;padding:0px;width:574px;background:#ccd2de;text-align:left;}
#left{float:left;margin:2px2px0px0px;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>
<divid="header">header</div>
<divid="contain">
<divid="mainbg">
<divid="right">
<divclass="text">text<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p></div></div><divid="left"><divclass="text">left</div></div></div></div>
<divid="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+css布局網頁成三行三列
DIV+CSS沒辦法像Table那樣輕松的劃分塊。布局之前,必選先確定塊,浮動的結構,不能任意的再拆分。你可以在Div內進行嵌套。
如有疑問追問,如滿意記得採納,
如果有其他問題也可點我名字向我求助
答題不易,
如果沒有回答完全,請您諒解,
請採納最快回答的正確答案!!謝謝!
❸ 求一段html代碼,讓兩三行文字顯示在網頁正中間,百度了許多代碼。都是把文字顯示在第一行正中。
很簡單,給你寫個小例子吧:
<html>
<head>
<script type="text/javascript" language="javascript">
function resizeFrame(){
var vH=document.getElementById("middle").offsetHeight;
var y=(parseInt(document.documentElement.clientHeight)-vH)/2;
var vW=document.getElementById("middle").offsetWidth;
var x=(parseInt(document.documentElement.clientWidth)-vW)/2;
document.getElementById("middle").setAttribute("style", "margin-top:"+y+"px;margin-left:"+x+"px;");
}
window.onresize=resizeFrame;
window.onload=resizeFrame;
</script>
</head>
<body >
<div id="middle" style="position:absolute;">
文字居中顯示!<br/>
文字居中顯示!<br/>
文字居中顯示!<br/>
</div>
</html>
❹ 4. 在網頁中插入一個3行2列,表格邊框為0,寬度為1024,高度為778,背景顏色為紅色,在第一個單元格內插入
把游標放在第一個單元格內,然後右鍵「插入表格」你選擇三行兩列,然後選中插入的表格,右鍵,有「表格屬性」可對表格進行設置為寬度為1024高度為778,然後點擊「邊框和底紋」就選擇「無邊框」。這樣就OK了!
❺ 怎樣把chrome瀏覽器的啟動頁設置成多個網頁選項框框,就是3行3列那種樣子現在的是只能同時打開多個主頁
選項的基本設置里,在啟動時對應的選項里選擇"打開主頁",然後在主頁的選項里選擇"使用新標簽頁界面"就可以了
❻ 有關網頁製作.如何用<DIV>布局,做出三行三列不用表格.
不知道你說的是哪種。。。。我兩種都說一下
一種是你沒開始布局,那最簡單了。。。直接拉動就是,不過在屬性裡面要標好寬高
還有一種就是在已布局的方框內,拉出一個框後按住CTRL繼續拉。。。拉出9個就OK了
不早說用到樣式 =。= 樓下的很詳細 =。=
❼ 網頁三行三列表格的代碼
在dw設計中插入表格3行3列,自動生成代碼。
<table>
<tr><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td>
</tr>
</table>
❽ 網頁製作問題,怎麼用代碼設置圖片大小,讓12張圖片三行四列
1.可以製作一個表格,三行四列
2.設計布局的寬度,比如寬度為800PX,你每張圖片的寬度為200,那麼你連續放12張圖片,自然是3行4了列。
3.如用是asp.net程序的話,好幾個控制項都可以實現的。
希望採納
❾ 輸三行每一行最多80個字元怎麼設置
輸三行每一行最多80個字元設置方法:
1、打開一個Word文檔。
2、依次點擊頁面布局-頁邊距-自定義頁邊距-文檔網路。
3、勾選指定行和字元網路,對字元和(行)進行設置。
4、設置好後,點擊右下角的【確定】即可。
❿ CSS做網頁三行式布局(上中下),中間有一個div,是一個橫向導航欄...
你錯了,你中間的div其實只是佔領了一行,並不是寬度和其他兩個一樣,你分別非三個div定義一個背景顏色,你就知道他們的寬度是不一樣了,之所以中間的寬度只有1px也會佔領一行的關系,是因為div和p標簽一樣,都是類模塊,他們的屬性display=block;當設置成display=inline-block的時候,他們幾個居然在一行顯示了