web第三天_web强制一行显示-CSDN博客

本文链接：https://blog.csdn.net/m0_61811045/article/details/130202393

1、阴影

盒子阴影：box-shadow：inset h-shadow v-shadow blur-radius color；

inset表示阴影类型为内阴影

outset表示阴影类型为外阴影（不添加时默认为外阴影，但是添加后反而无效）

h-shadow表示阴影水平位移量，可以为负值

v-shadow表示阴影垂直位移量，可以为负值

blur-radius表示阴影模糊半径，即阴影向外模糊的模糊范围，值越大越模糊

文字阴影：text-shadow

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        .box {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background-color: greenyellow;
            /* box-shadow:x   y    blur    color     inset :盒子里面的阴影，默认是outset*/
            box-shadow: -20px -20px 10px rgb(207, 21, 52);
        }

        p {
            font-size: 30px;
            color: pink;
            /*  text-shadow文字阴影*/
            text-shadow: 3px 10px 4px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>
        缑欣
    </p>

</body>

2、列表样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表样式</title>
    <style>
        ul li {
            /* 去掉默认样式 */
            list-style: none;
        }

        ol li {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol>
        <li>dsfsjfoew</li>
    </ol>
</body>

3、轮廓样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input {
            /* outline: none; */
        /* 轮廓和元素的距离 */
        /* outline-offset: 20px; */
        /* outline-style: dotted;
            outline-color: aquamarine;
            outline-width: 20px; */
        /* }  */
        input:focus {
            outline-color: blueviolet;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

4、外边距与内边距

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            /* 内边距 */
            /* padding: 20px; */
            /* padding-top: 30px;
            padding-left: 30px; */
            /* padding: 上    右边   下    左 */
            padding: 30px 0 0 30px;
            /* padding:40;四个方向都是内边距40 */
            padding: 40px;
            /* 上下      左右 */
            padding: 5px 40px;
            /* 外边距 */
            margin-bottom: 30px;
            /* margin-right: ; */
            /* margin: 30px 0 30px 30px; */
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        .box2 {
            width: 400px;
            height: 400px;
            background-color: rgb(215, 48, 210);
            /* 外边距合并：谁大听谁的 */
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>

5、定位：静态定位、相对定位、绝对定位、固定定位、粘性定位

/* 静态定位*/
 position: static;


/* 相对定位：相对于自身位置进行移动的 保留原先的位置*/
position: relative;

/* 绝对定位：子绝父相，父亲没有相对定位，向上继续找既有相对定位的，如果都没有，则相对浏览器进行定位，不占有原来位置*/
position: absolute;


/* 固定定位，不保留原来位置 */
position: fixed;

/* 粘性定位，滑动到一定位置不动 */
position: sticky;

6、叠放顺序：z-index：1 值越大优先级越高

7、元素的显示和隐藏

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        p {
            /* 元素的隐藏 */
            /* display: none;不占位置 */
            /*display: block; */
            /* display: inline-block; */
            /* visibility: hidden;
            visibility: visible; */
        }

        .box {
            /* 元素的显示 */
            width: 300px;
            height: 100px;
            background-color: pink;
            /* overflow: visible; */
            /* overflow: scroll; */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <p>sdivfpksos </p>
    <div class="box">
        据公告，此次获得股份奖励的3名高管中，孙东旭获得的股份奖励最多，共300万股，按照4月11日收盘价计算，价值高达8700万港元。俞敏洪获得150万股、价值约4350万港元，尹强获得60万股、价值约1740万港元。 其余151名参与者均为东方甄选雇员，他们将获得合计2535.9万股股份激励，价值约7.4亿港元。平均下来，每位参与的员工将获得市值为487万港元（约合人民币427万元）的股票。
    </div>
</body>

8、display

display、显示和隐藏标签值为none：隐藏，display：none；隐藏不占位置

visibility：hidden；隐藏区别.v隐藏后标签仍然存在，透明度为0的隐藏====opacity为0

Display:控制标签属性，转换标签的属性。默认块元素的display值为block 行内元素为inline行内标签和块标签

用a做导航栏：引出inline-block：极具有块元素的属性，又不霸道

9、文本溢出

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 150px;
            height: 50px;
            background-color: aquamarine;
            /* 强制一行显示 */
            white-space: nowrap;
            /* 隐藏溢出 */
            overflow: hidden;
            /* 加...... */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>
        ajskdjsedewlkdkewjdlekdewdekd
    </p>
</body>

10、css3提供的布局

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            /* flex-direction:容器项目排列方向 */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */

            /* 主轴对齐方式 */
            /* justify-content: space-between; */
            justify-content: center;
            /* justify-content: space-around; */
            /* justify-content: flex-end; */
            /* justify-content: space-evenly; */

            /* 侧轴对齐方式 */
            /* align-items: flex-end; */
            /* align-items: flex-start; */
            align-items: center;
            align-items: stretch;

            width: 800px;
            background-color: pink;
            margin: 0 auto;
            height: 400px
        }
        .son1,
        .son2,
        .son3 {
            /* 均分 */
            flex: 1;

            background-color: blueviolet;
        }
        .box2 {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <div class="box2">4</div>
        <div class="box2">4</div>
        <div class="box2">4</div>
    </div>
</body>

11、flex多行

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            display: flex;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;/*换行*/
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            background-color: aqua;
        }

        ul li {
            list-style: none;
            width: 155px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

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


    </ul>
</body>

作业：小米导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官方导航栏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top {
            font-family: 微软雅黑;
            margin: 0 auto;
            background-color:black;
            width: 1350px;
            height: 60px;
            display: flex;
            justify-content: space-between;
            opacity: 0.7;
            position: sticky;
            top: 0px;
        }
        .left {
            margin-top: 10px;
            margin-left: 50px;
        }
         a {
            display: inline-block;
            text-decoration: none;
            color: white;
            margin-left: 12px;
            margin-right: 12px;
            font-size: 15px;
            margin-top: 20px;
            font-weight: 900px;
        }
        a:hover {
            color:#CB5709;
        }
        .right {
            color: white;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left">
            <img src="./1.jpg" alt="1" width="40px">
        </div>
        <div class="cen">
            <a href="#">小米官网</a>
            <a href="#">小米商城</a>
            <a href="#">小米影像</a>
            <a href="#">MIUI</a>
            <a href="#">IoT</a>
            <a href="#">云服务</a>
            <a href="#">天星数科</a>
            <a href="#">有品</a>
            <a href="#">小爱开放平台</a>
            <a href="#">企业团购</a>

        </div>
        <div class="right">
            <a href="#">登录</a>
            <span>|</span>
            <a href="#">注册</a>
        </div>
    </div>
</body>
</html>