常见的布局技巧~（margin负值的应用、行内块巧妙应用以及三角的强化）

最新推荐文章于 2023-03-03 09:52:36 发布
最新推荐文章于 2023-03-03 09:52:36 发布
阅读量225 收藏 2
点赞数
分类专栏： css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/micoria/article/details/112971541
版权

四.常见的布局技巧

1.1 margin负值运用

​ 商品的显示框

​ 1.解决盒子边框重合 margin:-1.....;
​ 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>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .w {
            width: 1178px;
            margin: 0 auto;
        }
        
        .wrapper {
            margin-top: 72px;
        }
        
        .wrapper ul {
            float: left;
        }
        
        .wrapper ul li {
            position: relative;
            float: left;
            height: 376px;
            width: 215px;
            padding: 75px 39px 18px 39px;
            margin: 0 -1px -1px 0;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
        
        .wrapper ul li:hover {
            z-index: 1;
            border: 1px solid orangered;
        }
        
        .wrapper ul li>img {
            width: 100%;
            height: 270px;
        }
        
        .wrapper ul li a {
            display: block;
            margin-top: 18px;
            color: #828282;
            font-size: 16px;
        }
        
        .wrapper ul li h4 {
            margin-top: 46px;
            color: #349167;
        }
    </style>
</head>

<body>
    <div class="wrapper w">
        <ul>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
            <li>
                <img src="images/oppo1.png" alt="">
                <a href="#">
                    <p> 玫瑰金 前后1000万像素</p>
                </a>
                <h4>￥2900.00</h4>
            </li>
        </ul>
    </div>
</body>

</html>

1.2 文字围绕浮动元素运用

在这里插入图片描述
布局示意图
在这里插入图片描述
巧妙运用浮动元素不会压住文字的特性

1.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;
        }
        
        a {
            text-decoration: none;
            color: #5a5959;
        }
        
        .box {
            text-align: center;
        }
        
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            font-size: 14px;
            background-color: #cccccc;
        }
        
        .box .prev,
        .box .next {
            width: 85px;
        }
        
        .box .clicked,
        .box .ellip {
            background-color: #fff;
        }
        
        .box input {
            width: 45px;
            height: 36px;
            outline: none;
            border: 1px solid #cccccc;
        }
        
        button {
            width: 55px;
            height: 34px;
            border: none;
            outline: none;
            cursor: pointer;
            background-color: #cccccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="clicked">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="ellip">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a> 跳转到第
        <input type="text" name="" id="">页
        <button>确定</button>
    </div>
</body>

</html>

1.4 三角强化

案例：
在这里插入图片描述

​代码：京东价格标签栏

<!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: 185px;
            height: 25px;
            margin: 100px auto;
            line-height: 25px;
            border: 1px solid orangered;
            font-size: 14px;
            font-weight: 700;
            color: #cccccc;
        }
        
        .box .decreace {
            position: relative;
            float: left;
            width: 100px;
            height: 100%;
            margin-right: 10px;
            text-align: center;
            background-color: orangered;
        }
        
        .decreace i {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-width: 25px 10px 0 0;
            border-style: solid;
            border-color: transparent white transparent transparent;
        }
        
        .box .price {
            text-decoration: line-through;
        }
    </style>

</head>

<body>
    <div class="box">
        <span class="decreace">￥1256
            <i></i>
        </span>
        <span class="price">￥3489</span>
    </div>
</body>

</html>
micoria
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
布局技巧-行内块的巧妙运用【页码组件布局】
weixin_43837268的博客
10-11 256
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行内.
CSS绘制特殊三角，实现梯形样式
kettlo的博客
04-09 200
制作非等腰三角形可以给边框设置其它样式、属性。（调节边框宽度） <body> <div class="box"> </div> </body> .box { width: 0; height: 0; border-top: 120px solid transparent; border-right: 50px solid red; border-left: 0 solid black; bor
CSS三角强化(边框的应用)
luckypian
06-27 176
1.普通三角形 如何实现下述三角形？ 宽、高个设置为0； 给四个方向的边框设置不同的颜色； 将其余方位的颜色设置为透明色（transparent ） 2.直角三角形 下述效果如何实现？ 1.只保留右边边框的颜色； 2.样式为solid； 3.上边框要大，和父元素一样高。右边框要小，其余边框均为0。 4.根据需要，用定位调整在合适位置。将颜色调整为需要的颜色。 ...
margin负值的巧妙运用（HTML、CSS）
...
08-11 118
margin负值的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin负值的巧妙运用</title> <style&
CSS案例之奔跑的北极熊
weixin_45336716的博客
09-02 734
源码： <!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"> <tit..
简单谈谈margin负值的作用
10-20
在CSS布局中，margin负值是一个非常有用的技巧，它能够帮助开发者解决许多复杂的设计问题，尤其是在需要精细调整元素位置或创建特殊布局时。虽然初学者可能会对负值margin感到困惑，但理解其工作原理和应用场合后，...
js常见表单应用技巧
10-30
本文将详细讲解几种常见的JavaScript表单应用技巧，包括显示框架内的指定位置、改变文本框的属性以及与下拉列表的交互。 首先，我们来看如何在框架内显示指定位置的内容。在HTML中，`<iframe>`标签用于嵌入另一个源...
margin 负值引起的层级（z-index）问题
09-27
然而，在使用margin负值时，可能会影响到元素的层级，导致原本预期的布局效果未能实现。 首先，需要了解的是，当一个元素设置了position属性为非static（如relative、absolute、fixed等）时，该元素才会生成层叠上...
独行DIV自适应宽度布局CSS实例与应用范围
09-25
独行DIV自适应宽度布局是CSS布局设计中的一个重要技巧，它允许元素根据浏览器窗口大小自动调整宽度，从而实现响应式设计。这种布局方式常用于创建单列布局，使得内容在不同设备上都能适配显示。 在CSS中，要实现...
深入解析iOS应用开发中九宫格视图布局的相关计算方法
01-21
CGFloat margin = (self.view.frame.size.width – totalloc * shopW) / (totalloc + 1); /*  * View的总个数  */ NSUInteger count = 12; /*  * 根据总个数使用总列数来除和取余获取对应的行和列  */ NS
CSS3基础：布局技巧margin=-1 & 非等腰直角三角形
qq_54517101的博客
08-10 374
这是因为，由于margin对于-1的原因，每个方框的右边界都被右边的盒子盖住了，解决方法有两种：如果盒子没有增加定位：增加相对定位可以盖住下面的元素如果盒子增加的定位：增加定位的层级。...
css布局技巧-margin负值巧妙运用
阿牛的博客
02-16 1033
css布局技巧-margin负值巧妙运用
布局技巧-margin负值的巧妙运用【解决ul中多个li边框重叠问题】
weixin_43837268的博客
10-10 514
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>m.
C++程序设计：字符阵列（三角形字符阵列图形的打印）
乔卿的博客
08-30 2511
【问题描述】 编程实现把输入任意整数n后，可打印出n行三角字符阵列图形。例如，输入整数5时，程序运行结果如下： 【输入形式】 输入任意正整数n 【输出形式】 需要输出的字符超过26个英文字母时，重新从字母A开始循环；同一行字母之间使用空格分隔。 【样例输入】 5 【样例输出】 A C F J O B E I N D H M G L K 【样例说明】 二维数组应用 #include <iostream> using namespace std; int main() { ch
c++实验5循环结构的嵌套
weixin_50311592的博客
04-15 1412
c++实验5 1.编写程序，求满足1+5+52+53+54+……+5n <=8000的最大n值 #include<iostream> using namespace std; int main() { int sum = 0, sum1 = 1, n = 1; cout << "N的最大值为："; while (sum <= 8000) {//当sum<=8000的时候执行循环体 n++;//n自增,累加作为结果的依据 sum += sum1;//s
Python实现输入姓名年龄地址并输出其内容，打印金字塔三角形的两个代码程序
最新发布
weixin_59042297的博客
03-03 3549
1.因多重原因，本博文由两个程序代码部分组成，如果想使用快速查找，建议浏览目录检索；2.本代码为Python语言，我使用的是Spyder（python 3.8）软件，所有关于Python的博文，只发布Python的执行代码，没有头文件及注册信息文件等，原则上直接粘贴就可以的；3.这是我在上学期间所写的代码，原则上代码都是正确的，但也有可能部分地方存在逻辑错误，请谅解，也请您能将存在的问题反馈给我，我在吸取教训、改进程序、持续完善；4.以下代码均为举例，如有需要可以自己改写。
c语言杨辉三角中加入姓名,杨辉三角的题目
weixin_42300478的博客
05-22 130
#include#defineN14/*请输入要打印的行数：1010行杨辉三角如下：111121133114641151010511615201561172135...
由浅入深漫谈margin属性1
weixin_34143774的博客
08-20 135
margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。 （该文章解释是否正确有待商榷，目前我的实验结果为:在默认情况或者div左浮动的情况下：margin-top/margin-left是有效的，margin-right/margin-bottom是无效的；当右浮动时，margin-right/margin-top是有效的。） ...
margin为负值详解
热门推荐
你想要的都有
03-27 2万+
一、对元素自身的影响 1.margin-left,margin-right为负值 1）元素本身没有宽度，会增加元素宽度 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证</title> &...
CSS+DIV网页布局技巧与应用
了解了这些基本概念后，可以深入学习更高级的CSS特性，如选择器、盒模型、浮动布局、定位、弹性盒模型（Flexbox）和网格布局（Grid），以及响应式设计，以创建适应不同设备和屏幕尺寸的现代网页。此外，还需熟悉CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值