品优购网页制作（HTML和css内容）
品优购
- 前期准备
- 书写对应页面
-
- 首页
- 列表页
- 注册页
- 后话
前期准备
1.准备一个大的文件夹，里面包括若干小的文件夹。
2.小的文件夹分为：
css-----存储初始化样式以及各个页面的样式
images----存储不易更换的图片
upload----存储经常更换的图片
icomoon----字体图标相关文件
fonts----icomoon中的fonts移过来就行
3.再准备好网络名称左边的小图标
4.可以开始了
注：需要的品优购网页练习资源的可以关注下博主，私发。
书写对应页面
首页
由于于首页的导航栏、头部、尾部是公共样式，其他页面也可以使用，所以在这里我们写一个公共的css样式，然后引入；等到写完公共部分内容，我们在写一个首页的样式，一般命名为 index.css 。除此之外，为了让更多的人看到我们的网页，我们还需要进行三大标签SEO优化，具体见代码块。
具体代码如下：
<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="网上购物,网上商城,手机,笔记本,电脑，MP3，CD">
<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>
<body>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品游购欢迎您! li>
<li>
<a href="#">请登录 a><a href="register.html" class="style_red">免费注册a>
li>
ul>
div>
<div class="fr">
<ul>
<li>我的订单li>
<li>li>
<li class="arow-icon">我的品优购li>
<li>li>
<li>品优购会员li>
<li>li>
<li>企业采购li>
<li>li>
<li class="arow-icon">关注品优购li>
<li>li>
<li class="arow-icon">客户服务li>
<li>li>
<li class="arow-icon">网站导航li>
ul>
div>
div>
section>
<header class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城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减30a>
<a href="#">办公用品a>
<a href="#">电脑a>
<a href="#">通信a>
div>
<div class="shopcar">
我的购物车
<i class="count">8i>
div>
header>
<div 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>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>
<li><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>
div>
<div class="w">
<div class="main">
<div class="focus">
<ul>
<li><img src="upload/focus1.png" alt="">li>
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="lifeservice">
<ul>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
<li>
<i>i>
<p>话费p>
li>
ul>
div>
<div class="bargain">
<img src="upload/bargain.png" alt="">
div>
div>
div>
div>
<div class="w recom">
<div class="recom_hd">
<img src="images/recom.png" alt="">
div>
<div class="recom_bd">
<ul>
<li><img src="upload/recom_03.jpg" alt="">li>
<li><img src="upload/recom_03.jpg" alt="">li>
<li><img src="upload/recom_03.jpg" alt="">li>
<li><img src="upload/recom_03.jpg" alt="">li>
ul>
div>
div>
<div class="w favorite">
<div class="favorite_hd">
<h5>猜你喜欢h5>
<i><a href="#">换一批a>i>
div>
<div class="favorite_bd">
<ul>
<li>
<img src="upload/.fav.png" alt="">
<p>阳光美包新款单肩包女<br>
包时尚子母包四件套女p>
<h4>¥116.00h4>
li>
<li>
<img src="upload/.fav.png" alt="">
<p>阳光美包新款单肩包女<br>
包时尚子母包四件套女p>
<h4>¥116.00h4>
li>
<li>
<img src="upload/.fav.png" alt="">
<p>阳光美包新款单肩包女<br>
包时尚子母包四件套女p>
<h4>¥116.00h4>
li>
<li>
<img src="upload/.fav.png" alt="">
<p>阳光美包新款单肩包女<br>
包时尚子母包四件套女p>
<h4>¥116.00h4>
li>
<li>
<img src="upload/.fav.png" alt="">
<p>阳光美包新款单肩包女<br>
包时尚子母包四件套女p>
<h4>¥116.00h4>
li>
<li>
<img src="upload/.fav.png" alt="">
<p>阳光美包新款单肩包女<br>
包时尚子母包四件套女p>
<h4>¥116.00h4>
li>
ul>
div>
div>
<div class="w transmit">
传智播客 · 有趣区
div>
<div class="transmit_bd w">
<div class="transmit_bd-1">
<img src="upload/images/images/images/.trans1_07.jpg" alt="">
div>
<div class="transmit_bd-2">
<img src="upload/images/images/images/trans2_07.jpg" alt="">
div>
<div class="transmit_bd-3">
<img src="upload/images/images/images/trans3_07.jpg" alt="">
div>
<div class="transmit_bd-4">
<img src="upload/a136.jpg" alt="">
div>
div>
<div class="floor">
<div class="w jiadian">
<div class="box_hd">
<h3>家用电器h3>
<div class="tab_list">
<ul>
<li>
<a href="#" class="style_red">热门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="box_bd">
<div class="table_content">
<div class="table_list_item">
<div class="col_210">
<ul>
<li><a href="#">节能补贴a>li>
<li><a href="#">4K电视a>li>
<li><a href="#">空气净化器a>li>
<li><a href="#">IH电饭煲a>li>
<li><a href="#">滚筒洗衣机a>li>
<li><a href="#">电热水器a>li>
ul>
<a href="#">
<img src="upload/floor-1-1.png" alt="">
a>
div>
<div class="col_329">
<a href="#">
<img src="upload/floor-1-b01.png" alt="">
a>
div>