CSS：251-374

最新推荐文章于 2023-12-22 15:35:33 发布

Mr JackZhang

最新推荐文章于 2023-12-22 15:35:33 发布

阅读量73

点赞数

分类专栏：前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45656377/article/details/117730721

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

文本域一定要写在一行，不然会有一大片空白区域

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

问题是
在这里插入图片描述
想要的效果

原理是先对第一个盒子浮动然后-1px，紧接着第二个盒子浮动然后-1px进行渲染的

在这里插入图片描述

在这里插入图片描述
浮动盒子不会压住标准流文字

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

兼容性考虑浏览器由上至下检索支持的文件进行播放

小米的视频加载图片链接

在这里插入图片描述

在这里插入图片描述

谷歌会禁用自动播放，ie

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

父盒子插入子盒子

实际也是创建盒子（这个盒子是行内元素）

在这里插入图片描述

删除内部div，添加如下样式

在这里插入图片描述

再次变大

以前会掉头减padding减board

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

第一步是切出图标

在这里插入图片描述
竖线也是li盒子，距离通过左右margin值控制，竖线通过li盒子缩小到1px实现

在这里插入图片描述

下三角小图标有两种方式，一种是套个盒子，一种是伪元素

以前是放图片进去，实际开发并不是，要考虑如下制作方式

在这里插入图片描述

京东的做法

淘宝的做法，让数字往一个方向移动出盒子，然后加overflow切掉

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

给a加浮动这样通过padding撑开时点击空白区域也会触发连接

在这里插入图片描述

会压住要显示的区域

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

头部和底部是每个页面的公共部分也就是不变的包括html结构和css样式，所以放到common.css。现在开始做特异化的部分

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

轮播图放在li里面通过js实现点击翻页

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

去掉.news{color:“pink”}属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

限制后台乱传图片大小，只会按这个大小显示，

在这里插入图片描述

tab栏切换要等学完js才能去做

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

里面所有元素都会居中

在这里插入图片描述

最大的盒子不要给高度，让它自己撑开

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

优化：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

overflow隐藏溢出的其他盒子部分

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

因为是透明的图所以看不到

在这里插入图片描述
闪烁的小圆点是div定位到某个位置

在这里插入图片描述

为什么不用scale放大是因为会把box-shadow阴影一起放大

因为有div的移动所以有定位

在这里插入图片描述

在这里插入图片描述
效果必须借助透视才能看

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：251-374

文本域一定要写在一行，不然会有一大片空白区域问题是想要的效果原理是先对第一个盒子浮动然后-1px，紧接着第二个盒子浮动然后-1px进行渲染的浮动盒子不会压...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。