目标：运用前8天学习的知识，完成静态网页的布局。
一、任务目标
1、工具和素材
工具：Mac版PxCook像素大厨，Windows版PxCook像素大厨，需要的请自行下载安装。
PxCook 像素大厨是用来查看 PSD 格式的设计稿的，没用过的可以阅读 Day05的课程，里面有讲解。
完整项目代码的可以点击这里获取完整代码，仅供学习参考使用。
2、目标网页
要完成布局的网页样式如下图：
二、实战开发要点
1、项目目录
这里将网站项目命名为 xtx-pc，网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。 项目目录结构如下：
2、网页头部SEO三大标签
SEO：搜索引擎优化，提升网站百度搜索排名
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- ……
网页头部 SEO 标签：
- title：网页标题标签
- description：网页描述
- keywords：网页关键词
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta:desc -->
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<!-- meta:kw -->
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<!-- link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
</head>
3、Favicon 图标
Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。
图标：favicon.ico，一般存放到网站的根目录里面
三、代码
1、index.html 部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta:desc -->
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<!-- meta:kw -->
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<!-- link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 快捷导航 -->
<div class="shortcur">
<div class="wrapper">
<ul>
<li><a class="login" 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=""><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="header wrapper">
<!-- logo -->
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<!-- 导航 -->
<div class="nav">
<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 class="search">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</div>
</div>
<!-- banner -->
<div class="banner">
<div class="wrapper">
<!-- 图片 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<div class="subnav">
<ul>
<li>
<div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<ol>
<li class="current"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="wrapper">
<!-- 服务 -->
<div class="service">
<ul>
<li>
<h5></h5>
<p>价格亲民</p>
</li>
<li>
<h5></h5>
<p>物流快捷</p>
</li>
<li>
<h5></h5>
<p>品质新鲜</p>
</li>
<li>
<h5></h5>
<p>售后无忧</p>
</li>
</ul>
</div>
<!-- 帮助中心 -->
<div class="help">
<div class="left">
<dl>
<dt>购物指南</dt>
<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>
</dl>
<dl>
<dt>关于我们</dt>
<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>
</dl>
<dl>
<dt>服务热线</dt>
<dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
<dd><a href="#">客服电话 400-0000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic"><img src="./images/wechat.png" alt=""></div>
<p>微信公众号</p>
</li>
<li>
<div class="pic"><img src="./images/app.png" alt=""></div>
<p>APP下载二维码</p>
</li>
</ul>
</div>
</div>
<!-- 版权 -->
<div class="copyright">
<!-- 底部, 不用考虑搜索优化问题, 直接使用 a 标签 -->
<p>
<a href="#">关于我们</a>|
<a href="#">帮助中心</a>|
<a href="#">售后服务</a>|
<a href="#">配送与验收</a>|
<a href="#">商务合作</a>|
<a href="#">搜索推荐</a>|
<a href="#">友情链接</a>
</p>
<p>Copyright © 2020 小兔鲜儿. All Rights Reserved.</p>
</div>
</div>
</div>
</body>
</html>
2、base.css 代码
/* 去除常见标签默认的 margin 和 padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 16px/1.5 "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
list-style: none;
}
/* 去除默认的倾斜效果 */
em,
i {
font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
3、common.css 部分代码
/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1240px;
}
/* 快捷导航 */
.shortcur {
background-color: #333;
height: 52px;
}
.shortcur .wrapper {
/* background-color: pink; */
display: flex;
justify-content: flex-end;
height: 52px;
}
.shortcur ul {
display: flex;
line-height: 52px;
}
.shortcur li a {
padding: 0 15px;
font-size: 14px;
color: #fff;
border-right: 1px solid #999;
}
.shortcur li .login {
color: #53b69c;
}
.shortcur li:last-child a {
border: none;
}
.shortcur li .icon-mobile-phone {
margin-right: 4px;
vertical-align: center;
}
/* 头部 */
.header {
/* background-color: pink; */
margin-top: 22px;
margin-bottom: 22px;
display: flex;
align-items: center;
height: 88px;
}
/* logo */
.header .logo {
margin-right: 40px;
width: 200px;
height: 88px;
}
.header .logo a {
background-image: url(../images/logo.png);
display: block;
width: 200px;
height: 88px;
font-size: 0;
}
/* 导航 */
.header .nav {
margin-right: 28px;
}
.header .nav ul {
display: flex;
}
.header .nav li {
margin-right: 47px;
}
.header .nav li a {
padding-bottom: 10px;
}
.header .nav li:first-child a {
border-bottom: 2px solid #53b69c;
color: #53b69c;
}
.header .nav li a:hover {
border-bottom: 2px solid #53b69c;
color: #53b69c;
}
/* 搜索 */
.header .search {
margin-right: 45px;
display: flex;
align-items: center;
width: 170px;
height: 34px;
border-bottom: 2px solid #F4F4F4;
}
.header .search .icon-search {
margin-right: 8px;
font-size: 18px;
color: #ccc;
}
.header .search input {
background-color: transparent;
/* 浏览器优先生效 input 标签的默认宽度，所以 flex：1 不生效 */
/* 解决办法：重置 input 默认宽度 → width：0 */
flex: 1;
width: 0;
/* 父级使用了 align-items: center */
/* 如果不设置高度, 默认高度由内容撑开, 高度很低, 鼠标不好点击*/
height: 34px;
}
.header .search input::placeholder {
font-size: 15px;
color: #ccc;
}
/* 购物车 */
.header .cart {
position: relative;
}
.header .cart .iconfont {
font-size: 26px;
}
.header .cart i {
background-color: #E26237;
position: absolute;
top: 2px;
/* right 定位右对齐：如果文字多了，向左撑开，可能盖住其他的内容 */
/* 实际开发中这种情况一般不使用右对齐 */
/* right: 1px; */
/* left 定位左对齐：文字多了，向右撑开 */
left: 13px;
/* 不设置宽度, 使用 padding, 宽度由内容撑开 */
padding: 0 6px;
height: 16px;
line-height: 16px;
font-size: 13px;
color: #FFFEFE;
border-radius: 8px;
}
/* 版权 */
.footer .copyright {
/* 不用设置宽度, 默认撑满, 直接设置文字居中就可以了 */
text-align: center;
}
.footer .copyright p {
margin-bottom: 10px;
color: #A1A1A1;
}
.footer .copyright p a {
margin: 0 10px;
color: #A1A1A1;
}
4、index.css 部分代码
/* 首页内容样式 */
/* banner */
.banner {
background-color: #F5F5F5;
height: 500px;
}
.banner .wrapper {
background-color: red;
position: relative;
height: 500px;
overflow: hidden;
}
/* 图片 */
.banner .pic {
display: flex;
/* flex 布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸 */
width: 3720px;
}
/* 侧导航 */
.banner .subnav {
background-color: rgba(0, 0, 0, 0.42);
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
}
.subnav li {
/* background-color: pink; */
padding-left: 30px;
padding-right: 12px;
display: flex;
justify-content: space-between;
height: 50px;
line-height: 50px;
color: #fff;
cursor: pointer;
}
/* a 所有都是小字，分类是大字 */
.subnav li a {
margin-right: 5px;
font-size: 14px;
color: #fff;
}
.subnav li .classify {
margin-right: 14px;
font-size: 16px;
}
.subnav li .iconfont {
font-size: 14px;
}
.subnav li:hover {
background-color: #00BE9A;
}
/* 圆点指示器 */
.banner ol {
position: absolute;
bottom: 17px;
right: 16px;
/* 让里面 li 在一行显示, 原本 li 是块级显示模式, display: flex 变成行内块显示模式 */
display: flex;
}
/* 在 base.css 中已经清除了 ul li 的样式 */
.banner ol li {
/* background-color: pink; */
margin-left: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
cursor: pointer;
}
.banner ol i {
background-color: rgba(255, 255, 255, 0.5);
display: block;
margin: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
}
/* 选中：li半透明； i白色 */
.banner ol .current {
background-color: rgba(255, 255, 255, 0.5);
}
再好的讲解也不如自己亲自动手敲一遍，想要完整项目代码的可以点击这里获取完整代码，仅供学习参考使用。
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
