4列布局实例2

最新推荐文章于 2021-08-03 19:37:36 发布
最新推荐文章于 2021-08-03 19:37:36 发布
阅读量262 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C05230/article/details/107879749
版权

布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./7张布局.css">
</head>
<body>
    <nav>
        <h2>人气推荐</h2>
        <a href="" class="a">编辑推荐</a>
        <a href="" class="aa">热销总榜</a>
        <a href="" class="aaa">更多推荐></a>
        <div class="seven_images">
            <div class="seven_image1">
                <div>
                    <img src="./猫粮.jpg" alt="" width="390px" height="400px">
                </div>
                <div>
                    <p>
                        <span>限时购</span>
                    </p>
                    <p>
                        <span>每一口都有七种肉，全价猫粮 <br> 1.8千克</span>
                    </p>
                    <p>
                        <span>￥78</span>
                        <span>￥88</span>
                    </p>
                </div>
            </div>
            <div class="seven_image2">
                <div>
                    <div>
                        <img src="./洗衣液.jpg" alt="" width="223px" height="180px">
                    </div>
                    <div>
                        <p>
                            <span>限时购</span>
                            <span>满赠</span>
                        </p>
                        <p>
                            <span>清新英国梨香 强力去污 <br> 酵素洗衣液3kg/1kg</span>
                        </p>
                        <p>
                            <span>￥29.9</span>
                            <span>￥35</span>
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="./凤爪.jpg" alt="" width="223px" height="180px">
                    </div>
                    <div>
                        <p>
                            <span>新人特价</span>
                        </p>
                        <p>
                            <span>告别啃食尴尬，秘制无 <br>骨凤爪108克</span>
                        </p>
                        <p>
                            <span>￥13</span>
                            <span>￥22</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="seven_image2">
                <div>
                    <div>
                        <img src="./拖鞋.jpg" alt="" width="223px" height="180px">
                    </div>
                    <div>
                        <p>
                            <span>新人特价</span>
                        </p>
                        <p>
                            <span>轻弹云朵居家拖鞋</span>
                        </p>
                        <p>
                            <span>￥9.9</span>
                            <span></span>
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="./学步裤.jpg" alt="" width="223px" height="180px">
                    </div>
                    <div>
                        <p>
                            <span>杭州制造</span>
                            <span>特价</span>
                        </p>
                        <p>
                            <span>薄至2.5mm，海量鲸 <br>吸婴儿拉拉裤学步裤</span>
                        </p>
                        <p>
                            <span>￥59</span>
                            <span>￥69</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="seven_image2">
                <div>
                    <div>
                        <img src="./口罩.jpg" alt="" width="223px" height="180px">
                    </div>
                    <div>
                        <p>
                            <span>浙江制造</span>
                            <span>新人特价</span>
                        </p>
                        <p>
                            <span>【限量抢购中】一次性 <br>医用级三层口罩</span>
                        </p>
                        <p>
                            <span>￥20</span>
                            <span>￥139</span>
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="./棉被.jpg" alt="" width="223px" height="180px">
                    </div>
                    <div>
                        <p>
                            <span>2件3折</span>
                        </p>
                        <p>
                            <span>软软暖暖入睡 澳大利亚 <br>防水羊毛床垫</span>
                        </p>
                        <p>
                            <span>￥20</span>
                            <span></span>
                        </p>
                    </div>
                </div>
            </div>

        </div>

    </nav>
</body>
</html>

样式代码：

nav{
    width: 1519.2px;
    height: 738px;
    background-color: #f4f0ea;
    margin: 0 auto;
}
nav h2{
    width: 112px;
    height: 28px;
    font-size: 28px;
    font-weight: 700px;
    float: left;
    margin-right: 50px;
    margin-left: 220px;
}
nav a{
    font-size: 14px;
    line-height: 90px;
    margin-right: 80px;
    text-decoration: none;
    color: black;
}
nav a.a{
    border-bottom: 2px solid #b4a078;
    color: #b4a078;
    padding-bottom: 2px;
}
nav a.aa{
    margin-right: 600px;
}
nav a:hover{
    color: #b4a078;
}
div.seven_images{
    width: 1090px;
    height: 570px;
    background-color: violet;
    margin: 0 auto;
    display: flex;
    justify-content: space-between  ;
}
div.seven_image1{
    width: 390px;
    background-color: teal;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
div.seven_image2{
    width: 223px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
div.seven_image2>div{
    height: 280px;
    background-color: yellowgreen;
    text-align: center;

}
div.seven_image1 div:first-child{
    height: 400px;
    background-color: yellow;
}
div.seven_image1 div:last-child{
    height: 150px;
    background-color: yellow;
    text-align: center;
}
div.seven_image1 div:last-child>p:first-child span{
    background-color: #e36844;
    color: #fff ;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    font-size: 12px;
}
div.seven_image1 div:last-child>p:nth-child(2) span{
    line-height: 26px;
    font-size: 18px;
    display: inline-block;
}
div.seven_image1 div:last-child>p:last-child {
    line-height: 13px;
    padding: 1px 0 9px;
    text-align: center;
}
div.seven_image1 div:last-child>p:last-child span:first-child{
    font-size: 18px;
    height: 18px;
    display: inline-block;
    color: #d4282d;
    line-height: 10px;
}
div.seven_image1 div:last-child>p:last-child span:last-child{
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}
div.seven_image2>div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
div.seven_image2>div>div:first-child{
    height: 180px;
    background-color: turquoise;
}
div.seven_image2>div>div:last-child{
    height: 92.3px;
    background-color: turquoise;
    font-size: 13px;
}
div.seven_image2>div>div:last-child p{
    margin: 5px;
}
div.seven_image2>div>div:last-child p:first-child>span{
    height: 20px;
    line-height: 20px;
    color: #fff;
    padding: 0 5px;
    background-color: #e36844;
    font-size: 12px;
    display: inline-block;
}
div.seven_image2>div>div:last-child p:nth-child(2)>span{
    /* line-height: 20px; */
    font-size: 14px;
}
div.seven_image2>div>div:last-child p:last-child>span:first-child{
    line-height: 13px;
    height: 13px;
    display: inline-block;
    font-size: 13px;
    color: #d4282d;
}
div.seven_image2>div>div:last-child p:last-child>span:last-child{
    color: #999;
    font-size: 12px;
    text-decoration: line-through;
}

效果图
在这里插入图片描述**注：**背景颜色用来布局时区分模块，布局完成，删除背景颜色，或替换背景颜色即可。

bling flower
关注
多列布局（column）
皖林的博客
10-05 3483
**column-fill**: auto | balance。定义多列中每一列的高度是否统一。 　　这个属性很奇怪。并且在浏览器中不统一。它有两个值：auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的，发现这两个属性并没有区别。在firefox49中测试，这两个属性是有区别的，其中balance是每列高度差不多（对齐），auto就自动合并成一列了，无论自己
4列布局1
C05230的博客
08-08 208
源代码： <!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> *{
3列，4列百分比布局
anchaqian9321的博客
04-19 146
4列 .resources .box2 ul{ width:100%; } .resources .box2 ul li{ float: left; width: 23.75%; margin:0.5%; background: skyblue; } 转载于:https://www.cnblogs.com/hyx626/p/1073...
css多列布局划分为4列,CSS多列布局
weixin_31088435的博客
08-03 1178
需要注意的是：本篇文章的布局，都未对父元素进行清除浮动的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮动，才能在实际情况下使用。(清除浮动的方式在这里不做讨论)一列定宽一列自适应这部分的html结构如下：leftrightright大家先来看看直接在左侧添加浮动是怎么样的吧：不要觉得诧异！因为float最开始的出现就是为了实现这个文字环绕效果的，只不过被攻城师们玩坏了，用...
实现4列等分布局，每列之间有间距
DreamFJ的博客
03-31 4138
昨天被问到一个面试题：怎么实现四列等分布局，每列之间有间距，但是第一列和最后一列与窗口之间没有间距？ 当时想的是直接获取宽度减去各个margin值然后除以4，最后去掉两端的间距就好了。但是面试官说要用到box-sizing实现。。。回来后就试了一下。 body结构：<div class="parent"> <p class="one">第一列</p> <p cla
纯CSS实现的三列布局网页效果实例
09-25
- **纯CSS实现三列布局**：在网页设计中，三列布局是一种常见的页面布局方式，它使用CSS样式来创建三个并行的列，通常包含左侧或右侧的一个固定宽度列（侧边栏），中间的主内容区以及右侧另一个固定宽度列或侧边栏。...
CSS布局实例代码 两列布局实例
11-30
这些布局实例展示了CSS的强大之处，它可以灵活地调整网页元素的位置和尺寸，满足各种设计需求。理解并熟练运用这些布局技巧对于前端开发者来说至关重要，因为它们是构建响应式和用户友好的网站的基础。在实际项目中...
CSS教程：三列固定网页布局实例
09-27
总的来说，这个实例提供了一个基础的三列固定布局模型，适用于初学者了解和学习CSS布局技术，同时也是开发者快速搭建网站布局的一个实用模板。通过深入理解这个实例，我们可以更好地掌握CSS布局原理，从而在网页设计...
安卓布局实例
01-27
本教程“安卓布局实例”旨在帮助初学者理解和掌握如何创建和管理安卓应用中的各种布局。通过实例化的讲解，我们可以深入理解每个布局类型的特点及其在实际应用中的用法。 一、线性布局（LinearLayout） 线性布局是...
实验5、 4行4列的页面布局
weixin_46458146的博客
04-05 1062
这里写目录标题 要实现界面如下： 代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>实验5</title> </head> <body> <div class="top"></div> <div class="midtop"></div> <div clas
CSS flex 一行 4 列布局遇到的问题
weixin_33868027的博客
12-01 9890
开始……前情提要：列表内容是 1 行 4 列的布局方式。1. 希望效果（下图所示）然后我就用了 flex 布局display: flex justify-content: space-between复制代码2. 遇到的问题及原因因为，列表内容根据 数据 展示，所以 数据 当然不会正好是 4 的倍数。所以，就有了下图的 2 种布局效果：3. 解决方法在列表的末尾添加额外的两个 li ：// html...
css多列布局划分为4列,CSS3 column多列布局介绍
weixin_34754795的博客
08-03 1243
CSS3提供了个新属性columns用于多列布局。在这之前，有些大家习以为常的排版，要用CSS动态实现其实是比较困难的。如竖版报纸在我不知columns这属性之前，第一反应是：这有何难，多弄几个并列的div不就行了？但仔细想想确实很难实现，因为内容是动态的。搞几个div容易，但每个div内放多少文字呢？一篇文章该在哪行哪段剪切进不同的div内呢？你肯定不愿意为每一段文字，都在特定的地方插入div标...
基础//页面布局——两栏布局4
weixin_37877794的博客
09-16 154
文章目录一、题目二、我的代码详情三、总结 一、题目 根据题目给出你的答案。 （下高度固定，上自适应） 题目：下高度固定为150px，上自适应。 二、我的代码详情 https://codepen.io/janmie-cjm/pen/LYNBqrz <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=.
用html制作四行四列的表格,HTML表格
weixin_33665771的博客
06-16 8232
释放双眼，带上耳机，听听看~！HTML表格是web1.0时代的产物，现在已经基本上被淘汰了，但是有些时候还是会用到，这里有必要简单的讲述一下。表格由一行或多行单元格组成，应用表格可以让数据展现更有条理，表格标签有：table标签(表格)、tr标签(行)、td标签(单元格)组成。例如，要展现一组企业员工通讯录，通讯录包括员工名称、电话、电子邮件、职务四项，就可以使用多行四栏的表格来展现企业员工通讯录...
css 四列布局 中间空白技巧
ISaiSai的专栏
05-11 3000
1190px 的容器 分成四列 每列290px，中间添加10px 的间距 但是每一列都添加margin-left:10px;最左侧就多出10px的问题 解决方案：外部容器直接添加 margin-left:-10px 冲抵掉多出来的10px 问题高效解决 html> html> head> meta charset="UTF-8"> title
等分四栏布局
sh435367384的博客
04-14 2904
实现四栏等宽，中间设置一定间隙的自适应布局：一：利用浮动（注：如果多加一个元素就会换下一行）1.代码如下：&lt;style type="text/css"&gt; *{ margin:0; padding:0; } .clearfix:after {　　　　 content: "";//添加内容为空 height: 0;//内...
html网格布局四列三行,grid网格布局基础篇：grid常用属性网格布局
weixin_32233079的博客
06-15 3190
一、Grid网格布局概述Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid布局远比 Flex 布局强大。Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，...
单列变双列css_CSS实现多行多列的布局的实例代码
weixin_42434656的博客
02-05 869
1.两列多行：HTML:box1:实现两列多行布局111222333CSS:.box1 {width: 500px;background: #EEEEEE;}.box1 ul {clear: both;overflow: hidden;}.box1 ul li {width: 48%;height: 100px;margin-bottom: 10px;background: skyblue;flo...
CSS Flex实现多样多列布局实例与技巧
本文将深入探讨CSS Flexbox中的几种多列布局方式，帮助开发者理解和应用这一强大的布局工具。Flexbox是CSS3引入的一种响应式布局模式，特别适合处理单行或灵活高度的元素在不同屏幕尺寸下的布局问题。 1. **基本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值