资源描述
<html>
<head>
<title>常用于布局的块级标签</title>
</head>
<body>
<h1>商品信息</h1>
<h2>产品类别</h2>
<hr/>
<ul>
<li>数码</li>
<ul>
<li>笔记本</li>
<li>手机</li>
<li>家电</li>
</ul>
<li>美容</li>
<li>服装</li>
</ul>
<hr/>
联想电脑
<dl>
<dd>商品型号:联想IdeaPad Y450A-TFU(NBA纪念版)</dd>
<dd>价格:4999元</dd>
<dd>所在地:北京</dd>
</dl>
<hr/>
<h2>购物流程</h2>
<ol>
<li>确认购买信息</li>
<li>付款到贵美</li>
<li>确认收货</li>
<li>付款给商家</li>
<li>双方评价</li>
</ol>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>img和span标签练习</title>
</head>
<body>
<h1>促销信息</h1>
<dl>
<dt><img src="computer.jpg" alt="Acer上网本,特惠拍卖"title="Acer上网本,特惠拍卖"/><dt>
<dd>拍卖Acer上网本</dd>
<dd>奔腾双核,1G内存,200G硬盘</dd>
<dd>跳楼疯抢价<span style="color:red;font-size:70px;">1</span>元起</dd>
</body>
</html>
<html>
<head>
<title>唐诗三百首</title>
</head>
<body>
<h1>唐诗三百首</h1>
<hr/>
<h2>目录</h2>
<p>第一首:静夜思</p>
<p>第二首:忆江南</p>
<p>第三首:长恨歌</p>
<hr/>
<h3>静夜思</h3>
<p>作者:李白</p>
<p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
<hr/>
<h3>【李白简介】</h3>
<p>李白,字太白</p>
</body>
</html>
<html>
<head>
<title>贵美商城</title>
</head>
<body>
<div style="text-align: left"><img src="logo.jpg"/></div><div style="text-align: right"><a href="denglu.html">登录</a>|关于贵美|贵美助理|<a href="mailto:guimeiWebMater@">联系我们</a></div>
<hr/>
<div style="text-align: left">手机 - 诺基亚 - <a href="#moto">MOTO</a> - 索爱</div>
<h1>导购资讯</h1>
<div style="text-align: left">
<p>
参观电玩达人的宝贝仓库<br/>
炎炎夏日,冰凉家具两折起<br/>
周末折扣,品牌三折热卖<br/>
</p>
</div>
<hr/>
<h4>网游专区</h4>
<ol>
<li>QQ幻想100点卡只需¥8.8元</li>
<li>热血江湖250点只需¥8.8元</li>
<li>问道30元卡只需¥25.0元</li>
<li>跑跑点卡200点只需¥16.8元</li>
</ol>
<h4>数码产品</h4>
<ul>
<li>最酷音乐手机导购</li>
<li>最强街机6300仅售1450</li>
<li>99元热销学生Mp3推荐</li>
<li>漫步者音箱76元搞定</li>
</ul>
<hr/>
<h4><a name="moto">MOTO E2 音乐手机</a></h4>
<dl>
<dd>130W像素摄像头 Linux智能系统</dd>
<dd>Intel XScale 处理器</dd>
<dd>A2DP蓝牙立体声 市场价:1690</dd>
<dd>开学价:1045</dd>
</dl>
<hr/>
版权信息: Copyright © 1998 - 2007 GuiMei Shopping Inc.All Rights Reserved
</body>
</html>
<html>
<head>
<title>
网站登录
</title>
</head>
<body>
<h2>贵美网站会员登录</h2>
<form action="login.jsp"method="post">
<p>贵美网站邮箱:<input name="guimeimail" type="text" size="30" maxlength="30" /></p>
<p> 输 入 密 码:<input name="mima" type="text" size="30" maxlength="30" /></p>
<p>再次输入密码:<input name="mima2" type="text" size="30" maxlength="30" /></p>
<p>
<input name="type" type="radio" value="豪华版" checked="checked">豪华版
<input name="type" type="radio" value="简洁版" >简洁版
</p>
<p>
<input type="checkbox" name="hobby1"/>自动登录
<input type="checkbox" name="hobby2"/>安全登录
</p>
<p>
<input type="reset" name="reset" value="重置"/>
<input type="submit" name="reset" value="登录"/>
</p>
<p>
<input name="tupian" type="image" src="reg.gif"/>
</p>
<hr/>
<a href="guimei.html">返回首页</a>
</form>
</body>
</html>
<html>
<head>
<title>表单小结</title>
<script language="javascript">
function agree()
{
if(document.getElementById('cb').checked)
document.getElementById('tj').disabled=false;
else
document.getElementById('tj').disabled='disabled';
}
</script>
</head>
<body>
<h3>申请表</h3>
<form action="login.jsp"method="post">
姓名:<input name="name" type="text" size="30" maxlength="30" /><br/>
密码:<input name="mima" type="text" size="30" maxlength="30" /><br/>
照片:<input name="file" type="file"/><br/>
感兴趣的职位:
<input name="type" type="radio" value="Web设计" checked="checked"/>Web设计
<input name="type" type="radio" value="Web开发"/>Web开发<br/>
向往城市:
<select name="city">
<option value="" selected="selected">[请选择]</option>
<option value="0">包头</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select><br/>
协议:<br/>
<textarea name="textarea" cols="40" rows="6" readonly="readonly">
求职信息必须真实、准确,本网站只负责向企业推荐。
</textarea><br/>
<input type="checkbox" name="hobby" onclick="agree();" id="cb"/>我认真阅读并接受以上协议。<br/>
经验:
<select name="jingy">
<option value="0" selected="selected">无经验</option>
<option value="1">有经验</option>
<select/><br/>
<input name="btn" type="submit" value="提交" disabled="disabled" id="tj"/>
<input type="reset" name="reset" value="重置"/>
</form>
</body>
</html>
<html>
<head>
<title>贵美商城</title>
<style type="text/css">
.one
{
width:200px;
background:url(images/bg.gif) no-repeat;
}
li
{
width:47px;
font:12px ;
list-style:none;
float:left;
line-height:30px;
}
.title
{
font: 14px 宋体;
letter-spacing:5px;
white-space:nowrap;
text-decoration:underline;
}
.orange
{
width:80px;
line-height:12px;
font:bold 14px;
color:#ff7300;
float:none;
}
.txt
{
line-height:18px;
list-style:none;
float:none;
}
</style>
</head>
<body>
<div class="title">您好,欢迎访问贵美商城</div>
<br/>
<div class="one">
<ul >
<li class="txt"></li>
</ul>
<ul>
<li class="orange">家用电器</li>
<li>大家电</li>
<li>洗衣机</li>
<li>电冰箱</li>
<li>相机</li>
<li>电视</li>
<li>DVD</li>
<li>相机</li>
<li>电视</li>
<li>DVD</li>
</ul>
<ul>
</ul>
<ul>
<li class="orange">日用百货</li>
<li>肥皂</li>
<li>洗衣粉</li>
<li>纸巾</li>
<li>洗发水</li>
<li>洗洁精</li>
<li>毛巾</li>
<li>相机</li>
<li>电视</li>
<li>DVD</li>
<li></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>贵美商城主导航条</title>
<style type="text/css">
.menu
{
text-align:center;
background:url(images/h_bg.jpg) no-repeat;
background-position:20px -92px;
height:100%;
}
</style>
<link rel="stylesheet" href="css/css.css" type="text/css"/>
</head>
<body>
<div class="menu">
<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>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>贵美顶部菜单</title>
<style type="text/css">
div
{
margin:20px;
}
.pic
{
margin-right:5px;
text-align:center;
float:right;
font:14px;
height:26px;
line-height:26px;
}
a
{
color:black;
text-decoration:none;
}
.pic1{width:28px;height:26px;background:url(images/icon.gif) no-repeat -5px -0px;}
.pic2{width:22px;height:26px;background:url(images/icon.gif) no-repeat -32px -0px;}
.pic3{width:28px;height:26px;background:url(images/icon.gif) no-repeat -84px -0px;}
.pic4{width:28px;height:26px;background:url(images/icon.gif) no-repeat -110px -0px;}
.pic5{width:45px;height:24px;background:url(images/icon.gif) no-repeat -2px -28px;}
</style>
</head>
<body>
<div>
<ul>
<li class="pic pic5"><a href="#">注册</a></li>
<li class="pic pic5"><a href="#">登陆</a></li>
<li class="pic"><a href="#">设为首页</a></li>
<li class="pic pic4"> </li>
<li class="pic"><a href="#">加入收藏</a></li>
<li class="pic pic3"> </li>
<li class="pic"><a href="#">帮助中心</a></li>
<li class="pic pic2"> </li>
<li class="pic"><a href="#">购物车</a></li>
<li class="pic pic1"> </li>
</ul>
</div>
</body>
</html>
展开阅读全文