PYG-MAIN

作者: 山猪打不过家猪 | 来源:发表于2022-10-30 11:50 被阅读0次

1.主体

image.png

1.1焦点图

中心轮播图

            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/banner1.jpg" alt="">
                    </li>
                </ul>
            </div>

注意：一定记得给子类添加高度和宽度

1.2news新闻模块

image.png

新闻标题超出li的长度可以

image.png

1.3生活模块

生活模块12个li 测量好宽度和高度以及边框的时候，进行左浮动，会出现一个问题，父盒子宽度不够，浮动的盒子会自动往下

image.png

解决：给li的父亲ul添加一个宽度，刚好可以放下一行四个的要求，粉色为ul
image.png
但是这么写完后，还有一个问题
image.png
解决：给被超出的盒子添加一个overflow:hidden，这里liveservice被超出了，所以给他添加
image.png

1.4 今日推荐

图片竖线的添加方式，这里可以看出来，竖线的高度是远远小于他的盒子的高度的，所以这里不能使用border来设置了，使用after伪类元素
image.png

image.png

1.5 猜你喜欢

image.png

tab栏切换布局需求

image.png
image.png
这里6个li，测量出来左边空白处12px，中间空白出10px，所以，给ul一个padding-left，给li一个margin-right

image.png
右竖线，给div一个border-right，下边框给a一个border-bottom，一般情况下，a包含有宽度的盒子，要转为块

2.列表页

image.png

2.1列表页头部

image.png

秒杀图片,放到一个盒子里，然后使用相对定位
1，是3个li包a，给a一个宽度，然后padding调整文字的间隔
2，是7个li，方法和上面的一样，但是左边文字和右边文字要对齐，设置文字的行高大于盒子的高度，但是他会超出盒子一部分高度

image.png
这种情况，和上面的切掉超出的部分一样，加一个overflow:hidden

2.1 列表页主体

image.png

商品全是li浮动，
image.png
这里边框会有一个BUG，原先没有border，但是鼠标hover后，添加了边框，所以图片会抖动，所以，原先就要个li添加一个无色的框border:1px solid transparent，鼠标移动只是改变了边框的颜色
image.png
overflow:hidden 解决了边框超出，只有一边显示的问题
多个li摆放在一排的时候，因为有了margin 导致一行宽度超出，所以需要个最后一个li去掉margin-right，使用选择器选择，4,8,12，li:nth-child(4n)