尚优选项目

wake up　

已于 2022-11-14 07:29:08 修改

阅读量1k

点赞数 1

分类专栏：尚优选文章标签： css 前端 css3

于 2022-10-26 08:36:46 首次发布

本文链接：https://blog.csdn.net/m0_69167751/article/details/127525343

版权

本文详细介绍了尚优选项目的前端开发，重点在于导航的实现，包括导航条的颜色和宽度设置，以及解决文字间距和缝隙问题。此外，文章还详细讲解了放大镜效果的布局搭建，包括鼠标移入移出、拖拽效果和大图等比例移动的实现。

摘要由CSDN通过智能技术生成

头部整体页面布局

在这里插入图片描述

导航(重点)

思路：html + css 结构为一层层包裹型(从大到小)
大的用id(#) 小的用class(.)
结构划分明确
版心的代码冗余太多了，直接在公共样式里设置使用就好
即使代码写好也要到浏览器中右键进行检查

重点：设置导航条颜色宽度
在这里插入图片描述
效果图

文字偏小还自动加粗(H5)
在这里插入图片描述
效果图

a标签两个元素中仅有一个要设置属性
a标签两个元素中仅有一个要设置属性,使用&引用当前元素(a)里面的first-child{}他的第一个孩子

水平居中
margin: 0(上下方向为0) auto(左右为auto);

按住less ctrl+s原地复制出css
在这里插入图片描述

先引入公共文件,再引入自己所写的
在这里插入图片描述

解决所有的高度塌陷问题
当父元素中有子元素开启了浮动定位,会让父元素高度塌陷
解决所有的高度塌陷问题,让overflow: hidden让他变成一个公共的,在css中创建文件夹mixins写成一个混合函数，在css的less中调用

清除两侧浮动,让他显示出来内容为空
在这里插入图片描述
clear.less

css中的less调用
@import ‘xxx/xxx.xxx’;
需要时调用函数即可
在这里插入图片描述

在这里插入图片描述

问题：文字间距过大,最后一个元素(文字)没有竖线
解决：间距过大
在这里插入图片描述
解决：最后一个元素没有竖线

问题：文字与文字间都有缝隙
原因：a标签为行标签(行标签中默认会有边距)

解决：给父元素中添加一个font-size: 0px;(文字大小设置为0),设置后默认a标签内容就找不到了,再单独的给a自己加文字大小
在这里插入图片描述