1. CSS三角
1.普通三角制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-bottom: 10px solid green;
border-left: 10px solid red;
border-right: 10px solid blue;
}
.box2 {
width:0;
height: 0;
border: 10px solid transparent;
border-bottom-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三角制作</title>
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
top: -9px;
right: 15px;
width: 0;
height: 0;
/*为了照顾兼容性*/
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>
效果：
2. 用户界面
2.1鼠标样式cursor
使用方法：
<ul>
<li style="cursor: default">小白鼠标样式</li>
<li style="cursor: pointer">鼠标小手样式</li>
<li style="cursor:move">鼠标移动样式</li>
<li style="cursor: not-allowed">鼠标禁止样式</li>
<li style="cursor: text">鼠标文本样式</li>
</ul>
2.2 表单轮廓outline
点击表单的时候，不想出现轮廓线。css
input {
outline: none;
}
2.3 文本域设置防拖拽 resize
textarea {
resize: none;
}
小细节：在些textarea的时候，尽量在一行里面写，如下
如果换行的话，在页面中会出现这个空白区域，有点难受。
2.4vertical-align属性
经常使用于使图片、表单和文字垂直居中对齐。（行内块属性可以）
默认是文字和图片基线对齐，可以通过给行内块元素添加vertical-align属性进行修改。
解决图片底部默认的空白缝隙问题
图片底侧会有一个空白缝隙，因为行内块元素会和文字的基线对齐
解决方法：
1.给图片添加vertical-align: middle | top | bottom等
2.把图片转换为块级元素：display: block
2.5 溢出文字省略
2.5.1 单行文本溢出
步骤：
1. 强制一行内显示（即不换行）--> white-space: nowrap
2.溢出部分隐藏 --> overflow: hidden
3.文字用省略号替代超出部分 --> text-overflow: ellipsis;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文本溢出显示省略号</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/*默认自动换行*/
/*white-space: normal;*/
/*关闭自动换行，强制一行内显示所有文字*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
大家好，我是xxx，很高兴认识你们
</div>
</body>
</html>
View Code点击查看代码
2.5.2 多行文本溢出
有较大的兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)。
3. 布局技巧
标签：solid,height,学习,width,10px,border,CSS From： https://www.cnblogs.com/hmy22466/p/17297410.html