/*這是一個簡單的由div+Css佈局而成的頁面，頁面整體用id選擇器體分四部分，即header ，nav，content 和tooter，其中header又用div分成了logo，banner和tool三部分，在banner裏面放了一個可移動的文字<marquee>標籤，而content用class選擇器分爲main和barside兩部分，main用同樣的方法分爲left，right兩部分。nav是導航部分，由無序列表ul組成，content中又由left，left1，left2組成，右同，然而left用class分成tit和con兩部分,con內容部分有無序列表和超鏈接<a>標籤製成，右同。left1和left2裏製作了一個簡單<form>表單和<table>表格，barside由複選框<checkbox>單選框<radio>下拉列表<select>以及文本域<textarea>和文件上傳控件組成。而這些div塊均有css修飾。*/
<!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-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="Untitled-2.css" />
<link rel="stylesheet" type="text/css" href="Untitled-3.css" />
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<div class="banner">
<marquee direction="right">歡迎來到我的網頁天地!!!</marquee>
</div>
<div class="tool"></div>
<div class="t"></div>
<div id="nav">
<ul>
<li><a href="#">我的論壇</a></li>
<li class="nt"> </li>
<li><a href="#">我的論壇</a></li>
<li class="nt"> </li>
<li><a href="#">我的論壇</a></li>
<li class="nt"> </li>
<li><a href="#">我的論壇</a></li>
<li class="nt"> </li>
<li><a href="#">我的論壇</a></li>
<li class="nt"> </li>
<li><a href="#">我的論壇</a></li>
</ul>
</div>
</div>
<div class="t"></div>
<div id="content">
<div class="main">
<div class="left">
<div class="tit">
<h3>推薦文章</h3>
</div>
<div class="con cw_1 cli">
<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 class="right">
<div class="tit1">
<h3 >最近文章</h3>
</div>
<div class="con1 cw_2">
<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>
</ul>
</div>
</div>
<div class="t"> </div>
<div class="left1">
<table width="100%" height="100" border="0px">
<tr><td>用戶名</td><td><input type="text" name="username" /></td></tr>
<tr><td>密 碼</td><td><input type="password" name="password" /></td></tr>
<tr><td colspan="2"><input type="submit" value="登錄" /> <input type="reset" value="重新填寫" /></td></tr>
<tr><td colspan="2">
<a href="#">找回密碼</a>
<a href="#">註冊用戶</a>
</table>
</div>
<div class="right1">
</div>
<div class="t"> </div>
<div class="left2">
<table border="3" bordercolor="#000" sellpadding cellspacing="0px" cellpadding="0px" width="400px" height="200" align="center" background="圖片素材/2.jpg">
<tr>
<th colspan="3" align="center" bordercolor="#000">運動項目</th>
</tr>
<tr>
<td rowspan="2" bordercolor="#FF00FF">項目</td>
<td>100米跑</td>
<td>足球</td>
</tr>
<tr>
<td>排球</td>
<td>籃球</td>
</tr>
<tr>
<td rowspan="2">球類</td>
<td>羽毛球</td>
<td>乒乓球</td>
</tr>
<tr>
<td >網球</td>
<td>跳高</td>
</tr>
</table>
</div>
<div class="right2"> </div>
</div>
<div class="barside">
<form action="OK.html" method="get">
你最喜歡的城市：
<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="shanghai" />上海
<input type="checkbox" name="city" value="shenzhen" />深圳</br>
你的性別是：
<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女</br>
下拉列表：</br>
你的出生地是：
<select name="address">
<option value="qingdao">青島</option>
<option value="chengdou">成都</option>
<option value="dalian">大連</option>
</select></br>
<!---文本域--->
<textarea name="mytextarea" cols="25" rows="10"></textarea></br></br>
<input type="file" name="myfile" />上傳文件</br><br/>
隱藏域的使用：
<input type="hidden" name="date" value="OK" />
<input type="submit" value="測試" />
</form>
</div>
</div>
<div class="t"></div>
<div id="ad"></div>
<div class="t" ></div>
<div id="footer">
************ 版權所有 ©************
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
text-align:center;
margin-left:150px;
font-size:12px;
}
.t{
float:left;
width:100%;
height:10px;
overflow:hidden;
}
#container{
width:1000px;
margin:auto 0;
text-align:left;
}
#header{ //header部分
float:left;
width:100%;
}
.logo{
float:left;
width:180px;
height:100px;
background:#F00;
}
.banner{
float:left;
margin-left:10px;
width:600px;
height:100px;;
background:#6CC
}
.banner marquee{ //會移動的文字
font-size:24px;
color:#006;
margin-top:35px;}
.tool{
float:right;
width:200px;
height:100px;
background:#03F;
}
#nav{ //導航
float:left;
width:100%;
height:30px;
background:#CCC;
}
#content{ //內容部分
float:left;
width:100%;
height:640px;
}
.main{
float:left;
width:650px;
}
.left{
width:430px;
float:left;
height:207px;
}
.left1{
background-color:#3C3;
width:430px;
float:left;
height:207px;
}
.left1 table{ //表格
color:#006;
margin:20px;}
.left2{
background-color:#C3F;
width:430px;
float:left;
height:207px;
}
.tit{
width:430px;;
height:30px;
background:#CCC;
}
h3{ //標題設置
font-size:14px;
width:100%;
color:#006;
margin:0px;
padding:0px;
text-align:center;
line-height:26px;
}
.con{
width:430px;;
height:177px;
border:1px solid #CCC;
}
.con ul{
margin:5px 5px;
}
ul li a{
padding:15px;
}
.left .cli li{
float:left;}
.cw_1{
width:428px !important;
width:430px;
}
.right{
width:200px;
height:207px;
float:right;
}
.right1{
width:200px;
height:207px;
float:right;
background:#F0F;
}
.right2{
width:200px;
height:207px;
float:right;
background:#FC3;
}
.tit1{
width:200px;;
height:30px;
background:#CCC;
}
.con1{
width:200px;;
height:177px;
border:1px solid #CCC;
}
.cw_2{
width:198px !important;
width:207px;
}
.barside{
float:right;
width:340px;
height:100%;
background:#F66;
}
.barside form{ //form表單設置
margin:30px;
font-size:12px;
color:#006;
}
#ad{
float:left;
width:100%;
height:100px;
background:#93C;
}
#footer{ //腳本
float:left;
width:100%;
height:30px;
background:#C3C;
text-align:center;
border-bottom-left-radius:20px 15px;
border-bottom-right-radius:20px 15px;
border:#90C solid 2px;
}
@charset "utf-8";
/* CSS Document */
//導航中的無序列表設置
ul{
float:left;
margin:0px;
padding:0PX;
list-style:none;
}
a{ //a標籤
font-size:12px;
text-decoration:none;
}
#nav li{
float:left;
width:150px;
height:30px;
text-align:center;
line-height:30px;
}
#nav .nt{
width:1px;
height:14px;
background:#000;
margin-top:8px;
}