项目目录
images文件夹:存放固定使用的图片素材,例如:logo、样式修饰图等
uploads文件夹:存放非固定使用的图片素材,例如:商品图、宣传图及需要上传的图片
iconfont文件夹:字体图标素材
css文件夹:存放css文件(link标签引入)
- base.css:基础公共样式
- common.css:各个网页相同模块的重复样式,例如:头部、底部
- index.css:首页css样式
index.html:首页HTML文件
SEO三大标签
搜索引擎优化
SEO:搜索引擎优化,提升网站百度搜索排名
提升SEO常见方法:
- 竞价排名
- 将网页制作成HTML后缀
- 标签语义化(在合适的地方使用合适的标签)
- ……
网页头部SEO标签
- title:网页标题标签
- description:网页描述
- keywords:网页关键词
Favicon图标
Favicon图标:网页图标,出现在浏览器哦标题栏,增加网站辨识度。
图标:favicon.ico,一般存放到网站的根目录里面
前期准备工作:
<head> <meta charset="UTF-8"> <!-- meta:desc --> <meta name="description" content="新鲜 大气 高大上 巴拉巴拉小米新"> <!-- meta:kw --> <meta name="keywords" content="食物 购物 食材 服装 电器"> <!-- 引入css文件 --> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/commom.css"> <link rel="stylesheet" href="./css/index.css"> <!-- 引入字体图标 --> <link rel="stylesheet" href="./iconfont/iconfont.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小兔鲜儿网</title> </head>
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; }
小兔鲜网页布局
版心
wrapper版心宽度:1240px
在common.css写版心的样式
/* 存放各个页面相同的样式 */ /* 版心 wrapper*/ .wrapper{ width: 1240px; margin: 0 auto; }
快捷导航(shortcut)
结构:通栏->版心->导航ul
布局:flex-end(使ul内容右对齐)
<div class="shortcut"> <div class="wrapper"> <ul> <li><a href="#" class="active">请先登陆</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>
css样式表
/* 存放各个页面相同的样式 */ /* 版心 wrapper*/ .wrapper{ width: 1240px; margin: 0 auto; display: flex; } .shortcut{ height: 52px; background-color: #333333; } /* 头部的版心高度 */ .shortcut.wrapper{ height: 52px; display: flex; justify-content: flex-end; /* background-color: pink; */ } .shortcut ul{ display: flex; } .shortcut li a{ line-height: 52px; padding: 0 15px; border-right: 1px solid #999; font-size: 14px; color:#fff; } /* 最后一个li的a不用边框线 */ .shortcut li:last-child a{ border-right: 0; } /* 手机图标样式设置 */ .shortcut li .iconfont{ margin-right: 4px; /* 使其不是与文字底部对齐,即基线对齐 */ vertical-align: middle; } /* 对请先登陆的文字样式进行改变 */ .shortcut li .active{ color:#5EB69C; }
头部(header)
结构:.header>logo+导航(nav)+搜索(search)+购物车(cart)
<!-- 头部 --> <div class="header wrapper"> <!-- logo --> <div class="logo"> <!-- logo的搜索引擎优化,h1标签嵌套a标签 --> <h1><a href="#"></a></h1> </div> <!-- 导航nav --> <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>
/* 头部区域 */ .header{ /* logo的高度最高,选取logo的高度作为header盒子的高度 */ height: 88px; display: flex; margin-top: 22px; margin-bottom: 22px; } /* logo区域 */ .header .logo{ width: 200px; height: 88px; margin-right: 40px; } /* 给a标签添加背景图 */ .logo a{ display: block; width: 200px; height: 88px; background-image: url(../images/logo.png); } .nav{ margin-top: 33px; margin-right: 28px; } .nav ul{ /* df */ display: flex; } .nav ul li{ margin-right: 47px; } .nav li a{ color:#333; /* 鼠标悬停时在a标签10px处有一个下划线 */ padding-bottom: 10px; } .nav li a:hover{ border-bottom: 2px solid #5EB69C; color:#5EB69C; } /* 搜索区域 */ .search{ display: flex; width: 170px; height: 34px; margin-top: 33px; margin-right: 45px; border-bottom: 2px solid #F4F4F4; } /* 给放大镜图标设置样式 */ .search .iconfont{ font-size: 18px; color:#ccc; margin-right: 8px; } .search input{ /* 浏览器优先生效input标签的默认宽度, 所以flex:1;不生效,应重置input的 默认宽度,重置方法为设置width为0 */ flex:1; width: 0; } .search input::placeholder{ color:#ccc; font-size: 16px; } .cart{ margin-top: 32px; position: relative; } .cart .iconfont{ font-size: 24px; } .cart i{ position: absolute; top:1px; /* 一般不写右,因为数字增加的时候会 往左边撑开,不好看. 具体要用什么数值可以自己测试 */ left:12px; padding: 0 5.5px; height: 15px; /* 数字2的颜色大小居中对齐 */ font-size: 14px; color:#FFFEFE; line-height: 15px; border-radius: 8px; background-color: #E26237; }
尾部(footer)
结构:服务中心+帮助中心+版权区域
服务中心
使用定位
<!-- 服务 --> <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>
/* 服务 */ .service{ height: 178px; /* 上下间距为60,左右间距靠水平对齐justify-content实现 */ padding: 60px 0; } .service ul{ display: flex; /* 两侧间距相等 */ justify-content: space-evenly; } .service li{ /* 使图片与文字在同一行 */ display: flex; width: 190px; height: 58px; /* background-color: orange; */ } .service li h5{ margin-right: 20px; width: 58px; height: 58px; background-image: url(../images/sprite.png); } .service li:nth-child(2) h5{ background-position: 0 -58px; } .service li:nth-child(3) h5{ background-position: 0 -116px; } .service li:nth-child(4) h5{ background-position: 0 -174px; } .service li p{ font-size: 28px; line-height: 58px; }
帮助中心
分左右两个盒子,左盒子由dt和dd组成,右盒子由图片+文字组成
<!-- 帮助中心 --> <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="#">购物流程<i class="iconfont icon-customer-service"></i></a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> </dl> </div> <div class="right"> <ul> <li> <div class="pic"><img src="./images/wechat.png"></div> <p>微信公众号</p> </li> <li> <div class="pic"><img src="./images/wechat.png"></div> <p>微信公众号</p> </li> </ul> </div> </div>
/* 帮助中心 */ .help{ display: flex; justify-content: space-between; height: 302px; padding-top: 60px; } .help .left{ display: flex; } .help .left dl{ margin-right: 84px; } /* 去掉左后一个dl的右边距,左盒子与右盒子之间的距离 使用主轴对齐来调整 */ .help .left dl:last-child{ margin-right: 0; } .help .left dt{ font-size: 18px; margin-bottom: 30px; } .help .left dd{ margin-bottom: 10.5px; } .help .left a{ color:#969696; } .help .left dd .iconfont{ color: #5EB69C; } .help .right ul{ display: flex; } /*只有一个图片有右边距就可以了*/ .help .right li:first-child{ margin-right: 55px; } .help .right li .pic{ width: 120px; height: 120px; margin-bottom: 10px; } .help .right li p{ text-align: center; color: #969696 ; }
版权部分
此区域由超链接和文字两部分组成,超链接部分不用使用引擎优化,使用p标签嵌套a就可以了,不用使用ul嵌套li。
<!-- 版权 --> <div class="copyright"> <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 © 小兔鲜</p> </div>
/* 版权区域 */ .copyright{ text-align: center; } .copyright p{ margin-bottom: 10px; color: #A1A1A1; } .copyright p a{ color: #A1A1A1; font-size: 16px; margin:0 10px; }
banner区域
通栏>版心>轮播图(ul.pic)+侧导航(subnav>ul)+圆点指示器(ol)
轮播图(ul.pic)
<!-- 图片区域 --> <div class="banner"> <div class="wrapper"> <ul class="pic"> <li><a href="#"><img src="./uploads/banner1.png"></a></li> <li><a href="#"><img src="./uploads/banner1.png"></a></li> <li><a href="#"><img src="./uploads/banner1.png"></a></li> </ul>
.banner .wrapper{ position: relative; height: 500px; /* 溢出图片隐藏 */ overflow: hidden; } /* 图片 */ .wrapper .pic{ display: flex; /* flex布局,父级宽度不够,子级就会被挤压, 因此增大父级pic的尺寸,这里设置三张图片的宽度 */ width: 3720px; }
侧导航
<!-- 侧导航ul --> <!-- 使用子绝父相来定位 --> <div class="subnav"> <ul> <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> <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>
.subnav{ position: absolute; left: 0; top: 0; width: 250px; height: 500px; background-color: rgba(0,0,0,0.42); } .subnav li{ height: 50px; cursor: pointer; line-height: 50px; padding-left: 30px; padding-right: 12px; display: flex; justify-content:space-between; color: #fff; } .subnav li a{ color:#fff; font-size: 14px; margin-right: 5px; } .subnav li .classify{ font-size: 16px; margin-right: 14px; } .subnav li .iconfont{ font-size: 14px; } .subnav li:hover{ background-color:#00BE9A; }
小圆点
<!-- 小圆点 --> <!-- 大圆包小圆 --> <ol> <li class="current"><i></i></li> <li><i></i></li> <li><i></i></li> </ol>
/* 圆点指示器 */ .banner ol{ display: flex; position: absolute; /* 控制元素的定位 */ /* 大圆半径为11,小圆半径为7, 点击小圆会放大半径4px,所以右边距 应为20-4,底边距为21-4 */ bottom: 17px; right: 16px; cursor:pointer; } /* 大圆 */ .banner ol li{ width: 22px; height: 22px; border-radius: 50%; /* 注意是左边距而不是右边距 */ /* ol的右外边距已经定下来了, 最后一个li在ol的最右边 */ margin-left: 8px; } /* 小圆 */ .banner ol i{ /* i是行内标签 */ display: block; width: 14px; height: 14px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; /* 居中 */ margin: 4px; } /* 选中状态样式:i白色,li半透明 */ .banner ol .current{ background-color: rgba(255,255,255,0.5); } .banner ol .current i{ background-color: #fff; }
新鲜好物区域(goods)
结构:标题title+内容(bd)
<!-- 新鲜好物区域 --> <div class="goods wrapper"> <!-- 标题:分左(h+p)和右 --> <div class="title"> <div class="left"> <h3>新鲜好物</h3> <p>新鲜出炉 品质靠谱</p> </div> <div class="right"> <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a> </div> </div> <!-- 内容 --> <!-- 内容盒子里分图片和文字两个盒子 --> <div class="content"> <ul> <li> <a href="#"> <div class="pic"><img src="./uploads/goods1.png" alt=""></div> <div class="txt"> <h4>KN95级莫兰迪色防护罩</h4> <p>¥<span>79</span></p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/goods2.png" alt=""></div> <div class="txt"> <h4>紫檀外独板三层普洱茶盒</h4> <p>¥<span>566</span></p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/goods3.png" alt=""></div> <div class="txt"> <h4>法拉蒙高颜值记事本可定制</h4> <p>¥<span>58</span></p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/goods4.png" alt=""></div> <div class="txt"> <h4>科技布布艺沙发</h4> <p>¥<span>5600</span></p> </div> </a> </li> </ul> </div> </div>
.title{ display: flex; justify-content: space-between; height: 42px; margin-top: 40px; margin-bottom: 30px; } .title .left{ display: flex; } .title .left h3{ font-size: 30px; margin-right: 35px; } .title .left p{ /* 侧轴对齐 */ align-self: flex-end; color: #A1A1A1; } .title .right .more{ /* 查看全部文字居中 */ line-height: 42px; color: #A1A1A1; } .title .right .iconfont{ margin-left: 10px; } .content ul{ display: flex; justify-content: space-between; } .content li{ width: 304px; height: 404px; background-color: #EEF9F4; } /* 设置装图片的盒子的大小 */ .content li .pic{ width: 304px; height: 304px; } .content li .txt{ text-align: center; } .content li .txt h4{ margin-top: 18px; margin-bottom: 8px; font-size: 20px; } .goods .content li p{ font-size: 18px; color: #AA2113 ; } .goods .content p span{ font-size: 22px; color: #AA2113 ; margin-left: 3px; }
人气推荐区域
和新鲜好物区域差不多
<!-- 人气推荐区域 --> <div class="recommend wrapper"> <!-- 标题:分左(h+p)和右 --> <div class="title"> <div class="left"> <h3>人气推荐</h3> <p>人气爆款 不容错过</p> </div> <!-- <div class="right"> <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a> </div> --> </div> <!-- 内容 --> <!-- 内容盒子里分图片和文字两个盒子 --> <div class="content"> <ul> <li> <a href="#"> <div class="pic"><img src="./uploads/recommend1.png" alt=""></div> <div class="txt"> <h4>特惠推荐</h4> <p>我猜得到 你的需要</p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/recommend2.png" alt=""></div> <div class="txt"> <h4>爆款推荐</h4> <p>人气好物推荐</p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/recommend3.png" alt=""></div> <div class="txt"> <h4>节日礼品一站买全</h4> <p>编辑尽心整理推荐</p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/recommend4.png" alt=""></div> <div class="txt"> <h4>鲜花园艺</h4> <p>给生活增加仪式感</p> </div> </a> </li> </ul> </div> </div>
/* 人气推荐区域 */ /* 改变背景色 */ .recommend .content li { background-color: #fff; margin-bottom: 60px; } .recommend .content li h4{ margin-top: 17.5px; margin-bottom: 15px; } .recommend .content li p{ color: #A1A1A1 ; font-size: 16px; }
热门品牌区域(brand)
标题结构:左侧(left)+右侧箭头(显示在标题外部:定位)
<!-- 热门品牌区域 --> <div class="brand"> <div class="wrapper"> <!-- 标题 --> <div class="title"> <div class="left"> <h3>热门品牌</h3> <p>国际经典 品质认证</p> </div> <!-- 左右箭头 --> <div class="button"> <a href="#" class="prev"><i class="iconfont icon-arrow-left-bold"></i></a> <a href="#" class="next"><i class="iconfont icon-arrow-right-bold"></i></a> </div> </div> <!-- 内容 --> <div class="content"> <ul> <li><a href="#"><img src="./uploads/hot1.png"></a></li> <li><a href="#"><img src="./uploads/hot2.png"></a></li> <li><a href="#"><img src="./uploads/hot3.png"></a></li> <li><a href="#"><img src="./uploads/hot4.png"></a></li> <li><a href="#"><img src="./uploads/hot5.png"></a></li> </ul> </div> </div>
/* 热门品牌区域 */ .brand{ height: 468px; background-color: #F5F5F5; } .brand .wrapper{ /* 一定不要漏掉这个, 否则会呈现外边距塌陷 */ overflow: hidden; height: 468px; } /* 要记得tilie是一个大盒子 */ .brand .title { position: relative; margin-bottom: 40px; } /* 子绝父相定位 */ .brand .button{ display: flex; position: absolute; right: 0; /* 注意要加上该箭头盒子的高度 */ bottom:-25px; } .brand .button a{ /* a标签要设置宽高时记得改为块模式 */ display: block; text-align: center; line-height: 20px; width: 20px; height: 20px; color: #fff; } .brand .button .prev{ background-color: #ddd; } .brand .button .next{ background-color: #00BE9A; margin-left: 12px; } .brand .content li{ width: 224px; height: 306px; }