文字和图片垂直居中(vertical-align)
解决图片空白缝隙
方法:
1.vertical-align
2.把图片转换为dispay:block
文字溢出省略号显示
1.单行文本溢出省略号显示
<style>
div{
width: 100px;
height: 50px;
background-color: pink;
margin: 100px auto;
/* 1.文字强制一行显示 */
white-space: nowrap;
/* 2.隐藏溢出部分 */
overflow: hidden;
/* 3.溢出部分用省略号显示 */
text-overflow: ellipsis;
}
</style>
2.多行文本溢出省略号显示(存在兼容性问题)
<style>
div{
width: 100px;
height: 50px;
background-color: pink;
margin: 100px auto;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
鼠标经过边框小技巧
z-index: 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>
*{
margin: 0;
padding: 0;
}
.box{
text-align: center;
}
.box a,.box .enter{
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #cccccc;
text-align:center;
line-height: 36px;
text-decoration: none;
}
.box .prev,.box .next{
width: 60px;
}
.box .page{
width: 10px;
height: 20px;
}
.box .enter,.box .page{
outline: none;
}
.box .current,.box .ele{
background-color: #fff;
border: none;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<前一页</a>
<a href="#" class="current">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#" class="ele">...</a>
<a href="#" class="next">后一页>></a>
到第<input type="text" class="page">页
<input type="button" value="确定" class="enter">
</div>
</body>
</html>
CSS三角强化
<style>
.box{
width: 0;
height: 0;
border-color: transparent yellow transparent transparent;
border-style:solid;
border-width: 100px 50px 0 0;
}
</style>
2.斜杠图标案例
<!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>
*{
margin: 0;
padding: 0;
}
.price{
width: 200px;
height: 30px;
margin: 100px auto;
text-align: center;
line-height: 30px;
border: 1px solid red;
}
.price .miaosha{
position: relative;
float: left;
width: 100px;
height: 100%;
font-size: 16px;
font-weight: 700;
background-color: red;
color: #fff;
}
.price .origin{
width: 85px;
text-decoration: line-through;
font-size: 14px;
color: grey;
}
.price .miaosha i{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style:solid;
border-width: 30px 15px 0 0;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">
¥1650
<i></i>s
</span>
<span class="origin">
¥5650
</span>
</div>
</body>
</html>