![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 69
凡梦_leo
这个作者很懒,什么都没留下…
展开
-
CSS实操三,运用浮动和定位实现照片墙效果
7,不同的小姐姐图片角度不同,所以我们需要transform:rotate(角度deg)去调整。1,不同的美女图片堆叠的顺序不同,所以需要用定位里面的z-index。3,每个美女的图片摆放的位置不同,需要用到定位 然后摆放他们位置。4,图片的位置不同,也运用一下浮动和清楚浮动,以免影响后续内容。2,超出容器的部分隐藏了,所以需要格外给容器设置一下。6,图片整体大小做了优化。5,图片边框做了优化。原创 2023-06-28 16:25:54 · 837 阅读 · 1 评论 -
CSS实操,运用浮动和定位实现商品购物免息和优惠等堆叠框
做出类似这种效果:分析以上图1,有4个不同的手机品牌 分别实现了不同的堆叠效果 ,图片素材还有字体可以只有更换,懒得找素材,就用网上的一张图片代替。2,比如免息。优惠。待定,和待定2,运用了定位知识点3,p文字实现了超出部分用...代替4,底层效果和内部4个容器运用了浮动知识点。原创 2023-06-28 15:34:38 · 208 阅读 · 1 评论 -
CSS实操二,网页导航(运用浮动去实现,并且清除浮动带来的弊端影响)
一个网页导航,鼠标滑动上去有其他不同的效果。原创 2023-06-28 14:15:37 · 99 阅读 · 1 评论 -
CSS实操一,实现商城购物模块(实战知识点。最基础css+div实现)
图片地址请自行更换本地的地址。原创 2023-06-28 14:12:12 · 168 阅读 · 1 评论 -
CSS基础笔记九,浮动(如何处理浮动带来的堆叠和浮动影响其他元素)
浮动的介绍:1,浮动是通过增加一个浮动层级来放置内容。2,浮动使元素脱离了文档流,浮动只有左右浮动,无上下浮动3,浮动的开启:float:left/right4,当多个文件浮动的时候,就会自动排列了,从左往右/从右往左5,如果横向摆放,容器摆放不开,会自动换行浮动优点和缺点。浮动的优点,是可以让我们更加方便的去摆放一个容器内部的子容器,更加好的去设置他们的摆放位置。缺点:1,浮动会造成父级元素的塌方2,后续的元素会受到浮动影响。原创 2023-06-28 14:06:14 · 550 阅读 · 1 评论 -
CSS基础笔记八,display属性详解(变成弹性盒子flex,隐藏none,变成块级元素bolck,变成行内元素inline,变成行内块级元素inlen-bolck)
前瞻:display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1,更改属性使其隐藏 display:none 隐藏自己,不保留原来的位置2,bisbility:hidden 隐藏自己,保留原来位置3,opacity :0 背景虚化 虚化到0的时候 自然就隐藏了,隐藏自己 保留原来的位置。原创 2023-06-28 13:32:29 · 2237 阅读 · 1 评论 -
CSS基础笔记七,怪异盒子和弹性盒子(弹性盒子的属性,子容器镜像(flex-direction),水平(justify-content),垂直(align-itmes),子容器的权重(flex-数))
标准盒子模型,外边距(margin),内边距(padding),线宽(border),内容。内边距和线框会撑开容器怪异盒子模型,外边距(margin),内边距(padding),线框(border),内容。内边距和相框会压缩容器怪异盒子的开启,box-siziing:bober-box 把标准盒子变成怪异盒子content-box 把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型,可以更改子容器在父级容器的平均摆放距离开启:display-flex子容器会自动横向摆放。原创 2023-06-28 13:05:45 · 2781 阅读 · 3 评论 -
CSS基础笔记六,DIV盒子模型(content内容,内边距paddins,边框border,外边距margin)
盒子模型分为四个区域内容,可以往里面安放的元素内边距padding(可以用像素填充,也可以用百分比,还可以指定上下左右的不同的款式),简写模式,1个值的情况下 就是上下左右 四个值是上右下左边框border边框的样式 有实线(solid),虚线(dashed),双实线(double),点线(dotted)border-width 指定边框的宽度边框可以设置圆角(border-rddius) 用百分比或者像素边框的不同方位 border-left/top/rigth/bottom。原创 2023-06-28 12:31:50 · 1690 阅读 · 1 评论 -
CSS基础笔记五。属性选择器(属性里面选择元素的值,有开头,结尾,包含,和固定值等选择)
1,基础选择器(全局*, 元素, id#, 类., 合并,)2,关系选择器(后代空格,子代大于,相邻兄弟加号,通用兄弟波浪号)3,伪类选择器(鼠标的四种状态爱恨类别(link,visted,hover,active),列表的多种选择(first-child,last-child,nth-child(n/odd/even)),容器内为空(empty)/唯一(only-child)/除了某个(not(元素)),元素为焦点的时候(focus),多选和复选增强(checked))原创 2023-06-28 12:10:38 · 1724 阅读 · 1 评论 -
CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)
选择器分类1,基础选择器: 全局选择器 元素选择器 类选择器 id选择器 合并选择器2,关系选择器 后代选择器 子代选择器 相邻兄弟选择器 通用兄弟选择器3,伪类选择器鼠标点击状态选择器(4个状态)(爱恨离别 link visited hover active)让列表中任何一个值 想选谁就选谁(first-child)当容器只有以一个值的时候就生效的选择器 only-child当容器除了他其他都生效的选择器 not(她)当标签为空的时候,就生效的选择器 empty。原创 2023-06-28 11:38:30 · 2718 阅读 · 2 评论 -
CSS基础笔记三,关系选择器(后代选择器,子代选择器,相邻兄弟选择器,通用兄弟选择器)
关系选择器原创 2023-06-27 15:36:23 · 1581 阅读 · 1 评论 -
CSS基础笔记二, 属性篇(字体属性,背景属性,文本属性,列表属性,表格属性,其他属性)
1,字体属性 ,可以对字体做各种样式美化1,常用的有对字体设置颜色(color)2,修改字体大小(font-size)3,修改字体粗细(font-weihgt)4,设置字体样式(斜体是italic)5,设置字体类型(微软雅黑,宋体等等 font-family)2,背景属性,可以添加背景,对背景做各种样式美化,调整尺寸大小等等1,添加背景图片 background-image2,给背景添加颜色 background-color3,修改背景图片大小 background-size。原创 2023-06-27 15:26:09 · 908 阅读 · 1 评论 -
CSS基础笔记一(三种引入方式,三种特征,多个选择器,网页常见布局css+div实现)
选择器的优先级原创 2023-06-27 14:23:12 · 784 阅读 · 1 评论