DIV+CSS實現網頁布局實例代碼(2)

2020-03-24 17:10:36

字體：大中小

來源：轉載

供稿：網友

首先我們來介紹一下頁面設計的時候需要注意的一些問題。做一個網站主頁面最好不要超過三屏，如果內容太多的話利用選項卡來代替。標題用 h3 比較容易符合搜索引擎優化。
我們完成的效果圖：
該布局完整代碼： html
head
title div+css實現網頁布局實例代碼 /title style
!--
body{
margin:0px;
text-align:center;
background:#ffffcc;
} #container {
width:800px;
height:1000px;
margin:auto 0px;
}#header {
float:left;
width:800px;
height: 100px;
margin:auto 0px;
background:red;
clear:both;

}#logo {
float:left;
width:250px;
height:90px;
background:green;
clear:right;
margin:opx;
}#banner{
float:right;
width:540px;
height:90px;
margin:0px;
clear:left;
background:blue;
}

#menu {
width:800px;
height:35px;
margin:auto 0px;
clear: both;

}

#menu ul {
float:left;
list-style:none;
margin:0px;
}#menu ul li {
float:left;
dispaly:block;
line-height:35px;
margin:0 10px;
}.menuDiv {
width:1px;
height:35px;
background:green;
}#menu ul li a:link, #menu ul li a:visited {font-weight:bold; color:blue;
}#menu ul li a:hover { font-width:800;
color:red;
}.nav {
margin:auto 0px;
width:800px;
height:10px;
clear:both;
background:#ffffff;
line-height:10px;
}.nav_a {
float:left;
margin:0px;
width:610px;
height:10px;
clear:both;
background:#ffffff;
line-height:10px;
}

.left_main {
margin:0px;
float:left;
width:610px;
height:420px;
background:red;}.right_main{
margin:0px;
float:right;
width:180px;
height:420px;
background:green;
clear:left;
}.left_a {
margin:0px;
float:left;
width:300px;
height:205px;
background:blue;}
.left_b {
margin:0px;
float:right;
width:300px;
height:205px;
background:blue;
clear:left;
}

.con {
margin:auto 0px;
width:800px;
height:200px;
background:green;
clear:both;

}

.one {
float:left;
width:200px;
height:200px;
background:#ff99f0;
clear:right;
} .two{
float:left;
width:200px;
height:200px;
background:#ffcc00;
} .three {
float:left;
width:200px;
height:200px;
background:#0ffff0;
}.four {
float:right;
width:190px;
height:200px;
background:#f0fff0;
}#footer {
width:800px;
height:100px;
background:red;
margin:auto 0px;
padding-top: 30px;
color: #ffffff;
}
#footer a:link, #footer a:visited,{
text-decoration:none;
color: #ffffff;
}
#footer a:hover{
text-decoration:underline;
color: #ffffff;
}

.tab1 h3{
float:left;
width:300px;
height:20px;
line-height:20px;
margin:0px;
font-size:13px;
text-align:left;
color:red;
background:green;
padding-left:10px;
}.tab2{
width:300px;
height:180px;

background:yellow;

}.tab2 ul {
margin: 4px 0 0;
list-style:none;
padding:0;
}

.tab2 li
{
float:left;
width:50%;
}.tab2 li a {
display:block;
width:84%;
height:25px;
line-height:25px;
margin-left:8%;
font-size:12px;
text-decoration:none;
color:#333;} #tab {
float:left;
margin:0px;
width:600px;
height:260px;
position:relative;
background:green;
}#tab h3{
float:left;
width:120px;
height:26px;

line-height:26px;
margin:0 -1px 0 0 ;
font-size:12px;
cursor:pointer;
text-align:center;
color:#ff00ff;
background:#aacc33;
}

#tab div {
display:none;
}

#tab .block { display:block;
}#tab .up { background:blue;
}
#tab div {
float:left;
top:26px;
left:0px;
width:600px;
height:230px;
border:solid #eee;
border-width:0 1px 1px;
background:#0f0f0f;
}#tab ul{
float:left;
margin:15px 0 0;
list-style:decimal;
padding:0;
clear:right;
}

#tab li {
float:left;
width:50%;
background:#123456;
}
#tab li a{
display:block;
width:90%;
height:25px;
line-height:25px;
margin-left:8%;
font-size:12px;
text-decoration:none;
color:#ffffff;
}#tab li a:hover {
text-decoration:underline;
color:red;}

//--
/style
/head
body
div id="container"
div id="header"
div id="logo"
/div div id="banner"
/div
/div div id="menu"
ul
li a href="#" 網站首頁 /a /li
li /li
li a href="#" 關于我們 /a /li
li /li
li a href="#" 網站首頁 /a /li
li /li
li a href="#" 關于我們 /a /li
li /li
li a href="#" 網站首頁 /a /li
li /li
li a href="#" 關于我們 /a /li
li /li
/ul
/div
div
nav
/div

div
div
div
h3 第一個欄目 /h3
/div div
ul
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li

/ul
/div /div
div
div
h3 第一個欄目 /h3
/div div
ul
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li

/ul
/div /div div nav_left /div div
div
h3 第一個欄目 /h3
/div div
ul
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li

/ul
/div /div
div
div
h3 第一個欄目 /h3
/div div
ul
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li

/ul
/div /div
/div
div /div
div nav /div
div
div /div div /div div /div

div /div /div div
div /div
div /div div nav_left /div div id="tab"
h3 選擇一 /h3
h3 選擇二 /h3
h3 選擇三 /h3
h3 選擇四 /h3
h3 選擇五 /h3 div
ul
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
li a href="#" 我是中國人 /a /li
/ul
/div

div
ul
li a href="#" 222222222222 /a /li
li a href="#" 22222222222 /a /li
li a href="#" 222222222222 /a /li
li a href="#" 22222222222 /a /li
li a href="#" 222222222222 /a /li
li a href="#" 22222222222 /a /li
li a href="#" 222222222222 /a /li
li a href="#" 22222222222 /a /li
li a href="#" 222222222222 /a /li
li a href="#" 22222222222 /a /li /ul
/div
div
ul
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li
li a href="#" 3333333333 /a /li /ul
/div

div
ul
li a href="#" 444444444444 /a /li
li a href="#" 4444444444 /a /li
li a href="#" 444444444444 /a /li
li a href="#" 4444444444 /a /li
li a href="#" 444444444444 /a /li
li a href="#" 4444444444 /a /li
li a href="#" 444444444444 /a /li

/ul
/div

div
ul
li a href="#" 555555555 /a /li
li a href="#" 555555555 /a /li
li a href="#" 555555555 /a /li
li a href="#" 555555555 /a /li
li a href="#" 555555555 /a /li
li a href="#" 555555555 /a /li

/ul
/div
/div
/div
div /div
div nav
/div div id="footer"
aaaaaaaaaaa /div
/div script
!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");function go_to(ao)
{
for(var i=0; i h.length; i++)
{
if(ao-1==i)
{
d[i].className+=" block";
h[i].className+=" up";
}else
{
h[i].className=" ";
d[i].className=" ";
}
}
}

//--
/script
/body /htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS樣式表詳解

下一篇：HTML與CSS中背景相關屬性