请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

7.常见布局技巧

2023-07-13

巧妙利用一个技术更快更好的布局:
1.margin负值的运用
2.文字围绕浮动元素
3.行内块的巧妙运用
4.css三角强化

7.1 margin负值运用

1.让每个盒子的margin值往左侧移动-1px正好压住相邻盒子的边框
2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置) , 如果有定位,则加 z-index)
【示例代码】

<!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>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        ul li:hover {
            /* 1.如果盒子没有定位,则鼠标经过添加相对定位即可 */
            /* position: relative; */
            /* 2.如果li都有定位,则用z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

7.2文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性
【示例代码】

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .b {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 100px auto;
            padding: 5px;
        }
        .p {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .p img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="b">
        <div class="p">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

在这里插入图片描述

7.3行内块巧妙运用

如何使页码在页面中间显示:
1.把这些链接盒子转换为行内块元素,然后给父级指定 text-align: center;
2.利用行内块元素中间有缝隙,并且给父级添加text-align: center;行内块元素会水平会居中
【示例代码】

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        .box .pr {
            width: 85px;
        }
        .box .sp {
            background-color: #fff;
            border: 0;
        }
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="pr">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="sp">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="sp">...</a>
        <a href="#" class="pr">下一页&gt;&gt;</a>
        到第
        <input type="text"><button>确定</button>
    </div>
</body>
</html>

在这里插入图片描述

7.4 CSS三角强化

在这里插入图片描述

语法

width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent skyblue transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大,右边框宽度稍小,其余边框为0 */
border-width: 100px 50px 0 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>
        .prc {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .de {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="prc">
        <span class="miaosha">
            ¥1650
            <i></i>
        </span>
        <span class="de">¥5650</span>
    </div>
</body>

</html>

在这里插入图片描述

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部