一下为css样式表的练习
一、实现DIV+CSS布局
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 980px;
height: 636px;
background-color: gainsboro;
margin: 0px auto;
}
#header{
width: 100%;
height: 136px;
font-weight: bold;
}
#main{
width: 100%;
height: 400px;
background-color: hotpink;
color: white;
font-weight: bold;
}
#footer{
width: 100%;
height: 100px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div id="header">
顶部（header）
</div>
<div id="main">
主体
</div>
<div id="footer">
底部（footer）
</div>
</div>
</body>
</html>
效果截图：
二、注册页
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.textBoder{
border-style: solid;
border-width: 1px;
}
div{
margin: 0px auto;
height: 50px;
width:150px;
}
h2{
padding-left: 60px;
}
</style>
</head>
<body>
<div>
<h2>注册表</h2>
<form>
<table>
<tr>
<td>
姓名：<input type="text" name="username" class="textBoder"/>
</td>
</tr>
<tr>
<td>
密码：<input type="passw" name="passw" class="textBoder"/>
</td>
</tr>
<tr>
<td>
性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>
照片：<input type="file" name="files"/>
</td>
</tr>
<tr>
<td>
爱好：<input type="checkbox" checked="checked"/>书<input type="checkbox" />运动<input type="checkbox" />聊天
</td>
</tr>
<tr>
<td>
所在城市：
<select name="city" size="1">
<option value="0" selected="selected">--选择城市--</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
<option value="5">河北</option>
<option value="6">河南</option>
<option value="7">云南</option>
<option value="8">辽宁</option>
<option value="9">黑龙江</option>
<option value="10">湖南</option>
<option value="11">安徽</option>
<option value="11">山东</option>
<option value="12">新疆</option>
<option value="13">江苏</option>
<option value="14">浙江</option>
<option value="15">江西</option>
<option value="16">湖北</option>
<option value="17">广西</option>
<option value="18">甘肃</option>
<option value="19">山西</option>
<option value="20">内蒙</option>
<option value="21">陕西</option>
<option value="22">吉林</option>
<option value="23">福建</option>
<option value="24">贵州</option>
<option value="25">广东</option>
<option value="26">青海</option>
<option value="27">西藏</option>
<option value="28">四川</option>
<option value="29">宁夏</option>
<option value="30">海南</option>
<option value="31">台湾</option>
<option value="32">香港</option>
<option value="33">澳门</option>
</select>
</td>
</tr>
<tr>
<td>
协议：
</td>
</tr>
<tr>
<td>
<textarea rows="5" cols="30" readonly="readonly">
请遵守相关规定，互相尊重，营造良好氛围。
</textarea>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />我认真阅读并接受以上协议。
</td>
</tr>
<tr>
<td>
<input type="button" value=" 提交 " disabled="disabled"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
效果截图：
三、实现中间布局
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 980px;
height: 636px;
background-color: gainsboro;
margin: 0px auto;
}
#header{
width: 100%;
height: 136px;
font-weight: bold;
}
#main{
width: 100%;
height: 400px;
background-color: hotpink;
color: white;
font-weight: bold;
}
#footer{
width: 100%;
height: 100px;
font-weight: bold;
}
#left{
width:50%;
height: 100%;
font-weight: bold;
color: white;
background-color: deepskyblue;
float: left;
}
#right{
width:50%;
height: 100%;
font-weight: bold;
color: white;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div>
<div id="header">
顶部（header）
</div>
<div id="main">
<div id="left">
登陆（login）
</div>
<div id="right">
登陆说明(login right)
</div>
</div>
<div id="footer">
底部（footer）
</div>
</div>
</body>
</html>
效果截图：
四、header部分布局
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
background-image: url(img/h_bg.jpg);
width: 1000px;
height: 130px;
background-repeat: no-repeat;
}
li{
list-style: none;
float: left;
font-size: 14px;
}
#headermenu{
padding-top: 1px;
padding-left: 500px;
width: 500px;
height: 39px;
color: black;
float:right;
}
#onemenu{
width: 100%px;
height: 55px;
color: black;
line-height: 55px;
clear: both;
}
#wellcomemenu{
padding-top: 14px;
padding-left: 350px;
width: 580px;
height: 33px;
color: black;
float:right;
}
.c1{
padding:0px;
margin: 0px;
width: 50px;
height: 40px;
list-style: none;
line-height: 40px;
float: left;
}
.foot{
font-weight: bold;
padding-left:5px;
text-align: center;
}
.foot1{
font-weight: bold;
padding-left:35px;
text-align: center;
}
.foot2{
font-weight: bold;
padding-left:30px;
text-align: center;
}
.car{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 28px;
height: 20px;
}
.help{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -40px 0px;
width: 28px;
height: 25px;
}
.help1{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -80px 0px;
width: 28px;
height: 25px;
}
.help2{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -125px 0px;
width: 28px;
height: 25px;
}
.login{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px -26px;
width: 50px;
height: 25px;
padding-left: 7px;
}
</style>
</head>
<body>
<div id="container">
<div id="headermenu">
<ul>
<li class="car"> </li>
<li>购物车</li>
<li class="help"> </li>
<li>帮助中心</li>
<li class="help1"></li>
<li>加入收藏</li>
<li class="help2"></li>
<li>设为首页</li>
<li> </li>
<li class="login">登陆</li>
<li class="login">注册</li>
</ul>
</div>
<div id="wellcomemenu">
你好，欢迎访问贵美商城！2009年9月30日17点15分
</div>
<div id="onemenu">
<ul>
<li class="foot">首 页</li>
<li class="foot1">家用电器</li>
<li class="foot1">手机数码</li>
<li class="foot2">日用百货</li>
<li class="foot2">书 籍</li>
<li class="foot2">帮助中心</li>
<li class="foot2">免费开店</li>
<li class="foot2">全球咨询</li>
</ul>
</div>
</div>
</body>
</html>
效果截图：
五、超链接伪类实现导航条
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
background-image: url(img/h_bg.jpg);
width: 1000px;
height: 130px;
background-repeat: no-repeat;
}
li{
list-style: none;
float: left;
font-size: 14px;
}
#headermenu{
padding-top: 1px;
padding-left: 500px;
width: 500px;
height: 39px;
color: black;
float:right;
}
#onemenu{
width: 100%px;
height: 55px;
color: black;
line-height: 55px;
clear: both;
}
#wellcomemenu{
padding-top: 14px;
padding-left: 350px;
width: 580px;
height: 33px;
color: black;
float:right;
}
.c1{
padding:0px;
margin: 0px;
width: 50px;
height: 40px;
list-style: none;
line-height: 40px;
float: left;
}
.foot{
font-weight: bold;
padding-left:5px;
text-align: center;
}
.foot1{
font-weight: bold;
padding-left:35px;
text-align: center;
}
.foot2{
font-weight: bold;
padding-left:30px;
text-align: center;
}
.car{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 28px;
height: 20px;
}
.help{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -40px 0px;
width: 28px;
height: 25px;
}
.help1{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -80px 0px;
width: 28px;
height: 25px;
}
.help2{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -125px 0px;
width: 28px;
height: 25px;
}
.login{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px -26px;
width: 50px;
height: 25px;
padding-left: 7px;
}
a{
text-decoration: none;
}
a:link{
color: #999;
}
a:hover{
color: coral;
font-size: 20px;
}
a:active{
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<div id="container">
<div id="headermenu">
<ul>
<li class="car"> </li>
<li>购物车</li>
<li class="help"> </li>
<li>帮助中心</li>
<li class="help1"></li>
<li>加入收藏</li>
<li class="help2"></li>
<li>设为首页</li>
<li> </li>
<li class="login">登陆</li>
<li class="login">注册</li>
</ul>
</div>
<div id="wellcomemenu">
你好，欢迎访问贵美商城！2009年9月30日17点15分
</div>
<div id="onemenu">
<ul>
<li class="foot"><a href=" ">首 页</a></li>
<li class="foot1"><a href=" ">家用电器</a></li>
<li class="foot1"><a href=" ">手机数码</a></li>
<li class="foot2"><a href=" ">日用百货</a></li>
<li class="foot2"><a href=" ">书 籍</a></li>
<li class="foot2"><a href=" ">帮助中心</a></li>
<li class="foot2"><a href=" ">免费开店</a></li>
<li class="foot2"><a href=" ">全球咨询</a></li>
</ul>
</div>
</div>
</body>
</html>
效果截图：
六、贵美商城导航菜单
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li{
list-style: none;
float: left;
font-size: 15px;
}
.car{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 28px;
height: 20px;
}
.help{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -40px 0px;
width: 28px;
height: 25px;
}
.help1{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -80px 0px;
width: 28px;
height: 25px;
}
.help2{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -125px 0px;
width: 28px;
height: 25px;
}
.login{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px -26px;
width: 50px;
height: 25px;
padding-left: 7px;
}
</style>
</head>
<body>
<div>
<form>
<table>
<tr>
<ul>
<li class="car"> </li>
<li>购物车</li>
<li class="help"> </li>
<li>帮助中心</li>
<li class="help1"></li>
<li>加入收藏</li>
<li class="help2"></li>
<li>设为首页</li>
<li> </li>
<li class="login">登陆</li>
<li class="login">注册</li>
</ul>
</tr>
</table>
</form>
</div>
</body>
</html>
效果截图：
七、实现对联广告布局
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
dl{
margin: 0px;
padding: 0px;
}
dt{
margin: 0px;
padding: 0px;
float: left;
height: 60px;
}
dd{
margin: 0px;
padding: 0px;
float: left;
height: 60px;
line-height: 40px;
font-size: 15px;
}
#d4{
width: 252px;
height: 272px;
background-image: url(img/bg.gif);
background-repeat: no-repeat;
padding-top: 32px;
}
</style>
</head>
<body>
<div id="d4">
<dl>
<dt><img src="img/show1.jpg"</dt>
<dd>大牌狂降价，三折直送</dd>
</dl>
<dl>
<dt><img src="img/show2.jpg"</dt>
<dd>大牌狂降价，三折直送</dd>
</dl>
<dl>
<dt><img src="img/show5.jpg"</dt>
<dd>大牌狂降价，三折直送</dd>
</dl>
<dl>
<dt><img src="img/show4.jpg"</dt>
<dd>大牌狂降价，三折直送</dd>
</dl>
</div>
</body>
</html>
效果截图：
关于css样式表的练习，如有错误请大家指正。
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
