提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
入门前端 初学HTML和CSS基础，通过psd文件完成品优购静态网站，新手还需要不断练习网页布局，努力学习加深记忆！
一、html
1.首页index
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品优购商城-正品低价、品质保障、配送及时、轻松购物</title>
<meta name="description" content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<!-- logo SEO优化 1.放一个h1 2.h1里放一个链接，logo背景图片给链接 3.文字不显示，text-indent overflowhidden/ font-size0 4.title -->
<body>
<!-- 快捷导航 start-->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您! </li>
<li><a href="#">请登录 </a></li>
<li><a href="register.html" class="style_red" target="_blank">免费注册</a></li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arrow_icon">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow_icon">关注品优购</li>
<li></li>
<li class="arrow_icon">客户服务</li>
<li></li>
<li class="arrow_icon">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 快捷导航 end-->
<!-- header头部制作 start -->
<header class="header w">
<!-- logo部分 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城" target="_blank">品优购商城</a>
</h1>
</div>
<!-- 搜索框部分 -->
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>
<!-- 热词部分 -->
<div class="hotwords">
<a href="#" class="style_red">优惠购首发</a>
<a href="#">亿元优惠</a>
<a href="#">9.9元团购</a>
<a href="#">美满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<!-- 购物车部分 -->
<div class="shopcar">
我的购物车
<!-- 统计部分 -->
<i class="count">8</i>
</div>
</header>
<!-- header头部制作 end -->
<!-- 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" target="_blank">手机</a>、<a href="#">数码</a></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>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a></li>
<li><a href="#">个户化妆</a>、<a href="#">清洁用品</a></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>、<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>
</ul>
</div>
</div>
</nav>
<!-- nav导航 end -->
<!-- main start -->
<div class="w">
<div class="main">
<div class="forcus">
<ul>
<li><img src="upload/foucs.png" alt=""></li>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<ul class="forcus-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
</div>
<div class="newsflash">
<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="lifemodule">
<ul>
<li>
<i></i>
<p><a href="#">话费</a></p>
</li>
<li>
<i></i>
<img src="images/jian.png" alt="">
<p><a href="#">机票</a></p>
</li>
<li>
<i></i>
<p><a href="#">电影票</a></p>
</li>
<li>
<i></i>
<p><a href="#">游戏</a></p>
</li>
<li>
<i></i>
<p><a href="#">彩票</a></p>
</li>
<li>
<i></i>
<p><a href="#">加油卡</a></p>
</li>
<li>
<i></i>
<img src="images/jian.png" alt="">
<p><a href="#">酒店</a></p>
</li>
<li>
<i></i>
<p><a href="#">火车票</a></p>
</li>
<li>
<i></i>
<img src="images/jian.png" alt="">
<p><a href="#">众筹</a></p>
</li>
<li>
<i></i>
<p><a href="#">理财</a></p>
</li>
<li>
<i></i>
<p><a href="#">礼品卡</a></p>
</li>
<li>
<i></i>
<p><a href="#">白条</a></p>
</li>
</ul>
</div>
<div class="bargain">
<img src="upload/bargain.png" alt="">
</div>
</div>
</div>
</div>
<!-- main end -->
<!-- 推荐模块 start -->
<div class="w recom">
<div class="recom_hd">
<img src="images/今日推荐.png" alt="">
</div>
<div class="recom_bd">
<ul>
<li><a href="#"><img src="upload/images/li1_03.png" alt=""></a></li>
<li><a href="#"><img src="upload/images/li2_04.png" alt=""></a></li>
<li><a href="#"><img src="upload/images/li3_05.png" alt=""></a></li>
<li><a href="#"><img src="upload/images/li4_06.png" alt=""></a></li>
</ul>
</div>
</div>
<!-- 推荐模块 end -->
<!-- 猜你喜欢 start -->
<div class="w">
<div class="fav_hd">
<div class="fav_hd_l">猜你喜欢</div>
<div class="fav_hd_r">换一批</div>
</div>
<div class="fav_bd">
<ul>
<li><a href="#">
<i><img src="upload/图层 152.png" alt=""></i>
<p>阳光美包新款单肩包女
包时尚子母包四件套女<h4>¥116.00</h4>
</p>
</a></li>
<li><a href="#"><i><img src="upload/图层 153.png" alt=""></i>
<p>爱仕达 30CM炒锅不粘
锅NWG8330E电磁炉炒<h4>¥99.00</h4>
</p>
</a></li>
<li><a href="#"><i><img src="upload/图层 154.png" alt=""></i>
<p>捷波朗
（jabra）BOOSI劲步<h4>¥245.00</h4>
</p>
</a></li>
<li><a href="#"><i><img src="upload/图层 156.png" alt=""></i>
<p>欧普
JYLZ08面板灯平板灯铝<h4>¥238.00</h4>
</p>
</a></li>
<li><a href="#"><i><img src="upload/图层 158.png" alt=""></i>
<p>三星
（G5500）移动联通<h4>¥649.00</h4>
</p>
</a></li>
<li><a href="#"><i><img src="upload/图层 159.png"今天的文章品优购列表页_前端只写静态页面的工作可以做吗「建议收藏」分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：http://bianchenghao.cn/64334.html
