发表于: 2022-12-20 20:34:22

0 281




今天复习了一下之前的知识点还有做了几个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">&lt;&lt;上一页</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">下一页&gt;&gt</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>



返回列表 返回列表
评论

    分享到