CSS（二）

最新推荐文章于 2024-08-23 20:19:03 发布

YZ_1221

最新推荐文章于 2024-08-23 20:19:03 发布

阅读量125

点赞数

分类专栏： HTML css 文章标签： webstorm html 前端

本文链接：https://blog.csdn.net/weixin_47736621/article/details/123839886

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

* 元素的显示与隐藏

1 display:none|block（********）

隐藏元素后，不再占有原来的位置。

2 visibility：hidden|visible

隐藏元素后，仍然占有原来的位置。

3 overflow：hidden|scroll|auto 溢出隐藏，滚动条，自动

* 精灵图

 <style>
        span{
            display: inline-block;
        }
        .p{
            width: 100px;
            height: 112px;
            /*background-color: pink;*/
            background: url("images/abcd.jpg") no-repeat -495px -275px;
        }
        .i{
            width: 60px;
            height: 108px;
            /*background-color: pink;*/
            background: url("images/abcd.jpg") no-repeat -328px -142px;
        }
        .n{
            width: 115px;
            height: 112px;
            /*background-color: pink;*/
            background: url("images/abcd.jpg") no-repeat -255px -274px;
        }
        .k{
            width: 110px;
            height: 113px;
            /*background-color: pink;*/
            background: url("images/abcd.jpg") no-repeat -495px -139px;
        }
    </style>
</head>
<body>
<span class="p"></span>
<span class="i"></span>
<span class="n"></span>
<span class="k"></span>
</body>

*字体图标iconfont

展示的是图标，本质属于字体。

*CSS三角

 .box1{
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-right: 10px solid green;
            border-left: 10px solid yellow;
            border-bottom: 10px solid red;
        }
        .box2{
            width: 0;
            height: 0;
            border: 50px solid transparent;/*改成透明色*/
            border-top-color:pink ;
            margin: 100px auto;
        }

*用户界面样式

更改用户的鼠标样式cursor：
default/pointer小手/move/text文本/not-allowed禁止

表单轮廓 outline:0;/outline:none;
防止表单域拖拽 resize: none;

<style>
        input, textarea {
            outline: 0;
            /*    取消默认的表单轮廓线 outline:0;/outline:none;*/
        }
        textarea {
            resize: none;
            /*    防止文本域进行拖拽*/
        }
    </style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

*vertical-align实现行内快和文字垂直居中对齐

在这里插入图片描述

 <style>
        img{
            /*vertical-align: bottom;!*底线对齐*!*/
            vertical-align: middle;/*中线对齐*/
        }
    </style>
</head>
<body>
<!--vertical-align经常应用于设置图片或者表单（行内快元素）和文字垂直对齐。-->
<img src="images/ps.png" alt="">fgm节目观看
<!--默认基线对齐-->
</body>

应用：解决图片底部默认空白缝隙问题
原因：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决办法：
1 vertical-align: middle\top\bottom等。（提倡使用的）
2 将img转为块级元素display:block;

*溢出文字省略号显示

1.单行文本溢出显示省略号

/1.先强制一行内显示文本/
white-space: nowrap;
/2.超出部分隐藏/
overflow: hidden;
/3.文字用神略号代替超出的部分/
text-overflow:ellipsis ;

2.多行文本溢出显示省略号

 <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;

            overflow: hidden;
            text-overflow: ellipsis;
            /*弹性盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp:3;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<div>你是狗狗吗？小树树你是狗狗吗？小树树你是狗狗吗？小树树小树树你是狗狗吗？你是狗狗吗？小树树</div>
</body>

*布局技巧

1 margin负值的运用

2文字围绕浮动元素

3 行内块的巧妙运用

4 CSS三角强化

.box1{
            width: 0;
            height: 0;
           /* !*1要把左边和下边的边框宽度设置为0*!
            border-left: 0px solid pink ;
            border-bottom: 0px solid green ;
            border-right: 20px solid blue ;
            !*2吧上边框调大，设置透明色*!
            border-top: 40px solid transparent ;*/
            /*写法2 */
            border-color: transparent red transparent transparent;
            border-width: 40px 20px 0 0;
            border-style: solid;

        }

在这里插入图片描述
效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三角强化</title>
    <style>
        .box1{
            width: 0;
            height: 0;
           /* !*1要把左边和下边的边框宽度设置为0*!
            border-left: 0px solid pink ;
            border-bottom: 0px solid green ;
            border-right: 20px solid blue ;
            !*2吧上边框调大，设置透明色*!
            border-top: 40px solid transparent ;*/
            /*写法2 */
            border-color: transparent red transparent transparent;
            border-width: 40px 20px 0 0;
            border-style: solid;

        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center ;
            color: #fff;
            margin-right: 8px;
        }
        .miaosha i{
            position: absolute;
            right: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-width: 24px 12px 0 0;
            border-style: solid;
        }
        .now{
            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="now">$6650</span>
</div>
</body>
</html>

YZ_1221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（二）

* 元素的显示与隐藏1 display:none|block（********）隐藏元素后，不再占有原来的位置。2 visibility：hidden|visible隐藏元素后，仍然占有原来的位置。3 overflow：hidden|scroll|auto 溢出隐藏，滚动条，自动...
复制链接

扫一扫

专栏目录