一、CSS用户界面样式
1、鼠标样式 cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
| default | 小白 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
语法：
li { cursor: pointer; }2、轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input { outline: none; }3、防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea{ resize: none; }二、vertical-align 属性应用
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂 直对齐。
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素 有效。
语法：
vertical-align : baseline | top | middle | bottom| 值 | 描述 |
| baseline | 父元素基线 |
| top | 元素顶端与行中最高元素的顶端对齐 |
| middle | 放在父元素中部 |
| bottom | 把元素顶端和行中最低元素的顶端对齐 |
1、图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字 和图片垂直居中对齐了。
2、解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。方法有两种：
- 给图片添加 vertical-align:middle | top| bottom 等。
- 把图片转换为块级元素 display: block;
三、溢出的文字省略号显示
1、单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件：
先强制一行内显示文本
white-space: nowrap; （ 默认 normal 自动换行）超出的部分隐藏
overflow: hidden;文字用省略号替代超出的部分
text-overflow: ellipsis;
p{
white-space: nowrap;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
overflow: hidden;}2、多行文本溢出显示省略号（了解）
1. 超出的部分隐藏
overflow: hidden;2. 文字用省略号替代超出的部分
text-overflow: ellipsis;3. 弹性伸缩盒子模型显示
display: -webkit-box;4. 限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;5. 设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;四、布局技巧
1. margin 负值运用
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位 （保留位置），如果有定位，则加z-index）
2行内块巧妙运用
页码在页面中间显示:
1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平 会居中
五、web提升
1、渐变
| 属性 | 含义 |
| linear-gradient | 线性渐变 |
| repeating-linear-gradient | 重复线性渐变 |
| radial-gradient | 径向渐变 |
| repeating-radial-gradient | 线性渐变 |
1.1、linear-gradient
to bottom、top、right、left决定渐变的方向，deg表示度数
.boxContent.box1 { background: linear-gradient(to bottom, rgb(107, 175, 240), rgb(245, 137, 227)); 
.boxContent.box2 { background: linear-gradient(to bottom right, rgb(107, 175, 240), rgb(245, 137, 227)); } 
.boxContent.box3 { background: linear-gradient(-30deg, rgb(107, 175, 240), rgb(245, 137, 227)); }
1.2 repeating-linear-gradient(线性渐变重复背景色)
to right / 白 0% / 蓝 40% / 粉 50% 默认第一个颜色起始是0，最后一个颜色的百分比为终止位置 如果最后一个颜色百分比为 20%，则图形中会出现 5 组渐变色
background: repeating-linear-gradient(to right, rgb(255, 255, 255), rgb(107,
175, 240) 40%, rgb(245, 137, 227) 50%);1.3 radial-gradient（径向渐变背景色）
background: radial-gradient(rgb(107, 175, 240), rgb(245, 137, 227));
1.4、字体渐变--div 添加渐变效果
2、变形
2.1常用变形类型
| 变形类型 | 含义 |
| translate | 移动元素的位置 |
| scale | 放大或缩小元素 |
| rotate | 旋转元素 |
| skew | 扭曲元素的角度 |
| matrix | 应用一个2D变换矩阵 |
| perspective | 用于创建3D效果 |
| rotateX | 绕X轴旋转元素 |
| rotateY | 绕Y轴旋转元素 |
| rotateZ | 绕Z轴旋转元素 |
| rotate3d | 绕任意轴旋转元素 |
| scale3d | 在3D空间中缩放元素 |
| translate3d | 在3D空间中移动元素 |
2.2变形属性
:
| 属性 | 含义 |
| transform | 应用一个或多个变换函数 |
| transform-origin | 定义变形原点的位置 |
| transform-style | 定义嵌套元素的3D空间中的表现形式 |
| backface-visibility | 控制元素背面的可见性 |
| perspective | 定义3D元素的透视距离 |
2.3、2D变形
1、Transform 属性
2 、Transform-origin
transform-origin 属性用于表示元素旋转的中心点，默认值为 50% 50%。
第一个值，表示元 素旋转中心的水平位置，它还可以赋值left、right、center、长度、百分比;
第二个值，表示 元素旋转中心的垂直位置，它还可以赋值 top 、bottom、center 、长度、百分比。
2.4、3D变形属性
3、过渡
4、css动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。 我们可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
4.1 CSS3 @keyframes 规则
@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前 的样式更改为新的样式。 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称 规定动画的时长
div { animation: myfirst 5s; }
@keyframes myfirst {
from {background: red;}
to {background: yellow;} }4.2 CSS3 的动画属性
轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{width: 200px;
height: 150px;
margin-top: 20px;
margin-left: 20px;
overflow: hidden;
margin: auto;
position: relative;
}
.a1{width: 800px;
height: 150px;
position: absolute;
animation: move 10s linear 0s infinite;
}
.a1 img{display: block;
width: 200px;
height: 150px;
float: left;
}
@keyframes move{
0%{left: 0;}
25%{left: -200px;}
30%{left: -200px;}
50%{left: -400px;}
60%{left: -400px;}
80%{left: -600px;}
100%{left: -600px;}
}
</style>
</head>
<body>
<div class="d1">
<div class="a1">
<img src="D:\VS web\img2\photo01.png" alt="">
<img src="D:\VS web\img2\photo03.png" alt="">
<img src="D:\VS web\img2\photo09.png" alt="">
<img src="D:\VS web\img2\photo12.png" alt="">
</div>
</div>
</body>
</html>自己看一下效果
5、CSS3 多列
CSS3 可以将文本内容设计成像报纸一样的多列布局
1、相关属性
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 800px;
height: 600px;
background-color: rgb(184, 222, 255);
column-count: 3;
column-gap: 10px;
column-rule-color: rgb(246, 255, 0);
column-rule-style: dashed;
column-rule-width: 3px;
}
h1{column-span: all;
text-align: center;}
p:nth-of-type(n+2){
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h1>给大学生的推荐阅读：《李开复给女儿的一封信》</h1>
<p>亲爱的女儿：</p>
<p>我想写一封信给你，告诉你盘旋在我脑中的想法。我想
告诉你我们为你感到特别骄傲。进入哥伦比亚大学证明你是一个全面发展的优
秀学生</p>
<p>大学将是你人生最重要的时光，在大学里你会发现学习
的真谛。我希望你理解，最重要的不是你学到的具体的知识，而是你学习新事
物和解决新问题的能力。大学学习的真正意义是，你从被动学习转向自主学习
的阶段，之后你会变成一个很好的自学者。就算学习的技能你会忘记，学习的
能力是你将受用终身的。</p>
<p>>不要被教条所束缚，任何问题都没有一个唯一的简单的
答案。还记得当我帮助你准备高中的辩论课程时，我总是让你站在你不认可的
那一方来辩论吗？我这么做的理由就是希望你能够理解：看待一个问题不应该
非黑即白，而是有很多方法和角度。这就是“批判的思维”——你需要包容和
支持不同于你的其他观点。我永远记得我去找我的博士导师提出了一个新论
题，他告诉我：“我不同意你，但我支持你。”多年后，我认识到这不仅仅是
包容，而是一种批判式思考，更是令人折服的领导风格，现在这也变成了我的
一部分。我希望这也能成为你的一部分。</p>
<p>在大学里你要追随自己的激情和兴趣，选你感兴趣的课
程，不要困扰于别人怎么说或怎么想。史蒂夫•乔布斯在他著名的斯坦福毕业典
礼演讲中，提到一个例子：他在大学里修了看似毫无用处的书法，而十年后，
这成了苹果Macintosh里漂亮字库的基础，然后才带来了桌面出版和今天的办
公软件（例如微软Office）。他对书法的探索就是一个点，而苹果Macintosh把
多个点串结成了一条线。</p>
<p>不管是暑假计划，功课规划，抑或是选专业，管理时
间，你都应该为自己的人生负责。我仍然会一直站在你身旁，但是现在是你自
己掌舵的时候了。我常常记起我生命中那些令人振奋的时刻——在幼儿园决定
跳级，决定转到计算机科学专业，决定离开学术界选择Apple，决定回中国，
决定选择Google，乃至最近选择创办我的新公司。生命太短暂了，你不能过别
人想要你过的生活。掌控自己的生命是很棒的感觉，试试吧！</p>
</div>
</body>
</html> 
6、响应式布局
1、开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
6.2 响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏 幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小， 从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时响应式尺寸划分
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
6.4页面的屏幕阅读器
@media all and (min-width 768px) { /*所有设备，且视口宽度大于等于768px*/ }
@media (min-width 768px) { /*所有设备，且视口宽度大于等于768px*/ }
@media (max-width 768px) { /*视口宽度小于等于768px，即最大值不超过768px*/ }
@media (min-width 768px) and (max-with 1023.98px) { /*视口宽度大于等于768px，且小于1024px*/ }
@media (orientation: portrait) { /*竖屏，即高度大于或等于宽度。*/ }
@media (orientation: landscape) { /*竖屏，即高度小于宽度。*/
案例
自己去尝试一下，给到一些小盒子，放大屏幕时是正常排放的，缩小屏幕是随着屏幕大小是排列改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{box-sizing: border-box;}
.a1{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.a1 div{ background-color: antiquewhite;
padding: 20px;}
@media (min-width:576) {
.col-sm{ flex:0 0 50%;
}
}
@media (min-width:768px) {
.col-md{ flex:0 0 16%;
}
}
@media (min-width:1200px) {
.col-md{
flex:0 0 8%;
}
}
</style>
</head>
<body>
<div class="d1">
<div class="a1">
<div class="col-sm col-md col-xl">col1</div>
<div class="col-sm col-md col-xl">col2</div>
<div class="col-sm col-md col-xl">col3</div>
<div class="col-sm col-md col-xl">col4</div>
<div class="col-sm col-md col-xl">col5</div>
<div class="col-sm col-md col-xl">col6</div>
<div class="col-sm col-md col-xl">col7</div>
<div class="col-sm col-md col-xl">col8</div>
<div class="col-sm col-md col-xl">col9</div>
<div class="col-sm col-md col-xl">col10</div>
<div class="col-sm col-md col-xl">col11</div>
<div class="col-sm col-md col-xl">col12</div>
<div class="col-sm col-md col-xl">col13</div>
</div>
</div>
</body>
</html>下拉菜单
当鼠标放在上面，呈现小手，菜单下拉显示出来也可以使用无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜单1</a>
<a href="#">菜单2</a>
<a href="#">菜单3</a>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
