HTML+Div+Css 入门练习
/*这是一个简单的由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;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
