CSS day5

Follow_浩弟

已于 2023-08-14 17:56:04 修改

阅读量31

点赞数

分类专栏： CSS 文章标签： css css3 前端

于 2023-08-13 22:03:54 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132266219

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

元素可见性

<!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>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 元素的显示模式 */
            /* display: inline;  把元素转换成行内元素*/
            /* display: inline-block; 元素转换成行内块*/
            /* display: block;  元素转换成块   让元素显示*/
            /* 让元素隐藏，并且隐藏之后不再占用原来的位置 */
            /* display: none; */
            /* display: block; */

            
            /* visibility元素可见度 能够使元素隐藏但是还占用自己原来的位置 */
            /* visible : 　对象可视 */
            /* hidden : 　对象隐藏 */
            visibility: visible;
            visibility: hidden;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: springgreen;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

鼠标样式

<!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>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .box:hover {
            /* 鼠标样式 */
            /* default  小白 | pointer  小手  | move  移动  |  text  文本 | not-allowed 禁用 */
            cursor: pointer;
            cursor: move;
            cursor: text;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

阻止用户点击

<!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>
        .active{
            /* 阻止用户点击 */
            pointer-events: none;
        }
    </style>
</head>
<body>
    <a href="" class="acitve">点击一下</a>
</body>
</html>

表单轮廓

<!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>
        /* outline */
        /* outline : outline-color ||outline-style || outline-width  */
        /* border  */
        .input{
            outline: none;
            outline: skyblue solid 1px;
            border: 0px;
            text-align: center;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- 普通文本输入框 -->
    <input type="text">
    <input type="text" class="input">
</body>
</html>

图片与文字对齐方式

<!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>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        .box img{
            width: 100px;
            height: 80px;
            /* vertical-align */
            /* baseline 图片文字基线对齐|top 顶部对齐 |middle中间对齐 |bottom底部对齐  */
            vertical-align: baseline;
            vertical-align: top;
            vertical-align: bottom;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://img13.360buyimg.com/n1/jfs/t1/156675/13/36956/94051/649f7c15F88b61b3b/2356f871c9a6dfdf.jpg.avif"
            alt="">
            这是一个显卡
    </div>
</body>

</html>

文字换行

<!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>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 文字换行 */
            /* word-break: normal;
            word-break: break-all;
            word-break: keep-all; */
            /* break-all   允许在单词内换行。 */
            /* keep-all    只能在半角空格或连字符处换行。 */

            /* 将文字强制显示在一行 */
            /* white-space */
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 11111111111111111111111111111111111111111111111 -->
        <!-- 官方回应网传28.8万彩礼男生被退婚热官方回应网传28.8万彩礼男生被退婚热 -->
        Official response online 288,000 betrothal price male students are getting divorced Official response
        online 288,000 betrothal price male students are getting divorced hot
    </div>
</body>

</html>

文字溢出隐藏

<!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>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 先让文本强制显示在一行 */
            white-space: nowrap;

            /* 2.需要写一个overflow:hidden */
            overflow: hidden;

            /* 3.text-overflow:ellipsis */
            text-overflow: clip;
            text-overflow: ellipsis;

            /* clip : 　不显示省略标记（...），而是简单的裁切  */
            /* ellipsis : 　当对象内文本溢出时显示省略标记（...） */
        }
        .box2{
            width: 200px;
            height: 300px;
            /* position: relative;
            background-image: url();
            text-align: center;
            line-height: 10px;
            top: 10px;
            left: 10px; */
        }
        .box2 ul li{
            width: ;
        }
    </style>
</head>

<body>
    <div class="box">
        官方回应网传28.8万彩礼男生被退婚热官方回应网传28.8万彩礼男生被退婚热
    </div>
    <div class="box2">
        <ul>
            <li>

            </li>
        </ul>
    </div>
</body>

</html>