论坛 › 前端开发 › CSS3练习--电商web

嚴華 发表于 2024-10-14 17:36:28

CSS3练习--电商web

免责声明：本文仅做分享！
 
目录
 小练--小兔鲜儿
目录构建
SEO 三大标签
Favicon 图标
布局网页
版心
快捷导航（shortcut）
头部（header）
logo
导航
搜刮
购物车
底部（footer）
服务区
资助区
版权区
中间（banner）
奇怪好物区
人气保举区
热门品牌区
生鲜区
最新专题区
base.css(清除默认样式)

小兔鲜儿 - 奇怪 惠民 快捷！ (itheima.net)
SEO、Favicon、小兔鲜儿
 小练--小兔鲜儿

（电商web）
目录构建

https://i-blog.csdnimg.cn/direct/5bfbd51bdd0849bda95ea795893482c1.png
SEO 三大标签

SEO：搜刮引擎优化，提升网站百度搜刮排名。
提升SEO的常见方法：
1. 竞价排名（花米）
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……

网页头部 SEO 标签：
• title：网页标题标签
• description：网页形貌
• keywords：网页关键词
<!-- meta:desc -->
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<!-- meta:kw -->
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<!-- title -->
<title>小兔鲜儿-新鲜、惠民、快捷！</title> Favicon 图标

网页图标，出现在欣赏器标题栏，增长网站辨识度。
.ico
<!-- link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 布局网页

版心

版心居中
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1240px;   /* 自己测量 */
}
快捷导航（shortcut）

https://i-blog.csdnimg.cn/direct/2d40d4b5d82c4226a847718889f21d2a.png
通栏 > 版心 > 导航 ul > li > a
flex-end        （右对齐）
--- 给 a 加边框线，而不给li加，让a的高与字的高一样大，高。https://i-blog.csdnimg.cn/direct/38283c029c7f43dfbc5c077c8d5acba0.png
头部（header）

（头部的盒子尺寸，要整体布局。）
https://i-blog.csdnimg.cn/direct/642972b8a10245b98bcca38dce4ef3df.png
.header > logo + 导航（nav）+ 搜刮（search） + 购物车（cart）
https://i-blog.csdnimg.cn/direct/52abf0c1f9c440a89c8c20a8e92c4a23.png
logo

display: block;  转成块级，如许就可以设置宽高。
https://i-blog.csdnimg.cn/direct/dc0b65fa8e114023bbc2ff268cde0780.png
导航

a 有底部10px间距。

https://i-blog.csdnimg.cn/direct/fb809929f02d4caf92e6f69fe5c90a62.png
搜刮

input默认样式   （欣赏器默认 先 生效默认样式！）
https://i-blog.csdnimg.cn/direct/dccc8368b86843179cf1305e49a020d6.png
购物车


https://i-blog.csdnimg.cn/direct/bb4b8380ee394059b7e6d744cab8eee4.png


/* 购物车 */
.cart {
position: relative;
margin-top: 32px;
}

.cart .iconfont {
font-size: 24px;
}

.cart i {
position: absolute;
/* 相对定位 */
top: 1px;
/* right 定位右对齐：如果文字多了，向左撑开，可能盖住其他的内容 */
/* right: 1px; */
/* left 定位左对齐：文字多了，向右撑开 */
left: 15px;
/* 一般要向左对齐，向右撑开，所以不右对齐 */


/* 宽度不给，将来由内容撑开 */

padding: 0 6px;
height: 15px;
background-color: #E26237;
border-radius: 8px;
font-size: 14px;
color: #FFFEFE;
line-height: 15px;
/* 文字垂直居中 ，与高度一致 */
} 底部（footer）

---由于底部与头部类似，所以先完成底部。
https://i-blog.csdnimg.cn/direct/b2584e5ea4f74094a7512a33af6ee931.png
https://i-blog.csdnimg.cn/direct/3dd15b1f872f437ead57c5094cd81955.png 
<!-- 底部 -->
<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">
      <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>
    </div>
</div>

 

/* 底部 */
.footer {
height: 580px;
background-color: #F5F5F5;
}


/* 服务 */
.service {
padding: 60px 0;
height: 178px;
border-bottom: 1px solid #E8E8E8;
}

.service ul {
display: flex;
justify-content: space-evenly;
}

.service li {
display: flex;
width: 190px;
height: 58px;
/* background-color: pink; */
}

.service li h5 {
margin-right: 20px;
width: 58px;
height: 58px;
background-image: url(../images/sprite.png);
}

.service li p {
font-size: 28px;
line-height: 58px;
}

.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;
}

/* 帮助中心 */
.help {
display: flex;
justify-content: space-between;
padding-top: 60px;
height: 300px;
/* background-color: pink; */
}

/* left */
.help .left {
display: flex;
}

.help .left dl {
margin-right: 84px;
}

.help .left dl:last-child {
margin-right: 0;
}

.help .left dt {
margin-bottom: 30px;
font-size: 18px;
}

.help .left dd {
margin-bottom: 10px;
}

.help .left a {
color: #969696;
}

.help .left .iconfont {
color: #5EB69C;
}

/* right */
.help .right ul {
display: flex;
}

.help .right li:first-child {
margin-right: 55px;
}

.help .right .pic {
margin-bottom: 10px;
width: 120px;
height: 120px;
}

.help .right p {
color: #969696;
text-align: center;
}

/* 版权 */
.copyright {
text-align: center;
}

.copyright p {
margin-bottom: 10px;
color: #A1A1A1;
}

.copyright p a {
margin: 0 10px;
color: #A1A1A1;
} 服务区

https://i-blog.csdnimg.cn/direct/46c02827b5c04e4784e123326f3d5263.png
--注意CSS精灵（雪碧图）的应用。 
https://i-blog.csdnimg.cn/direct/662cb9a045494ed0a7b84d14ea391cfd.png
资助区

https://i-blog.csdnimg.cn/direct/6d35659cb6974fa8822c2b6eec08059b.png
分左右两部分. 
https://i-blog.csdnimg.cn/direct/5fbfbf34366444e294399a2db22dd278.png
版权区

https://i-blog.csdnimg.cn/direct/0014ce526433453c97b1da167256e92f.png
小竖线 直接打 |  
https://i-blog.csdnimg.cn/direct/7137a0a2c61945a8ba66b2a09d332bcc.png
中间（banner）

https://i-blog.csdnimg.cn/direct/a91952aa9fbe45a68b76b0c7d5057de0.png

通栏 > 版心 > 轮播图（ul.pic）+ 侧导航（subnav > ul）+ 圆点指示器（ol）
        定位（子绝父相） 
https://i-blog.csdnimg.cn/direct/31a846dd59714544914c65e582cbabef.png
 侧导航 
 右下角圆点指示器  ol > li > i（li 是大圆，i 是小圆）
https://i-blog.csdnimg.cn/direct/fcbd91ecb79144e39e704778ea379243.png 
/* banner */
.banner {
height: 500px;
background-color: #F5F5F5;
}

.banner .wrapper {
position: relative;
height: 500px;
background-color: pink;
overflow: hidden;
/* 隐藏溢出 */
}

/* 图片 */
.banner .pic {
display: flex;
/* flex 布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸 */
width: 3720px;
}

/* 侧导航 */
.subnav {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background-color: rgba(0, 0, 0, 0.42);
}

.subnav li {
display: flex;
justify-content: space-between;
padding-left: 30px;
padding-right: 12px;
height: 50px;
/* background-color: pink; */
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;
display: flex;
}

.banner ol li {
margin-left: 8px;
width: 22px;
height: 22px;
/* background-color: pink; */
border-radius: 50%;
cursor: pointer;
}

.banner ol i {
display: block;
margin: 4px;
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}

/* 选中：li半透明； i白色 */
.banner ol .current {
background-color: rgba(255, 255, 255, 0.5);
}

.banner ol .current i {
background-color: #fff;
}  
奇怪好物区

https://i-blog.csdnimg.cn/direct/eeb555f64be7464ea9371b31171589dd.png
标题（title） + 内容（bd）
（样式共用）
标题：
https://i-blog.csdnimg.cn/direct/a04e6f4c0c4748b1b422ead865ccf87a.png
内容：
https://i-blog.csdnimg.cn/direct/31e0df146a7148d995f7b1289df812dc.png
人气保举区

与上面类似
热门品牌区

https://i-blog.csdnimg.cn/direct/32694e8f858b40b9b2f1c8ccd8fe1269.png
箭头--定位。
 
https://i-blog.csdnimg.cn/direct/70d336e4e7b74a1cb0bf45fabf2aec3e.png
https://i-blog.csdnimg.cn/direct/ef0c18a823964f08aee09f38a02bbed2.jpeg
 
生鲜区

https://i-blog.csdnimg.cn/direct/ff6cf11d513543a08ac026879149ee8d.png
标题+内容
鼠标悬停表现 -- 》过渡结果。
https://i-blog.csdnimg.cn/direct/c645d6a8c8614ed1bf8d46db5ce00aff.png
/* 生鲜 */
.fresh .title {
margin-top: 60px;
margin-bottom: 20px;
}

.title .right {
display: flex;
}

.title .right ul {
display: flex;
margin-top: 10px;
margin-right: 58px;
}

.title .right ul a {
display: block;
margin-left: 6px;
padding: 0 7px;
height: 20px;
/* background-color: pink; */
line-height: 20px;
}

.title .right ul .active {
background-color: #00BE9A;
color: #fff;
}

/* 生鲜内容 */
.content {
display: flex;
justify-content: space-between;
}

.content .left {
width: 248px;
height: 610px;
/* background-color: pink; */
}

.content .right {
width: 968px;
height: 610px;
/* background-color: pink; */
}

.content .right ul {
display: flex;
flex-wrap: wrap;
}

.content .right li {
position: relative;
padding: 10px 21px 0;
width: 242px;
height: 305px;
border: 2px solid #fff;

/* 为了隐藏绿色cover */
overflow: hidden;
}

/* 产品内容 */
.content .pic {
width: 200px;
height: 180px;
}

.content .info {
margin-top: 14px;
margin-bottom: 5px;
height: 60px;
line-height: 19px;
}

.content .price {
color: #AF2F22;
}

.content .price span {
margin-left: 5px;
font-size: 22px;
}

/* 产品底部绿色区域 */
.content li .cover {
position: absolute;
left: 0;
/* bottom: 0; */
bottom: -86px;
padding-top: 15px;
width: 242px;
height: 84px;
background-color: #00BE9A;
text-align: center;
color: #fff;
transition: all 0.5s;
}

.content .cover p:nth-child(1) {
font-size: 18px;
}

.content .cover p:nth-child(2) {
margin: 3px auto 6px;
width: 120px;
height: 1px;
background-color: rgba(255, 255, 255, 0.11);
}

.content .cover p:nth-child(3) {
font-size: 13px;
}

.content .cover p:nth-child(3) .iconfont {
font-size: 14px;
}

/* 鼠标悬停到li，显示cover，改变位置 */
.content .right li:hover .cover {
bottom: 0;
}

.content .right li:hover {
border: 2px solid #00BE9A;
}


最新专题区

https://i-blog.csdnimg.cn/direct/ac1597ec6df94a5683610fdddda5f98d.png
ul > li * 3 
 渐变？？？颜色
https://i-blog.csdnimg.cn/direct/f99ebe9b15f6446f9e8e99cf46755a27.png


/* 最新专题 */
.topic {
margin-bottom: 40px;
}

.topic .title {
margin-top: 100px;
}

.topic-bd ul {
display: flex;
justify-content: space-between;
}

.topic-bd li {
width: 405px;
height: 355px;
/* background-color: pink; */
}

.topic-bd .pic {
position: relative;
width: 405px;
height: 288px;
}

.topic-bd .txt {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
width: 405px;
height: 67px;
/* background-color: skyblue; */
font-size: 14px;
color: #666;
}

.topic-bd .txt .left {
display: flex;
}

.topic-bd .txt .left p {
margin-right: 20px;
}

.topic-bd .txt .left p:nth-child(1) i {
color: #AA2113;
}

/* 定位区域 - 文字 */
.topic-bd .cover {
position: absolute;
left: 0;
bottom: 0;

display: flex;
justify-content: space-between;
align-items: center;

padding: 0 15px;
width: 405px;
height: 90px;
background-image: linear-gradient(180deg, rgba(137, 137, 137, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
}

.topic-bd .cover .left {
color: #fff;
}

.topic-bd .cover .left h4 {
margin-bottom: 6px;
font-size: 20px;
}

.topic-bd .cover .right {
padding: 0 7px;
height: 25px;
background-color: #fff;
color: #AA2113;
font-size: 15px;
}

.topic-bd .cover .right span {
font-size: 18px;
}
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;
}



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: CSS3练习--电商web