发表于： 2022-12-20 20:34:22
0 157
今天复习了一下之前的知识点还有做了几个css练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角巧妙练习</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: bolder;
font-size: 14px;
}
.miaosha i {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
margin-left: 8px;
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
￥1650
<i></i>
</span>
<span class="origin">￥5650</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内块练习</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f3f3f3;
text-align: center;
line-height: 36px;
text-decoration: none; /* 取消下划线 */
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .a,
.box .b {
background-color: #fff;
border: none;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="a">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="b">...</a>
<a href="#" class="next">下一页>></a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本显示省略号练习</title>
<style>
/*div {*/
/* width: 150px;*/
/* height: 80px;*/
/* background-color: red;*/
/* margin: 100px auto;*/
/* !* 这个单词的意思是文字显示不开自动换行 *!*/
/* !*white-space: normal;*!*/
/* !* 1.这个单词的意思是文字显示不开也会强制一行内显示 *!*/
/* white-space: nowrap;*/
/* !* 2.溢出的部分隐藏起来 *!*/
/* overflow: hidden;*/
/* !* 3.用省略号代替超出的部分*!*/
/* text-overflow: ellipsis;*/
/*}*/
/* 多行文本溢出显示省略号兼容性较大，适合于webkit浏览器或者移动端 */
div {
width: 150px;
height: 65px;
background-color: red;
margin: 100px auto;
/* 溢出的部分隐藏起来 */
overflow: hidden;
/* 用省略号代替超出的部分*/
text-overflow: ellipsis;
/* 弹性盒子显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或者检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<!--<div>此处有省略号，此处省略一万字。</div>-->
<div>此处有省略号，此处省略一万字。此处有省略号，此处省略一万字。</div>
</body>
</html>
返回列表
评论