黑马程序员——html css基础——day10day11day12——小兔鲜儿

目录：

  1. 底部盒子制作
    1. 底部服务模块制作
    2. 底部帮助模块
    3. 底部版权模块
  2. banner-轮播图
    1. HTML结构
    2. CSS样式
  3. banner图片模块
    1. html
    2. css
  4. banner小圆点制作
    1. html
    2. css
  5. banner-侧导航
    1. HTML结构
    2. CSS样式
  6. 新鲜好物-hd
    1. HTML结构
    2. CSS样式
  7. 新鲜好物-bd
    1. HTML结构
    2. CSS样式
    3. 溢出文字显示省略号
  8. 人气推荐
    1. HTML结构
    2. CSS样式
  9. 热门品牌-布局
    1. HTML结构
    2. CSS样式
  10. 热门品牌-头部右侧制作
    1. html
    2. css
  11. 热门品牌-内容
    1. HTML结构
    2. CSS样式
  12. 生鲜-标题
    1. HTML结构
    2. CSS样式
  13. 生鲜头部制作完成
    1. html
    2. css
  14. 生鲜-内容布局
    1. HTML结构
    2. CSS样式
  15. 生鲜-内容小li搭建
    1. html
    2. css
  16. 生鲜-产品内容
    1. HTML结构
    2. CSS样式
    3. 快捷键
  17. 最新专题-布局
    1. HTML结构
    2. CSS样式
  18. 最新专题-内容
    1. HTML结构
    2. CSS样式
  19. 最新专题完成
    1. html
    2. css

1.底部盒子制作

  <!-- 底部开始 --><div class="footer"><div class="wrapper"></div></div><!-- 底部结束 -->
.footer {height: 582px;background-color: #F5F5F5;
}
底部服务模块制作

html

<!-- 服务 service -->
<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 {padding: 60px 0;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 {overflow: hidden;width: 58px;height: 58px;margin-right: 20px;background: url(../images/sprite.png);text-indent: -999em;transition: all .3s;
}.service li p {font-size: 28px;line-height: 58px;
}.service li:nth-child(2) h5 {background-position: 0 -58px;
}.service li:nth-child(2) h5:hover {background-position: 0 -116px;
}.service li:nth-child(3) h5 {background-position: 0 -116px;
}.service li:nth-child(4) h5 {background-position: 0 -174px;
}
底部帮助模块

html

<!-- 帮助模块 help -->
<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="#">在线客服</a><span class="iconfont icon-customer-service"></span></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><img src="./images/wechat.png" alt=""><p>微信公众号</p></li><li><img src="./images/app.png" alt=""><p>APP下载二维码</p></li></ul></div>
</div>

 css

/* 帮助 */
.help {display: flex;justify-content: space-between;height: 300px;padding-top: 60px;/* background-color: pink; */
}.help .left {display: flex;
}.help .left dl {margin-right: 80px;
}.help .left dt {font-size: 18px;margin-bottom: 30px;
}.help .left dd {margin-bottom: 10px;
}.help .left dd a {font-size: 16px;color: var(--hui);
}.help .left dd a:hover {text-decoration: underline;
}.help .left dd span {color: var(--lv);
}.help .right ul {display: flex;
}.help .right li:last-child {margin-left: 55px;
}.help .right li img {width: 120px;height: 120px;
}.help .right p {margin-top: 10px;color: var(--hui);text-align: center;
}

 

底部版权模块

html

<!-- 底部版权 -->
<div class="copyright"><p><a href="#">关于我们</a> <span>|</span><a href="#">帮助中心</a> <span>|</span><a href="#">售后服务</a> <span>|</span><a href="#">配送与验收</a> <span>|</span><a href="#">商务合作</a> <span>|</span><a href="#">搜索推荐</a> <span>|</span><a href="#">友情链接</a></p><p>CopyRight © 小兔鲜</p>
</div>

 css

.copyright {text-align: center;line-height: 30px;color: var(--hui);
}.copyright a {color: var(--hui);
}.copyright a:hover {color: var(--lv);
}.copyright span {margin: 0 5px;
}

2.banner-轮播图

  • 注意此时开始要写到 index.css 里面哦  
HTML结构
  <!-- banner开始 --><div class="banner"><div class="wrapper"></div></div><!-- banner结束 -->
CSS样式
/* banner 开始 */
.banner {height: 500px;background-color: #F5F5F5;
}.banner .wrapper {position: relative;/* 溢出隐藏 */overflow: hidden;height: 500px;
}

 

3.banner 图片模块

html
<!-- 轮播图图片 -->
<ul><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>
<!-- 小圆点 -->
css
.banner .wrapper>ul {display: flex;width: 300%;/* width: 3720px; */
}

 

4.banner 小圆点制作

html
<!-- 小圆点 -->
<ol class="circle"><li></li><li class="active"></li><li></li>
</ol>
css
.banner .circle {display: flex;position: absolute;bottom: 10px;right: 10px;
}.banner .circle li {width: 22px;height: 22px;padding: 4px;margin-left: 10px;/* background-color: pink; */border-radius: 50%;/* 小手 */cursor: pointer;
}.banner .circle .active {background-color: rgba(255, 255, 255, 0.5);
}.banner .circle li::after {content: "";/* 转换块级才有大小 */display: block;width: 14px;height: 14px;background-color: #fff;border-radius: 50%;
}

 

5.banner-侧导航

HTML结构
<!-- 侧边栏 -->
<div class="subnav"><ul><li><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></li><li><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><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 href="#">玩具</a>  </li><li><a href="#">服饰</a><a href="#">女装</a><a href="#">男装</a>  </li><li><a href="#">杂货</a><a href="#">户外</a><a href="#">图书</a>  </li><li><a href="#">品牌</a><a href="#">品牌制造</a>  </li></ul>
</div>
CSS样式
.banner .subnav {position: absolute;left: 0;top: 0;width: 250px;height: 500px;background-color: rgba(0, 0, 0, .42)
}.banner .subnav li {position: relative;height: 50px;padding-left: 29px;line-height: 50px;/* background-color: pink; */
}.banner .subnav li::after {/* 到iconfont.css 里面去复制 */content: "\e687";position: absolute;top: 0px;right: 29px;color: #fff;/* 声明字体图标的字体 */font-family: iconfont;
}.banner .subnav li:hover {background-color: var(--lv);
}.banner .subnav li a {color: #fff;font-size: 14px;
}.banner .subnav li a:first-child {font-size: 16px;margin-right: 5px;
}

 

6.新鲜好物-hd

  • 考虑公共样式  
HTML结构
<div class="wrapper"><!-- 上侧 hd  --><div class="hd"><h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2><a href="#" class="all">查看全部<i class="iconfont icon-arrow-right-bold"></i></a></div>
</div>
CSS样式
/* 新鲜好物 */
/* 新鲜好物 */
.hd {display: flex;justify-content: space-between;/* 侧轴垂直居中 */align-items: center;padding: 40px 0 30px;}.hd h2 {font-size: 30px;
}.hd h2 span {font-size: 16px;color: var(--hui);margin-left: 30px;
}.hd .all {font-size: 16px;color: var(--hui);
}.hd .all:hover {color: var(--lv);
}

 

7.新鲜好物-bd

HTML结构
<!-- 下部分 bd  --><div class="bd"><ul><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/goods1.png" alt=""></div><h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4><p>¥ <span>99.00</span></p></a></li><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/goods1.png" alt=""></div><h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4><p>¥ <span>99.00</span></p></a></li><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/goods1.png" alt=""></div><h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4><p>¥ <span>99.00</span></p></a></li><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/goods1.png" alt=""></div><h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4><p>¥ <span>99.00</span></p></a></li></ul></div>
CSS样式
/* 好物内容 -- 公共样式 */.bd ul {display: flex;justify-content: space-between;
}.bd ul li {width: 304px;height: 404px;background-color: #EEF9F4;text-align: center;transition: all .3s;
}.bd ul li:hover {margin-top: -5px;box-shadow: 0 15px 30px rgba(0, 0, 0, .42);
}.bd ul li a {display: block;height: 100%;
}.bd ul li .pic {width: 304px;height: 304px;background-color: skyblue;
}.bd ul li h4 {font-size: 20px;margin: 18px 15px 9px;}.bd ul li p {color: #AA2113;font-size: 17px;
}.bd ul li p span {font-size: 22px;
}
溢出文字显示省略号

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>.box {width: 200px;height: 40px;border: 1px solid pink;/* 1. 不允许文字换行  强制文字一行显示*/white-space: nowrap;/* 2. 溢出隐藏 */overflow: hidden;/* 3. 文字溢出用省略号代替 */text-overflow: ellipsis;}</style>
</head><body><div class="box">里面多的文字123要显示省略号哦</div>
</body></html>

8.人气推荐

HTML结构
<!-- 人气推荐 --><!-- 人气推荐 --><div class="wrapper recommend"><!-- 上侧 hd  --><div class="hd"><h2>人气推荐<span>人气爆款 不容错过</span></h2></div><!-- 下部分 bd  --><div class="bd"><ul><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/recommend1.png" alt=""></div><h4 class="text-overflow">特惠推荐</h4><p>我猜得到 你的需要</p></a></li><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/recommend1.png" alt=""></div><h4 class="text-overflow">特惠推荐</h4><p>我猜得到 你的需要</p></a></li><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/recommend2.png" alt=""></div><h4 class="text-overflow">特惠推荐</h4><p>我猜得到 你的需要</p></a></li><li><a href="#" title="KN95级莫兰迪色防护口罩"><div class="pic"><img src="./uploads/recommend3.png" alt=""></div><h4 class="text-overflow">特惠推荐</h4><p>我猜得到 你的需要</p></a></li></ul></div></div>
CSS样式
.recommend .bd li {background-color: #fff;
}.recommend .bd li p {font-size: 16px;color: var(--hui);
}

9.热门品牌-布局

HTML结构
<!-- 热门品牌 brand --><div class="brand"><div class="wrapper"><!-- hd  --><div class="hd"><h2>热门品牌<span>国际经典 品质认证</span></h2></div></div></div>

 

CSS样式
/* 热门品牌 */
.brand {height: 468px;background-color: #f5f5f5;
}

10.热门品牌-头部右侧制作

html
<!-- hd  -->
<div class="hd"><h2>热门品牌<span>国际经典 品质认证</span></h2><!-- 按钮   button--><div class="btn"><a href="javascript:;" class="btnleft"><i class="iconfont icon-arrow-left-bold"></i></a><a href="javascript:;" class="btnright"><i class="iconfont icon-arrow-right-bold"></i></a></div>
</div>
css 
/* brand里面的hd 加相对定位 */
.brand .hd {position: relative;
}.brand .btn {position: absolute;top: 85px;right: 0;display: flex;}.brand .btn a {width: 20px;height: 20px;background-color: #e2e2e2;margin-left: 12px;text-align: center;line-height: 20px;color: #fff;
}.brand .btn .btnright {background-color: var(--lv);
}

11.热门品牌-内容

HTML结构
<!-- 热门品牌 brand --><div class="brand"><div class="wrapper"><!-- hd  --><div class="hd"><h2>热门品牌<span>国际经典 品质认证</span></h2><!-- 按钮   button--><div class="btn"><a href="javascript:;" class="btnleft"><i class="iconfont icon-arrow-left-bold"></i></a><a href="javascript:;" class="btnright"><i class="iconfont icon-arrow-right-bold"></i></a></div></div><!-- bd  --><div class="bd"><ul><li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li><li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li><li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li><li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li><li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li></ul></div></div></div>

 

CSS样式
/* 热门品牌 */
.brand {height: 468px;background-color: #f5f5f5;margin-top: 50px;
}/* brand里面的hd 加相对定位 */
.brand .hd {position: relative;
}.brand .btn {position: absolute;top: 80px;right: 0;display: flex;}.brand .btn a {width: 20px;height: 20px;background-color: #e2e2e2;margin-left: 12px;text-align: center;line-height: 20px;color: #fff;
}.brand .btn .btnright {background-color: var(--lv);
}.brand .bd li {width: 244px;height: 306px;
}

12.生鲜-标题

HTML结构
<!-- 生鲜模块 --><div class="wrapper"><!-- 上侧 hd  --><div class="hd"><h2>生鲜</h2><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></ul><a href="#" class="all">查看全部<i class="iconfont icon-arrow-right-bold"></i></a></div></div>
CSS样式
/* 生鲜 */
.hd ul {display: flex;
}

13.生鲜头部制作完成

html
 <!-- 上侧 hd  --><div class="hd"><h2>生鲜</h2><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><li><a href="#">饮料</a></li></ul><a href="#" class="all">查看全部<i class="iconfont icon-arrow-right-bold"></i></a></div>
css  
/* 让生鲜模块里面的li 一行显示 */
.hd ul {display: flex;margin-right: 65px;
}.hd ul li {margin-right: 13px;
}.hd ul li a {padding: 0 5px;
}/* 鼠标经过添加底色和文字颜色 */
.hd ul li a:hover {background-color: var(--lv);color: #fff;
}.fresh .hd h2 {flex: 1;
}

14.生鲜-内容布局

HTML结构
<!-- 内容区域 -->
<div class="content"><div class="left"><a href="#"><img src="./uploads/fresh_left.png" alt=""></a></div><div class="right"></div>
</div>
CSS样式
/* 生鲜内容 */
/* 内容区域 */
.fresh .content {display: flex;justify-content: space-between;
}.fresh .content .left {width: 248px;height: 610px;/* background-color: pink; */
}.fresh .content .right {width: 968px;height: 610px;background-color: skyblue;
}

15.生鲜-内容小li搭建

html
<div class="right"><ul><li>1</li></ul>
</div>
css  
.fresh .content .right {width: 968px;height: 610px;background-color: skyblue;
}.fresh .content .right ul {display: flex;/* 强制换行 */flex-wrap: wrap;
}.fresh .content .right li {width: 242px;height: 304px;background-color: pink;/* 颜色透明 transparent */border: 2px solid transparent;
}.fresh .content .right li:hover {/* border: 2px solid var(--lv); */border-color: var(--lv);
}

16.生鲜-产品内容

HTML结构
 <!-- 内容区域 --><div class="content"><div class="left"><a href="#"><img src="./uploads/fresh_left.png" alt=""></a></div><div class="right"><ul><li><a href="#"><!-- 图片 --><div class="pic"><img src="./uploads/fresh1.png" alt=""></div><!-- 信息 --><div class="info"><h5>双味千层，手抓饼烤肉组合</h5><p>240g/袋 4片装</p><p>加热即食</p></div><!-- 价格  --><div class="price">¥ <span>88.99</span></div></a><!-- 发现更多宝贝 --><div class="find"><h4>找相似</h4><a href="#">发现更多宝贝<i class="iconfont icon-arrow-right-bold"></i></a></div></li></ul></div></div>
CSS样式
/* 内容区域 */
.fresh .content {display: flex;justify-content: space-between;
}.fresh .content .left {width: 248px;height: 610px;/* background-color: pink; */
}.fresh .content .right {width: 968px;height: 610px;/* background-color: skyblue; */
}.fresh .content .right ul {display: flex;/* 强制换行 */flex-wrap: wrap;
}.fresh .content .right li {overflow: hidden;position: relative;width: 242px;height: 304px;/* background-color: pink; *//* 颜色透明 transparent */border: 2px solid transparent;}.fresh .content .right li:hover {/* border: 2px solid var(--lv); */border-color: var(--lv);
}.fresh .content .right li>a {display: block;height: 100%;padding: 10px 0 0 20px;
}.fresh .content .pic {width: 200px;height: 180px;background-color: purple;
}.fresh .content .info {margin-top: 14px;font-size: 16px;line-height: 19px;}.fresh .content .info h5 {font-size: 16px;
}.fresh .content .price {margin-top: 5px;font-size: 15px;color: #AF2F22;
}.fresh .content .price span {font-size: 22px;
}.fresh .content .find {position: absolute;left: 0;bottom: -84px;width: 242px;height: 84px;background-color: var(--lv);padding: 15px 55px 0;text-align: center;/* 谁做动画（过渡）给谁加 */transition: all .3s;
}.fresh .content .right li:hover .find {bottom: 0;
}.fresh .content .find h4 {border-bottom: 2px solid rgba(255, 255, 255, 0.11);color: #fff;padding-bottom: 4px;margin-bottom: 4px;font-size: 18px;
}.fresh .content .find a {color: #fff;font-size: 13px;
}.fresh .content .find a i {font-size: 13px;
}
快捷键

全部折叠：

先按 ctrl + k 接着 ctrl + 0

全部展开：

ctrl+ k 接着 ctrl+ j

17.最新专题-布局

HTML结构
<!-- 最新专题 -->
<!-- 最新专题 --><div class="wrapper news"><!-- 上侧 hd  --><div class="hd"><h2>最新专题</h2><a href="#" class="all">查看全部<i class="iconfont icon-arrow-right-bold"></i></a></div><!-- 下部分 bd  --><div class="bd"><ul><li><div class="pic"><img src="./uploads/topic1.png" alt=""></div></li></ul></div></div>
 CSS样式
/* 最新专题 */
/* 最新专题 */
.news {margin-bottom: 50px;
}.news .bd ul li {width: 405px;height: 355px;background-color: pink;
}.news .bd ul li .pic {width: 405px;height: 288px;background-color: skyblue;
}

18.最新专题-内容

HTML结构
<ul><li><a href="#"><div class="pic"><img src="./uploads/topic1.png" alt=""></div><div class="txt"><div class="left"><p><i class="iconfont icon-favorites-fill"></i><span>1220</span></p><p><i class="iconfont icon-browse"></i><span>1800</span></p></div><div class="right"><p><i class="iconfont icon-comment"></i><span>246</span></p></div></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/topic2.png" alt=""></div><div class="txt"><div class="left"><p><i class="iconfont icon-favorites-fill"></i><span>1220</span></p><p><i class="iconfont icon-browse"></i><span>1800</span></p></div><div class="right"><p><i class="iconfont icon-comment"></i><span>246</span></p></div></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/topic3.png" alt=""></div><div class="txt"><div class="left"><p><i class="iconfont icon-favorites-fill"></i><span>1220</span></p><p><i class="iconfont icon-browse"></i><span>1800</span></p></div><div class="right"><p><i class="iconfont icon-comment"></i><span>246</span></p></div></div></a></li>
</ul>
CSS样式
.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;
}

 

19.最新专题完成

html
 <!-- 最新专题 --><div class="wrapper news"><!-- 上侧 hd  --><div class="hd"><h2>最新专题</h2><a href="#" class="all">查看全部<i class="iconfont icon-arrow-right-bold"></i></a></div><!-- 下部分 bd  --><div class="bd"><ul><li><!-- 图片区域 --><div class="pic"><img src="./uploads/topic1.png" alt=""><div class="txt"><div class="left"><h5>吃这些美食才不算辜负自己</h5><p>餐厨起居洗护好物</p></div><div class="right">¥29.99</div></div></div><!-- 说明区域 --><div class="desc"><p><span><i class="iconfont icon-fabulous"></i>1200</span><span><i class="iconfont icon-browse"></i>1800</span></p><p><span><i class="iconfont icon-comment"></i>246</span></p></div></li><li><!-- 图片区域 --><div class="pic"><img src="./uploads/topic2.png" alt=""><div class="txt"><div class="left"><h5>吃这些美食才不算辜负自己</h5><p>餐厨起居洗护好物</p></div><div class="right">¥29.99</div></div></div><!-- 说明区域 --><div class="desc"><p><span><i class="iconfont icon-fabulous"></i>1200</span><span><i class="iconfont icon-browse"></i>1800</span></p><p><span><i class="iconfont icon-comment"></i>246</span></p></div></li><li><!-- 图片区域 --><div class="pic"><img src="./uploads/topic3.png" alt=""><div class="txt"><div class="left"><h5>吃这些美食才不算辜负自己</h5><p>餐厨起居洗护好物</p></div><div class="right">¥29.99</div></div></div><!-- 说明区域 --><div class="desc"><p><span><i class="iconfont icon-fabulous"></i>1200</span><span><i class="iconfont icon-browse"></i>1800</span></p><p><span><i class="iconfont icon-comment"></i>246</span></p></div></li></ul></div></div>
css
/* 最新专题 */
.news {margin-bottom: 50px;
}.news .bd ul li {width: 405px;height: 355px;background-color: #fff;
}.news .bd ul li .pic {position: relative;width: 405px;height: 288px;/* background-color: skyblue; */
}.news .pic .txt {position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;align-items: center;width: 405px;height: 90px;/* background-color: skyblue; */padding: 20px 15px 0;text-align: left;/* 渐变色  从红色到绿色  竖着*//* background-image: linear-gradient(red, green); *//* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); */background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}.news .pic .txt h5 {font-size: 20px;color: #fff;margin-bottom: 5px;
}.news .pic .txt .left p {color: #fff;
}.news .pic .right {width: 79px;height: 25px;background-color: #fff;text-align: center;line-height: 25px;color: #AA2113;
}.news .bd .desc {display: flex;justify-content: space-between;padding: 20px 15px;}.news .bd .desc p span {color: #666;font-size: 14px;margin-right: 5px;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2780522.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

TikTok：短视频时代的崛起

TikTok：短视频时代的崛起

导言&#xff1a; TikTok&#xff0c;作为一款全球短视频社交应用&#xff0c;正风靡全球&#xff0c;引领着数字娱乐的新潮流。其简洁的用户界面、创意无限的短视频内容&#xff0c;以及强大的社交互动功能&#xff0c;使其成为全球数以亿计的用户喜爱的平台。 TikTok的特点&a…
阅读更多...
特征工程:特征构建

特征工程:特征构建

目录 一、前言 二、正文 Ⅰ.分类特征重新编码 ①分类特征 ②离散特征 ③多标签类别编码 Ⅱ.数值特征重新编码 ①多项式 ②多个变量的多项式特征 Ⅲ.文本数据的特征构建 ①文本词频条形图 ②词袋模型 ③TF-IDF矩阵 三、结语 一、前言 特征工程中的特征构建的主要目的是生…
阅读更多...
分享88个时间日期JS特效，总有一款适合您

分享88个时间日期JS特效，总有一款适合您

分享88个时间日期JS特效&#xff0c;总有一款适合您 88个时间日期JS特效下载链接&#xff1a;https://pan.baidu.com/s/16UhIi4d42AkUN5uj2oGFFw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…
阅读更多...
LeetCode Python - 10.正则表达式匹配

LeetCode Python - 10.正则表达式匹配

文章目录 题目答案运行结果 题目 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 ‘.’ 匹配任意单个字符 ‘*’ 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分…
阅读更多...
Linux中pipe管道操作

Linux中pipe管道操作

管道的读写操作&#xff1a; 读操作&#xff1a; ​​​有数据&#xff1a;read正常读&#xff0c;返回读出的字节数无数据&#xff1a;1 写段全部关闭&#xff1a;read解除阻塞&#xff0c;返回0&#xff0c;相当于文件读到了尾部 2 写段没有全部关闭&#xf…
阅读更多...
漂亮不是工业HMI的追求？我劝你，这个想法要变了

漂亮不是工业HMI的追求？我劝你，这个想法要变了

对于工业HMI&#xff08;Human Machine Interface&#xff09;来说&#xff0c;漂亮并不是唯一的追求&#xff0c;但它仍然是一个重要的方面。在工业环境中&#xff0c;HMI的设计需要考虑到使用者的工作效率和安全性&#xff0c;因此功能性和易用性是首要考虑的因素。然而&…
阅读更多...
分享89个时间日期JS特效，总有一款适合您

分享89个时间日期JS特效，总有一款适合您

分享89个时间日期JS特效&#xff0c;总有一款适合您 89个时间日期JS特效下载链接&#xff1a;https://pan.baidu.com/s/127_keimOfy_AKrCNT4TQNA?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…
阅读更多...
Python 中的异步编程：提升程序性能的利器

Python 中的异步编程：提升程序性能的利器

随着互联网应用的迅猛发展&#xff0c;越来越多的应用程序需要处理大量的并发请求。传统的同步编程模型在处理大量并发请求时往往效率低下&#xff0c;造成程序响应速度变慢。为了解决这个问题&#xff0c;Python 提供了异步编程这一强大的工具&#xff0c;可以在单线程环境下实…
阅读更多...
JavaScript资源加载：onload，onerror

JavaScript资源加载：onload，onerror

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 资源加载 是 web 开发中的一个重要概念&#xff0c;指的是浏览器加载…
阅读更多...
CSP-202312-2-因子化简（质数筛法）

CSP-202312-2-因子化简（质数筛法）

CSP-202312-2-因子化简 一、质数筛法 主流的质数筛法包括埃拉托斯特尼筛法&#xff08;Sieve of Eratosthenes&#xff09;、欧拉筛法&#xff08;Sieve of Euler&#xff09;、线性筛法&#xff08;Linear Sieve&#xff09;等。这些算法都用于高效地生成一定范围内的质数。 …
阅读更多...
C++ Qt框架开发| 基于Qt框架开发实时成绩显示排序系统（1）

C++ Qt框架开发| 基于Qt框架开发实时成绩显示排序系统（1）

目标&#xff1a;旨在开发一个用户友好的软件工具&#xff0c;用于协助用户基于输入对象的成绩数据进行排序。该工具的特色在于&#xff0c;新输入的数据将以红色高亮显示&#xff0c;从而直观地展现出排序过程中数据变化的每一个步骤。 结果展示&#xff1a; 本程序是一个基于…
阅读更多...
aardio 编辑GUI界面，调用 python 脚本示例

aardio 编辑GUI界面，调用 python 脚本示例

aardio 中调用 python 的方法有两种&#xff0c;py3 和 process.python 模块 py3 模块&#xff1a;如果经常要拿到python返回的值或从aardio中传数据给python去处理&#xff0c;aardio和python的交互比较多的话&#xff0c;可以考虑使用py3模块&#xff0c;缺点是&#xff1a;p…
阅读更多...
java学习07---综合练习

java学习07---综合练习

飞机票 1.需求: 机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。 按照如下规则计算机票价格&#xff1a;旺季&#xff08;5-10月&#xff09;头等舱9折&#xff0c;经济舱8.5折&#xff0c;淡季&#xff08;11月到来年4月&#xff09;头等舱7…
阅读更多...
Linux笔记之xhost +和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解

Linux笔记之xhost +和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解

Linux笔记之xhost 和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解 ——2024-02-11 code review! 文章目录 Linux笔记之xhost 和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解xhost 的作用xhost 与 Docker 的关系 -e GDK_SCALE 和 -e GDK_DPI_SCALE详解GDK_SCALEGDK_DPI_SC…
阅读更多...
ClickHouse--03--数据类型

ClickHouse--03--数据类型

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 数据类型1. Int2.FloattoFloat32(...) 用来将字符串转换成 Float32 类型的函数toFloat64(...) 用来将字符串转换成 Float64 类型的函数 3.DecimaltoDecimal32(value…
阅读更多...
学习Android的第十天

学习Android的第十天

目录 Android CheckBox 复选框 获得选中的 CheckBox 的值 自定义点击效果 改变文字与选择框的相对位置 修改文字与选择框的距离 Android ToggleButton 开关按钮 改变 ToggleButton 的状态和文本 Android Switch 开关 改变 Switch 的状态和文本 Android CheckBox 复选框…
阅读更多...
Python 3 中使用 pandas 和 Jupyter Notebook 进行数据分析和可视化

Python 3 中使用 pandas 和 Jupyter Notebook 进行数据分析和可视化

简介 Python 的 pandas 包用于数据操作和分析&#xff0c;旨在让您以直观的方式处理带标签或关联数据。 pandas 包提供了电子表格功能&#xff0c;但由于您正在使用 Python&#xff0c;因此它比传统的图形电子表格程序要快得多且更高效。 在本教程中&#xff0c;我们将介绍如…
阅读更多...
深入解析大型数据中心云平台的网络技术与实践

深入解析大型数据中心云平台的网络技术与实践

最简单的总结 SDN主流选择了OverLay。虚拟集群的规模(非物理机所能比拟) 使得Vxlan的组播传播&#xff08; 虚拟机构成的集群包含的 MAC 地址数量往往多一两个数量级 MAC地址表 &#xff09;对网络设备性能要求巨大(你不可能每个交换机都买核心交换机一样的配置吧&#xff09;…
阅读更多...
ZigBee学习——在官方例程实现组网

ZigBee学习——在官方例程实现组网

✨Z-Stack版本&#xff1a;3.0.2 ✨IAR版本&#xff1a;10.10.1 ✨这篇博客是在善学坊BDB组网实验的基础上进行完善&#xff0c;并指出实现的过程中会出现的各种各样的问题&#xff01; 善学坊教程地址&#xff1a; ZigBee3.0 BDB组网实验 文章目录 一、基础工程选择二、可能遇…
阅读更多...
力扣刷题之旅：高阶篇（一）—— 并查集的应用

力扣刷题之旅：高阶篇（一）—— 并查集的应用

力扣&#xff08;LeetCode&#xff09;是一个在线编程平台&#xff0c;主要用于帮助程序员提升算法和数据结构方面的能力。以下是一些力扣上的入门题目&#xff0c;以及它们的解题代码。 --点击进入刷题地址 引言 在算法的世界中&#xff0c;并查集是一种非常高效且实用的数…
阅读更多...
最新文章

Copyright @ 2022~2023