2022年2月23日
6 vertical-align实现行内块和文字垂直居中对齐
1 精灵图
<head>
<style type="text/css">
.div1 {
width: 60px;
height: 60px;
background: green url(images/sprites.png) no-repeat -182px 0;
}
</style>
</head>
<body>
<h3>精灵图</h3>
<div class="div1"></div>
</body>
background-position
https://blog.csdn.net/vitocool/article/details/122520505?spm=1001.2014.3001.5501
2 字体图标
2.1 字体图标下载
字体图标下载网站-阿里巴巴https://www.iconfont.cn/字体图标下载网站-icomoonhttps://icomoon.io/
2.2 把fonts文件夹放入页面根目录
2.3 在css中引入字体
2.4 html标签内添加小图标
2.5 字体图标代码实现
<head>
<style type="text/css">
/*字体声明*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?z9byv6');
src: url('fonts/icomoon.eot?z9byv6#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?z9byv6') format('truetype'),
url('fonts/icomoon.woff?z9byv6') format('woff'),
url('fonts/icomoon.svg?z9byv6#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
/*使用字体*/
font-family: 'icomoon';
font-size: 50px;
color: yellow;
}
</style>
</head>
<body>
<h3>字体图标</h3>
<span></span>
</body>
2.6 字体图标追加
3 精灵图和字体图标对比
4 CSS三角制作
<head>
<style type="text/css">
.div2 {
float: left;
width: 0;
height: 0;
margin: 0;
padding: 0;
/*制作三角*/
/*四个透明边*/
border: 10px solid transparent;
/*再使一个边显色*/
border-right: 10px solid black;
}
.div3 {
float: left;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
background-color: black;
}
</style>
</head>
<body>
<h3>CSS三角制作</h3>
<!-- 小三角 -->
<div class="div2"></div>
<!-- 正方形 -->
<div class="div3"></div>
</body>
5 CSS用户界面样式
5.1 鼠标样式
<h3>鼠标样式</h3>
<ul>
<li style="cursor: default;">默认</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动</li>
<li style="cursor: text;">文本</li>
<li style="cursor: not-allowed;">禁止</li>
</ul>
5.2 轮廓线 outline
文本框轮廓线也用相同方法
<head>
<style type="text/css">
input {
outline: 0;
}
</style>
</head>
<body>
<h3>表单轮廓线</h3>
<input type="text" name="">
</body>5.3 防止拖拽文本域
<head>
<style type="text/css">
textarea {
resize: none;
}
</style>
</head>
<body>
<h3>防止拖拽文本框</h3>
<textarea></textarea>
</body>表单和文本框属性https://blog.csdn.net/vitocool/article/details/122442555?spm=1001.2014.3001.5502
6 vertical-align实现行内块和文字垂直居中对齐
<head>
<style type="text/css">
.div4, .div5, .div6, .div7 {
display: inline-block;
width: 50px;
height: 50px;
background-color: black;
}
.div4 {
/*默认，元素放置在父元素的基线上*/
vertical-align: baseline;
}
.div5 {
/*把元素的顶端与行中最高元素的顶端对齐*/
vertical-align: top;
}
.div6 {
/*常用，把此元素放置在父元素的中部*/
vertical-align: middle;
}
.div7 {
/*把元素的顶端与行中最低的元素的顶端对齐*/
vertical-align: bottom;
}
</style>
</head>
<body>
<h3>vertical-align</h3>
<div class="div4"></div>
baseline默认，元素放置在父元素的基线上
<br>
<div class="div5"></div>
top把元素的顶端与行中最高元素的顶端对齐
<br><br>
<div class="div6"></div>
middle把此元素放置在父元素的中部
<br><br>
<div class="div7"></div>
bottom把元素的顶端与行中最低的元素的顶端对齐
</body>
7 图片低侧空白缝隙解决方案
<head>
<style type="text/css">
.div8, .div9 {
border: 1px solid black;
}
.div8 img {
vertical-align: middle;
}
.div9 img {
display: block;
}
</style>
</head>
<body>
<h3>图片低侧空白缝隙解决方案</h3>
<div class="div8">
<img src="images/img.jpg" alt="">
给图片添加vertical-align:middle/top/bottom
</div>
<div class="div9">
把图片转换为块级元素diaplay:block
<img src="images/img.jpg" alt="">
</div>
</body>8 溢出的文字省略号显示
8.1 单行文字溢出省略号显示
<head>
<style type="text/css">
.div10 {
width: 150px;
background-color: pink;
/*如果文字显示不开自动换行*/
/*white-space: normal;*/
/*如果文字显示不开强制一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h3>单行文字溢出省略号显示</h3>
<div class="div10">
单行文字溢出省略号显示
</div>
</body>
8.2 多行文字溢出省略号显示
<head>
<style type="text/css">
.div11 {
width: 50px;
background-color: pink;
/*超出部分隐藏*/
overflow: hidden;
/*文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h3>多行文字溢出省略号显示</h3>
<div class="div11">
多行文字溢出省略号显示
</div>
</body>
9 marign负值巧妙运用
<head>
<style type="text/css">
.div12 ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
.div12 ul li:hover {
/* 相对定位可以压住标准流 */
position: relative;
border: 1px solid blue;
}
</style>
</head>
<body>
<h3>marign负值巧妙运用</h3>
<div class="div12">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
10 文字围绕浮动元素巧妙运用
<head>
<style type="text/css">
.div13 {
width: 200px;
height: 100px;
background-color: pink;
}
.div13 img {
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h3>文字围绕浮动元素巧妙运用</h3>
<div class="div13">
<img src="images/img.jpg" alt="">
文字围绕浮动元素
</div>
</body>
11 行内块的巧妙运用
<head>
<style type="text/css">
.div14 a {
display: inline-block;
width: 30px;
height: 30px;
background-color: #ccc;
border: 1px solid black;
text-decoration: none;
text-align: center;
line-height: 30px;
color: #333;
font-size: 14px;
}
.div14 .shangyiye {
width: 80px;
}
.div14 .wu {
background-color: transparent;
border: 1px solid transparent;
}
.div14 input {
width: 36px;
}
.div14 button {
width: 50px;
height: 30px;
background-color: #ccc;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>行内块的巧妙运用</h3>
<div class="div14">
<a class="shangyiye" href=""><<上一页</a>
<a class="wu" href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a class="wu" href="">...</a>
<a class="shangyiye" href="">下一页>></a>
到第
<input type="text" name="">
页
<button>确定</button>
</div>
</body>
12 CSS三角巧妙运用
<head>
<style type="text/css">
.div15 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 20px solid black;
border-bottom: 50px solid black;
border-left: 20px solid transparent;
}
</style>
</head>
<body>
<h3>CSS三角巧妙运用</h3>
<div class="div15"></div>
</body>
13 CSS初始化
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */
font-family: Microsoft YaHei,Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
14 总结
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS高级技巧</title>
<style type="text/css">
.div1 {
width: 60px;
height: 60px;
background: green url(images/sprites.png) no-repeat -182px 0;
}
/*字体声明*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?z9byv6');
src: url('fonts/icomoon.eot?z9byv6#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?z9byv6') format('truetype'),
url('fonts/icomoon.woff?z9byv6') format('woff'),
url('fonts/icomoon.svg?z9byv6#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
/*使用字体*/
font-family: 'icomoon';
font-size: 50px;
color: yellow;
}
.div2 {
float: left;
width: 0;
height: 0;
margin: 0;
padding: 0;
/*制作三角*/
/*四个透明边*/
border: 10px solid transparent;
/*再使一个边显色*/
border-right: 10px solid black;
}
.div3 {
float: left;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
background-color: black;
}
li {
margin-bottom: 15px;
}
input {
outline: 0;
}
textarea {
resize: none;
}
.div4, .div5, .div6, .div7 {
display: inline-block;
width: 50px;
height: 50px;
background-color: black;
}
.div4 {
/*默认，元素放置在父元素的基线上*/
vertical-align: baseline;
}
.div5 {
/*把元素的顶端与行中最高元素的顶端对齐*/
vertical-align: top;
}
.div6 {
/*把此元素放置在父元素的中部*/
vertical-align: middle;
}
.div7 {
/*把元素的顶端与行中最低的元素的顶端对齐*/
vertical-align: bottom;
}
.div8, .div9 {
border: 1px solid black;
}
.div8 img {
vertical-align: middle;
}
.div9 img {
display: block;
}
.div10 {
width: 150px;
background-color: pink;
/*如果文字显示不开自动换行*/
/*white-space: normal;*/
/*如果文字显示不开强制一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
.div11 {
width: 50px;
background-color: pink;
/*超出部分隐藏*/
overflow: hidden;
/*文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
.div12 ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
.div12 ul li:hover {
position: relative;
border: 1px solid blue;
}
.div13 {
width: 200px;
height: 100px;
background-color: pink;
}
.div13 img {
float: left;
width: 100px;
height: 100px;
}
.div14 a {
display: inline-block;
width: 30px;
height: 30px;
background-color: #ccc;
border: 1px solid black;
text-decoration: none;
text-align: center;
line-height: 30px;
color: #333;
font-size: 14px;
}
.div14 .shangyiye {
width: 80px;
}
.div14 .wu {
background-color: transparent;
border: 1px solid transparent;
}
.div14 input {
width: 36px;
}
.div14 button {
width: 50px;
height: 30px;
background-color: #ccc;
border: 1px solid black;
}
.div15 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 20px solid black;
border-bottom: 50px solid black;
border-left: 20px solid transparent;
}
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
</style>
</head>
<body>
<h3>精灵图</h3>
<div class="div1"></div>
<h3>字体图标</h3>
<span></span>
<h3>CSS三角制作</h3>
<!-- 小三角 -->
<div class="div2"></div>
<!-- 正方形 -->
<div class="div3"></div>
<br><br><br><br>
<h3>鼠标样式</h3>
<ul>
<li style="cursor: default;">默认</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动</li>
<li style="cursor: text;">文本</li>
<li style="cursor: not-allowed;">禁止</li>
</ul>
<h3>表单轮廓线</h3>
<input type="text" name="">
<h3>防止拖拽文本框</h3>
<textarea></textarea>
<h3>vertical-align</h3>
<div class="div4"></div>
baseline默认，元素放置在父元素的基线上
<br>
<div class="div5"></div>
top把元素的顶端与行中最高元素的顶端对齐
<br><br>
<div class="div6"></div>
middle把此元素放置在父元素的中部
<br><br>
<div class="div7"></div>
bottom把元素的顶端与行中最低的元素的顶端对齐
<h3>图片低侧空白缝隙解决方案</h3>
<div class="div8">
<img src="images/img.jpg" alt="">
给图片添加vertical-align:middle/top/bottom
</div>
<div class="div9">
把图片转换为块级元素diaplay:block
<img src="images/img.jpg" alt="">
</div>
<h3>单行文字溢出省略号显示</h3>
<div class="div10">
单行文字溢出省略号显示
</div>
<h3>多行文字溢出省略号显示</h3>
<div class="div11">
多行文字溢出省略号显示
</div>
<h3>marign负值巧妙运用</h3>
<div class="div12">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br>
<h3>文字围绕浮动元素巧妙运用</h3>
<div class="div13">
<img src="images/img.jpg" alt="">
文字围绕浮动元素
</div>
<h3>行内块的巧妙运用</h3>
<div class="div14">
<a class="shangyiye" href=""><<上一页</a>
<a class="wu" href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a class="wu" href="">...</a>
<a class="shangyiye" href="">下一页>></a>
到第
<input type="text" name="">
页
<button>确定</button>
</div>
<h3>CSS三角巧妙运用</h3>
<div class="div15"></div>
</body>
</html> 
扫一扫
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
