- 博客(57)
- 收藏
- 关注
原创 多行文本溢出显示省略号
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <!--多行文本溢出显示省略号,有较大兼容性问题,适用于webkit浏览器或移动端(移动端大部分是webkit内核)--> <!--建议让后台来做--> <title></title&
2021-12-06 14:20:43
436
原创 单行文本溢出显示省略号
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> div { width: 100px; height: 50px;
2021-12-06 14:20:14
259
原创 图片底侧会有一个空白缝隙问题
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> bug:图片底侧会有一个空白缝隙,原因是行内块元素和文字的基线对齐 主要的解决方法有两种: 1.给图片添加vertical-align:middle|top|bo
2021-12-06 14:19:22
315
原创 css的vertical-align属性
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--css的vertical-align属性使用场景: 常用于设置图片或着表单(行内块元素)和文字垂直对齐--> <!--官方解释:用于设置一个元素
2021-12-06 14:18:45
334
原创 CSS轮廓线
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> input,textarea { /*取消表单轮廓*/ /*outline: none
2021-12-06 14:17:46
90
原创 CSS鼠标样式
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--鼠标样式 cursor--> <!--li {cursor:pointer;}--> <!--设置或者检索在对象上移动的鼠标
2021-12-06 14:16:57
241
原创 CSS三角形
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--网页中常见的一些三角形,使用css直接画出来就可以,不必做成图片或者字体图标--> <style> .box1 {
2021-12-06 14:16:02
264
原创 土豆网案例
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .tudo { position:relative; height: 280px;
2021-12-06 14:14:31
247
原创 overflow溢出
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--overflow溢出--> <!--overflow属性制定了 如果内容溢出一个元素的框时,会发生什么--> <!--vis
2021-12-06 14:13:49
1838
原创 CSS visibility
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> visibility属性用于指定一个 元素应可见还是隐藏 visibility:visible;元素可视 visibility:hidden;元素隐藏 v
2021-12-06 14:12:39
208
原创 元素的显示与隐藏display
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--类似网页广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现--> <!--本质:让一个元素在页面中隐藏或者显示出来-->
2021-12-03 10:11:18
541
原创 页面布局总结
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title></head><body> 通过盒子模型,清除的知道大部分html标签是一个盒子 通过css浮动,定位可以让每个盒子排列成网页。 一个完
2021-12-03 10:10:19
113
原创 定位淘宝案例
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; }
2021-12-03 10:09:40
388
原创 定位特殊特性
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--定位的特殊性--> <!--绝对定位和固定定位也和浮动类似--> <!--1.行内元素添加绝对或者固定定位,可以直接设置高度
2021-12-03 09:43:31
355
原创 css绝对位置水平居中
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--绝对定位的盒子居中--> <!--加了绝对定位的盒子不能通过margin:() aute;水平居中,但是可以通过以下计算方式实现水平和垂直居中-
2021-12-03 09:42:55
166
原创 定位叠放次序 z-index
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--定位叠放次序 z-index--> <!--在使用定位布局时,可能出现盒子重叠的情况,此时,可以使用z-index 来控制盒子的前后次序(z轴)
2021-12-03 09:42:06
291
原创 css粘性定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--粘性定位sticky--> <!--粘性定位可以被认定是相对定位和固定定位的混合。sticky粘性的--> <!--语法:-
2021-12-03 09:41:24
723
原创 固定定位小技巧固定到版心右侧
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--小算法:--> <!--1.让固定定位的盒子left:50%,走到浏览器可视区(也可以看作版心)的一半位置--> <!--2
2021-12-03 09:40:50
388
原创 css固定定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--固定定位fixed--> <!--固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在游览器页面滚动使元素的位置不会改变-->
2021-12-03 09:39:57
85
原创 css自绝父相
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--绝对定位absolute:--> <!--决定定位是元素在移动位置的时候,是相对于它父元素来说的--> <!--语法:--&
2021-12-03 09:39:03
280
原创 css绝对定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--绝对定位absolute:--> <!--决定定位是元素在移动位置的时候,是相对于它父元素来说的--> <!--语法:--&
2021-11-21 13:57:22
132
原创 静态定位相对定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .box1 { position: relative; top: 100px;
2021-11-21 13:56:29
369
原创 定位的组成
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title></head><body> 1.定位组成: 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子 定位=定位模式
2021-11-21 13:55:53
94
原创 清除浮动==双伪元素清除浮动
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> 代码简洁 <style> .clearfix:before, .clearfix:after { conte
2021-11-21 13:54:57
142
原创 清除浮动--:after伪元素法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> :after方法是额外标签法的升级版,也是给父级元素添加 <style> .clearfix:after { cont
2021-11-21 13:54:22
176
原创 清除浮动-父级添加overflow
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> 代码简洁 <style> .box { /*清除浮动*/ /*overflow: hidde
2021-11-21 13:53:47
243
原创 清除浮动--额外标签法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--额外标签法也称为隔墙法。 额外标签法会在浮动元素末尾添加一个空标签。例如 <div style="clear:both"></div>
2021-11-21 13:53:16
546
原创 常见的网页布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; }
2021-11-21 13:52:32
78
原创 css外边距
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--margin-left 左外边框--> <!--margin-right 右外边框--> <!--margin-top 上外
2021-11-20 10:18:25
137
原创 内边距的复合写法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--padding: 5px; 1个值,代表上下左右都有5像素内边距--> <!--padding: 5px
2021-11-20 10:17:44
245
原创 内边距会影响盒子的大小
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--当我们给盒子指定padding值之后,发生了两件事:--> <!--1.内容和边框有了距离,添加了内边框--> <!--2.
2021-11-20 10:17:14
467
原创 css内边距
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--padding-left 左内边距--> <!--padding-right 右内边距--> <!--padding-top
2021-11-20 10:16:41
108
原创 padding不会撑开盒子的情况.html
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小--> <style> h1 {
2021-11-20 10:16:14
325
原创 css盒子阴影
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <!--css3中新增盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow
2021-11-20 10:15:40
827
原创 css圆角边框
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--在css3中,新增了圆角边框样式,这样我们的盒子可以变圆了--> <!--border-radius 属性用于设置元素的外边框圆角-->
2021-11-20 10:12:28
146
原创 小米导航栏
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .box { width: 1200px; height: 460px;
2021-11-20 10:11:48
218
原创 浮动元素会具有行内块元素的特征
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性--> <!--如果块级盒子没有设置宽度,默认宽度和父级一样宽
2021-11-20 10:11:17
534
原创 浮动特性 浮动元素 行显示
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列--> <!--注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级
2021-11-20 10:10:47
227
原创 什么是浮动
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 选择器{ float:属性值;} none
2021-11-19 16:49:41
97
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人