- 博客(57)
- 收藏
- 关注
RSS订阅
1原创 多行文本溢出显示省略号
<!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关注的人