品优购:nav导航、footer部分

                    目录

footer部分


nav盒子通栏有高度,有下边框
1号盒子左浮动,dropdown
2号盒子左侧浮动,navitems导航栏组

先看dropdown里,先表头,这里意思是description term, 然后是一系列表格内容,其中text-align,line-height调整

整个盒子距离边框有2px距离,此外文字距离盒子要有10px padding值

利用伪元素以及icomoon字体图标设置小三角,利用absolute定位三角

当鼠标经过后字体要变色背景要变色,字体变色通过li:hover a来表示,意思是鼠标经过后a里字有变化

.nav {height: 47px;border-bottom: 2px solid red;
}.nav .dropdown {float: left;height: 45px;width: 210px;background-color: red;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd {display: none;width: 210px;height: 465px;background-color: red;}.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;padding-left: 10px;margin-left: 2px;color: #fff;
}.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;font-family: 'icomoon';content: '\e920';
}.dropdown .dd ul li:hover a {/* 表示鼠标经过后a变颜色 */color: red;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.navitems ul li {float: left;
}
<div class="dropdown"><div class="dt">全部商品样式</div><div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="#">手机</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></ul></div></div>

navitems用无序列表写,他们都是并列的,文字要垂直居中,防止文字个数不一样,使用margin,最好给a,这样用户点击链接跳转范围大

.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}

footer部分


准备modify-service大盒子给下边框,一共1200,让每个li浮动,指定padding-left
对于盒子右边有文字的情况,让盒子浮动,文字自然就环绕了
这里盒子背景是精灵图,定位通过坐标。

准备.mod_help大类,注意这里盒子间间距通过宽度来设置,每个盒子都由data list组成,但是最后一个list因此会掉下去,通过last-child选中后重新设置宽度。

.footer {padding-top: 30px;height: 415px;background-color: #f5f5f5;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 300px;height: 50px;/* background-color: pink; */padding-left: 30px;/* 盒子右边有文字的情况,让盒子浮动,文字自然就围绕了 */
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;/* background-color: purple; */background: url(../images/icons.png) no-repeat -252px -3px;/* 这里好离谱,向左侧是负的越大,向下侧是负的越小 */margin-right: 8px;
}.service_txt h4 {font-size: 14px;
}.service_txt p {font-size: 12px;
}.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}.mod_help dl {float: left;/* 间距通过设置宽度 */width: 200px;
}.mod_help dl:last-child {width: 90px;text-align: center;}.mod_help dl dt {/* definition list定义列表,term,definition */font-size: 16px;margin-bottom: 10px;}.mod_help dl dd {font-size: 14px;
}
<footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><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><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><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><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><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd></dl><dl><dt>服务指南</dt><dd><img src="images/wx_cz.jpg">品优购客户端</dd></dl></div>


版权部分,links里设置好边距后copyright部分设置行高,links里的链接之间设置margin

<div class="mod_copyright"><div class="links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</div><div class="copyright">地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn京ICP备08001421号京公网安备110108007702</div></div>
.mod_copyright {text-align: center;padding-top: 20px;/* 首先所有文字都居中 */
}.links {margin-bottom: 15px;}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}


 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python基础练习题库实验5

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6058fb4b66994aed838f920f7fe75706.png)题目4代码实验结果题目总结题目1 编写一个程序,使用while循环语句和字符串格式显示以下精确输出。 例如: …

Linux命令进阶——grep管道命令在查看日志的场景中的使用 具体案例

前言 本篇博客介绍在查看日志的场景中&#xff0c;grep管道命令的使用&#xff0c;并给出了具体的案例。 以下为Linux相关的博客文章列表&#xff1a; Linux——认识Linux的目录结构 & 常用命令 & vim命令 & 权限及其控制 & 防火墙命令 & 自定义命令 &a…

2023年【广东省安全员B证第四批(项目负责人)】证考试及广东省安全员B证第四批(项目负责人)复审模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年广东省安全员B证第四批&#xff08;项目负责人&#xff09;证考试为正在备考广东省安全员B证第四批&#xff08;项目负责人&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的广东省安全员B证…

SpringBoot——模板引擎及原理

优质博文&#xff1a;IT-BLOG-CN 一、模板引擎的思想 模板是为了将显示与数据分离&#xff0c;模板技术多种多样&#xff0c;但其本质都是将模板文件和数据通过模板引擎生成最终的HTML代码。 二、SpringBoot模板引擎 SpringBoot推荐的模板引擎是Thymeleaf语法简单&#xff0…

如何进行无代码开发?有哪些无代码开发工具和无代码软件开发平台?

无代码开发是指不写代码&#xff0c;通过可视化工具进行应用程序开发。无代码开发让非技术用户通过拖拽和选择等简单操作&#xff0c;就能快速创建应用程序。 如何学习无代码开发 随着科技的不断发展&#xff0c;新的技术和工具不断涌现&#xff0c;无代码开发就是其中一种。掌…

YOLOv5算法进阶改进(5)— 主干网络中引入SCConv | 即插即用的空间和通道维度重构卷积

前言:Hello大家好,我是小哥谈。SCConv是一种用于减少特征冗余的卷积神经网络模块。相对于其他流行的SOTA方法,SCConv可以以更低的计算成本获得更高的准确率。它通过在空间和通道维度上进行重构,从而减少了特征图中的冗余信息。这种模块的设计可以提高卷积神经网络的性能。�…

代码随想录二刷 | 哈希表 | 总结篇

代码随想录二刷 &#xff5c; 哈希表 &#xff5c; 总结篇 理论基础哈希表经典题目数组作为哈希表set作为哈希表map作为哈希表 理论基础 一般来说哈希表都是用来快速判断一个元素是否出现集合里。 对于哈希表&#xff0c;要知道哈希函数和哈希碰撞在哈希表中的作用。 哈希函…

Redis常用操作及应用(二)

一、Hash结构 1、常用操作 HSET key field value //存储一个哈希表key的键值 HSETNX key field value //存储一个不存在的哈希表key的键值 HMSET key field value [field value ...] //在一个哈希表key中存储多个键值对 HGET key fie…

Java代码的编译与执行过程

一、编译过程 1、javac 编译 Java源代码通过编译器&#xff08;javac&#xff09;编译为字节码文件(.class)。 idea中的 build 和 maven package等指令都可以编译为 .class 2、类加载器(Class Loader) 类加载器负责将类的字节码文件加载到内存中&#xff0c;以便在运行时创…

数据在内存中的存储练习题

数据在内存中的存储练习题 文章目录 数据在内存中的存储练习题1. 练习一2.练习二3. 练习三4. 练习四5. 练习五6. 练习六7. 总结 1. 练习一 #include <stdio.h>int main() {char a -1;signed b -1;unsigned char c -1;printf("a %d b %d c %d", a, b, c)…

Java的特性

Java是一种广泛使用的编程语言&#xff0c;它具有许多独特的特性&#xff0c;包括简单易学、面向对象、可移植性、安全性、多线程等。下面我将对这些特性进行详细的介绍&#xff0c;并阐述它们的重要性。 一、简单易学 Java是一种相对容易学习的编程语言。它的语法简单明了&…

人工智能|机器学习——机器学习如何判断模型训练是否充分

一、查看训练日志 训练日志是机器学习中广泛使用的训练诊断工具&#xff0c;每个 epoch 或 iterator 结束后&#xff0c;在训练集和验证集上评估模型&#xff0c;并以折线图的形式显示模型性能和收敛状况。训练期间查看模型的训练日志可用于判断模型训练时的问题&#xff0c;例…

C++ 泛型编程,函数模版和类模版

1.泛型编程 泛型编程&#xff1a;编写与类型无关的通用代码&#xff0c;是代码复用的一种手段。模板是泛型编程的基础 就比如说活字印刷术&#xff0c;就是提供一个模具&#xff0c;然后根据模具来印刷出不同的字。 泛型编程跟着类似&#xff0c;提供一个模版&#xff0c;根据这…

微服务--05--配置管理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 配置管理这些问题都可以通过统一的配置管理器服务解决。而Nacos不仅仅具备注册中心功能&#xff0c;也具备配置管理的功能&#xff1a; 1.配置共享1.1.添加共享配置…

【Spark基础】-- RDD 转 Dataframe 的三种方式

一、环境说明 Oracle JDK 11Scala 2.12.17Apache Spark 3.1.1Apache Hadoop 3.1.0 二、RDD 转 Dataframe 的方法 1、通过 StructType 创建 Dataframe(强烈推荐使用这种方法) /*** 方法一:通过 StructType 创建 Dataframe* @param spark SparkSession* @param rdd 输入* @…

【封装UI组件库系列】封装Button图标组件

封装UI组件库系列第四篇封装Button按钮组件 &#x1f31f;前言 &#x1f31f;封装Button组件 1.分析封装组件所需支持的属性与事件 支持的属性&#xff1a; 支持的事件&#xff1a; 2.创建Button组件 &#x1f31f;封装功能属性 type主题颜色 plain是否朴素 loading等…

方舟笔记:方舟开发框架概述

方舟笔记 方舟开发框架概述 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134677116 今年&#xff08;…

API接口测试工具的主要作用及选择指南

API接口测试是现代软件开发中至关重要的一环。为了确保不同组件之间的无缝集成和功能正常运作&#xff0c;API接口测试工具应运而生。本文将介绍API接口测试工具的主要作用&#xff0c;以及在选择适合项目的工具时需要考虑的因素。 1、功能测试&#xff1a;API接口测试工具的首…

Linux内存回收:LRU算法

linux操作系统再内存不足时会使用Swap机制&#xff0c;将一些不经常使用的匿名内存页放到磁盘当中&#xff0c;等下次需要时再读取到内存当中&#xff0c;而这个LRU算法就是用来选择把哪些不常使用的匿名内存页放到磁盘当中的。 LRU&#xff08;Least Recently Used&#xff09…

【面经八股】搜广推方向:面试记录(四)

【面经&八股】搜广推方向:面试记录(四) 文章目录 【面经&八股】搜广推方向:面试记录(四)1. 自我介绍2. 项目问答3. 八股4. 编程题4.1 大数加法4.2 平面最近点对问题求解5. 反问环节1. 自我介绍 。。。。。。 2. 项目问答 问的有点细。。。。。。 3. 八股 1)…