<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>品优购首页</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎你！ </li>
<li>
<a href="#">请登录</a>
<a href="register.html"> 免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<div class="niv">
<a href="#">我的订单</a>
<a href="#">我的品优购</a>
<a href="#">品优购会员</a>
<a href="#">客户服务</a>
<a href="#">网站导航</a>
</div>
</div>
</div>
</section>
<header class="header w">
<!-- logo制作 -->
<div class="logo">
<h1>
<img src="img/logo.jpg" alt="品优购商城" width="171" height="61">
</h1>
</div>
</header>
<div class="search">
<input type="search" name="" id="" placeholder="秋裤">
<button>搜索</button>
</div>
<div class="hotwords">
<a href="#">优惠购首发</a>
<a href="#">亿元优惠</a>
<a href="#">9.9元团购</a>
<a href="#">美满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<!-- nav模块制作 start -->
<nav class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="list.html">手机</a> <a href="#">数码</a> <a href="#">通信</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家具</a> <a href="#">厨具</a></li>
<li> <a href="#">男装</a> <a href="#">女装</a> <a href="#">童装</a> <a href="#">内衣</a></li>
<li><a href="#">化妆品</a> <a href="#">清洁用品</a> <a href="#">宠物</a></li>
<li><a href="#">鞋靴</a> <a href="#">箱包</a> <a href="#">珠宝</a> <a href="#">奢侈品</a></li>
<li><a href="#">运动户外</a> <a href="#">钟表</a></li>
<li><a href="#">汽车</a> <a href="#">汽车用品</a></li>
<li><a href="#">母婴</a> <a href="#">玩具乐器</a></li>
<li> <a href="#">食品</a> <a href="#">酒类</a> <a href="#">生鲜</a> <a href="#">特产</a></li>
<li><a href="#">医药保健</a></li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">电子书</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">商务</a></li>
<li><a href="#">理财</a> <a href="#">众筹</a> <a href="#">白条</a> <a href="#">保险</a></li>
</ul>
</div>
</div>
<div class="navitems">
<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>
</ul>
</div>
</div>
</nav>
<div class="w">
<div class="main">
<div class="focus">
<ul>
<li>
<img src="img/焦点图.jpg" alt="焦点图" width="721" height="455">
</li>
</ul>
</div>
<div class="newsflesh">
<div class="news">
<div class="news-hd">
<h5>品优购快报</h5>
<a href="#" class="more">更多</a>
</div>
<div class="news-bd">
<ul>
<li><a href="#"><strong>[特惠]</strong>备战开学季 全民半价数码</a></li>
<li><a href="#"><strong>[公告]</strong>品优稳占家电网购六成份额</a></li>
<li><a href="#"><strong>[特惠]</strong>百元中秋全品类礼劵限量领</a></li>
<li><a href="#"><strong>[公告]</strong>上品优生鲜 享澄阳湖大闸蟹</a></li>
<li><a href="#"><strong>[特惠]</strong>每日享折扣品优品质游</a></li>
</ul>
</div>
</div>
<div class="lifeservice">
<ul>
<li>
<i><img src="img/话费.jpg" alt="话费" width="24" height="28"></i>
<a href="#">话费</a>
</li>
<li>
<i><img src="img/机票.jpg" alt="机票" width="24" height="28"></i>
<a href="#">机票</a>
</li>
<li>
<i><img src="img/电影票.jpg" alt="电影票" width="24" height="28"></i>
<a href="#">电影票</a>
</li>
<li>
<i><img src="img/游戏.jpg" alt="游戏" width="24" height="28"></i>
<a href="#">游戏</a>
</li>
<li>
<i><img src="img/彩票.jpg" alt="彩票" width="24" height="28"></i>
<a href="#">彩票</a>
</li>
<li>
<i><img src="img/加油卡.jpg" alt="加油卡" width="24" height="28"></i>
<a href="#">加油卡</a>
</li>
<li>
<i><img src="img/酒店.jpg" alt="酒店" width="24" height="28"></i>
<a href="#">酒店</a>
</li>
<li>
<i><img src="img/火车票.jpg" alt="火车票" width="24" height="28"></i>
<a href="#">火车票</a>
</li>
<li>
<i><img src="img/理财.jpg" alt="理财" width="24" height="28"></i>
<a href="#">理财</a>
</li>
</ul>
</div>
<div class="bargain">
<img src="img/宋仲基广告.jpg" alt="广告" width="250" height="76">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5>
<img src="img/正品保障.jpg" alt="正品保障" width="50" height="50">
</h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5>
<img src="img/极速物流.jpg" alt="极速物流" width="50" height="50">
</h5>
<div class="service_txt">
<h4>极速物流</h4>
<p>极速物流，极速送达</p>
</div>
</li>
<li>
<h5>
<img src="img/无忧售后.jpg" alt="无忧售后" width="50" height="50">
</h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>七天无理由退货</p>
</div>
</li>
<li>
<h5>
<img src="img/特色服务.jpg" alt="特色服务" width="50" height="50">
</h5>
<div class="service_txt">
<h4>特殊服务</h4>
<p>私人订制家电套餐</p>
</div>
</li>
</ul>
</div>
</div>
<div class="w">
<div class="mod_help">
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">211限时达</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd><a href="#">货到付款</a></dd>
<dd><a href="#">在线支付</a></dd>
<dd><a href="#">分期付款</a></dd>
<dd><a href="#">邮局汇款</a></dd>
<dd><a href="#">公司转账</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">价格保护</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">退换货</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a>| <a href="#">联系我们</a>| <a href="#">联系客服</a>| <a href="#">商家入驻</a>
| <a href="#">营销中心</a>| <a href="#">手机品优购</a>| <a href="#">友情链接</a>| <a href="#">销售联盟</a>
| <a href="#">品优购社区</a>| <a href="#">品优购公益</a>| <a href="#">English Site</a>| <a href="#">ContactU</a>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100邮箱:zhanghj+itcast.cn<br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人注册</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<div class="w">
<div class="header">
<div class="logo">
<img src="img/logo.jpg" alt="品优购商城" width="171" height="61">
</div>
</div>
<div class="registerarea">
<h3>
注册新用户
<div class="login">我有账号，去<a href="#">登陆</a></div>
</h3>
<div class="reg_form">
<form action="表单域">
<ul>
<li><label for="">手机号：</label><input type="text" class="inp"><span class="error">
<i class="error_icon"><img src="img/错误.jpg" alt="错误" width="15" height="15"></i>手机号格式不正确，请重新输入</span></li>
<li><label for="">短信验证码：</label><input type="text" class="inp"><span class="success">
<i class="success_icon"><img src="img/正确.jpg" alt="正确" width="12" height="12"></i>短信验证码输入正确</span></li>
<li><label for="">登录密码：</label><input type="password" class="inp"><span class="error">
<i class="error_icon"><img src="img/错误.jpg" alt="错误" width="15" height="15"></i>密码格式不正确，请重新输入</span></li>
<li class="safe">安全程度 <em class="gao">高</em><em class="zhong">中</em><em class="di">低</em></li>
<li><label for="">确认密码：</label><input type="password" class="inp"><span class="error">
<i class="error_icon"><img src="img/错误.jpg" alt="错误" width="15" height="15"></i>密码格式不正确，请重新输入</span></li>
<li class="agree"><input type="checkbox"> 同意协议并注册
<a href="#">《知晓用户协议》</a></li>
<li>
<input type="submit" value="提交注册" class="btn">
</li>
</ul>
</form>
</div>
</div>
<footer>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a>| <a href="#">联系我们</a>| <a href="#">联系客服</a>| <a href="#">商家入驻</a>
| <a href="#">营销中心</a>| <a href="#">手机品优购</a>| <a href="#">友情链接</a>| <a href="#">销售联盟</a>
| <a href="#">品优购社区</a>| <a href="#">品优购公益</a>| <a href="#">English Site</a>| <a href="#">ContactU</a>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100邮箱:zhanghj+itcast.cn<br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</div>
</body>
</html>
导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
<style>
.a1{
width: 800px;
height: 40px;
background-color: rgb(106, 136, 162);
border-top-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
p{
width: 50px;
height: 30px;
display: inline-block;
color: aliceblue;
margin-left: 30px;
position: relative;
bottom: 15px;
padding-top: 5px;
padding-left: 1px;
}
p:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="a1">
<p>游戏1</p>
<p>游戏2</p>
<p>游戏3</p>
<p>游戏4</p>
<p>游戏5</p>
<p>游戏6</p>
<p>游戏7</p>
<p>游戏8</p>
<p>游戏9</p>
</div>
</body>
</html>运行截图
扫一扫
6590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
