（CSS+盒模型+dl列表）实现 毒霸首页中模块部分的布局

最新推荐文章于 2021-12-05 11:35:22 发布
最新推荐文章于 2021-12-05 11:35:22 发布
阅读量643 收藏 1
点赞数 1
分类专栏： HTML5 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/52749197
版权

具体要实现毒霸界面的如下截图部分：

这里写图片描述

使用 dl、dt、 dd标签来实现上面的图片功能，我使用的工具是webstorm，这个工具非常强大，无论从代码提示、界面还是从快捷键上，这个web前端的软件可以说表现的非常强大

上面的每一行就是一个dl标签

拿第一行举例，如果我把第一行中的购物用dt表示， 京东商城用一个dd表示，唯品会也用一个dd表示，除了更多标签使用右浮动意外，其它的标签使用左浮动，那么做出的效果如下：

这里写图片描述

实现上图局部的代码如下：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .kuang {
            width: 890px;
            height: 280px;
            background-color: gray;
        }

        dl {
            margin: 0px;
            margin-top: 1px;
            height: 30px;
            background-color: antiquewhite;
        }

        dl dt, dl dd {
            padding: 0px;
            margin: 0px;
            margin-left: 15px;
            padding-top: 5px;
            width: 70px;
            float: left;
            line-height: 20px;

        }

        .more {
            width: 70px;
            float: right;
            color: forestgreen;
        }

        dl dt {
            color: blue;
        }
    </style>
</head>
<body>
<div class="kuang">
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd>国美手机</dd>
        <dd>聚美优品</dd>
        <dd>品牌精选</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>唯品会</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>

        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>亚马逊</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd class="more">更多>></dd>
    </dl>
    <dl>
        <dt>购物</dt>
        <dd>京东商城</dd>
        <dd>唯品会</dd>
        <dd>苏宁易购</dd>
        <dd>秋装特卖</dd>
        <dd>亚马逊</dd>
        <dd>徐海涛</dd>
        <dd>xuhaitao</dd>
        <dd>hunk xu</dd>
        <dd class="more">更多>></dd>
    </dl>
</div>

细心的会发现我做的效果和毒霸中原作的效果还是有一点差距，就是居中问题，毒霸的效果好像是居中对齐，而我做的效果是左对齐，然后为了达到居中对齐，考虑使用text-align:center，但是发现这个不管用，因为这个属性只对块元素内部的行内元素起作用，比如如果要使dd标签中的文字居中对齐，那么就可以使用text-align:center，而现在是想使很多dd标签居中，那么text-align就不管用

为了解决上面的问题，修改一下html内容，一行只使用一个dd标签，修改后效果如下：
这里写图片描述

上图实现思路：
dt左浮动，dd右浮动
dl,dd,dt{margin:1px auto;padding:0 auto} 必须加上这行，否则 dt 和dd 在浮动时可能会达不到预期
line-height 设置垂直居中
text-algin:center 设置块元素中的内联元素居中对齐
更多 这个超链接也要设置成右浮动

实现代码如下：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .kuang {
            width: 890px;
            height: 280px;
            background-color: gray;
        }

        dl {
            width: 890px;
            height: 32px;
            background-color: antiquewhite;
            margin: 1px;
            margin-left: 1px;
            padding: 0px;

        }

        dt {
            width: 50px;
            float: left;
            background-color: lightskyblue;
        }

        dd {
            float: right;
            width: 838px;
            text-align: center;

           background-color: lightskyblue;
        }
        dl,dd,dt{margin:1px auto;padding:0 auto}
        dt a {
            margin-left: 8px;
            color: blue;
            line-height: 30px;
        }

        dd a {
            width: 80px;
            line-height: 30px;
            margin-left: 12px;
        }

        .more {
            width: 85px;
            float: right;
            color: brown;
        }

    </style>
</head>
<body>
<div class="kuang">
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>苏宁易购</a><a>秋装特卖</a><a>亚马逊</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>苏宁易购</a><a>秋装特卖</a><a>亚马逊</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>苏宁易购</a><a>秋装特卖</a><a>亚马逊</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>苏宁易购</a><a>秋装特卖</a><a>亚马逊</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
    <dl>
        <dt><a>购物</a></dt>
        <dd><a>京东商城</a> <a>唯品会</a><a>国美手机</a><a>聚美优品</a><a>品牌精选</a><a
                class="more">更多>></a></dd>
    </dl>
</div>
</body>

FR:徐海涛（Hunk Xu)

海涛高软
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易聊天室的制作
season1437的专栏
12-02 1194
要求使用三层架构模式实现简易在线聊天室的功能：    二、聊天页面 三、  1、  Models---为实体类库实体类库是作为三成架构的辅助类库存在，数据在传递时都是传递一个封装好的实体；数据库中一个表对应一个实体2、  DAL----DATA ACCESS LAYER:数据访问层数据库中一个表对应一个类文件，其中定义对这个表的增删改查等
基于HTML实现的仿手机毒霸网址大全手机触屏版手机wap导航网站模板(css+html+js+图样).zip
最新发布
04-29
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步...
DivCSS布局实例 用dl dt dd来制作列表
lllljz的专栏
06-16 2408
CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。 　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。 列表的效果如图所示： 用dl dt dd来制作列表" style="margin-top:0px; m
CSS之排列系列--dl, dt, dd--使用/教程/实例
热门推荐
IT利刃出鞘的博客
12-05 1万+
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
练习2：聚美优品商品分类.7z
06-04
制作聚美优品商品分类页面的标准答案.
css dl图片布局,经典图文列表以及CSS布局切换
weixin_29877175的博客
08-03 509
Android：在任务列表隐藏最近打开的app对于某一个应用，如果不想在最近打开的app列表中留下任何纪录，即按下Home键回到主页，再按任务键的时候，任务列表看不到这个app，在AndroidManifest中给Activity标签添加：android:excl...CSS优化1：避免使用@import，外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。 一个CSS...
基于HTML实现的仿手机毒霸网址大全手机触屏版手机wap导航网站模板(css+html+js+图样)
07-14
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步...
如何垂直水居中一个元素？
彼岸花@恋雪
04-13 417
第一种方法: div.box{ weight:200px; height:400px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 -------------
一种合理而灵活的DL布局
PP^frontEnd
10-16 520
兼容IE6/7/8,FF
css盒模型和块级、行内元素深入理解
琉璃BES
10-11 955
一、CSS盒模型  盒模型概述  盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示： 内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在
盒子模型之爱奇艺播放列表
天天向上
10-12 2921
爱奇艺播放列表 神武赵子龙 怒，林更新不抱网红抱女神 点击次数：242445次 --> 旋风十一人 胡歌变教练在撩前女友 点击次数：242445次 --> 太阳的后裔 宋慧乔吃嫩草 点击次数：242445次 --> 山海经之赤影传说 娜扎张翰再度联手 点击次数：242445次 --> //css样式 ul{ /*把无序列表变成行内元素*
商城首页的展示方法
liudaohonglk的博客
09-20 1227
分析一般商城页面不同区域展示不同类型的商品，但是所有都是归属于商品这个类中，只不过分类不同。这样就简单了，我们可以根据类别的编号来得到你想要的商品信息。例子var data = [{"srcB":"http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg","height":240,"alt":"","width":67
/css中dl dt dd的排版实例说明
小小的祈祷的专栏
09-07 1万+
dl dt dd的使用实例 　　在制作内页的时候,会有三个板块,一个是横行的图片列表.一个是主体的竖列图文列表,一个 是侧边栏的图片列表.对于这种排版方式用dl dt dd列表排版是最好不过的了.先看看我们对这个页面的最初布局图.在写css的时候,最好就要养成画布局图的习惯.这样就可以很清晰的了解整个页面的 css分布.哪里用什么代码,如何布局都一目了然了.从这个布局图看来,有三个地方是用到了dl dt dd的列表.先说一下每个dl dt dd的组合代码. 　　一般情况下,一个图片加一行文字这
bootstrap 超链接变按钮
海涛高软
09-25 1万+
<a href="#"> xuhaitao </a>上面代码效果如下： btn btn-default ：变成一个按钮样子 btn-lg : 大号的按钮 btn-block : 按钮填充整个宽度FR:海涛高软 （QQ技术交流群：386476712）
CSS中的固定布局和相对布局
海涛高软
10-03 7465
在讲固定布局和相对布局之前先回顾一下流动布局、冻结布局以及绝对布局流动布局，不在流中，但是浮动元素的边界会影响内联元素的流动，分左浮动和右浮动，注意要配合宽度width属性一起使用 冻结布局： body下弄个div容器，嵌套所有内容，然后给这个容器设定宽度和左右margin设置成auto绝对布局： 不在流中，真的会被其它块元素完全忽视，注意其位置是相对于父元素而言固定布局不在流中，会被其它元素完全忽
three.js 制作建一个简单的模型编辑器
海涛高软
10-26 5804
<!DOCTYPE html> <html> <head> <title>three.js - demo2</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scal...
HTML 切换标签页的效果
海涛高软
10-03 5070
效果画面： 代码：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .waiwei { width: 350px; height: 400px; backgroun
（浮动+盒模型+无序列表）实现切换图片效果
海涛高软
10-04 3437
下面做个毒霸首页中图片切换的效果，如下： 实现代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .zong { width: 600px; height: 70px;
CSS中冻结布局
海涛高软
10-03 1917
符合以下两条的布局均可叫冻结布局：1 在body下弄个div,这个div套住body下的所有内容 2 设置步骤一种div的margin-left和margin-right为auto ，以及设定width下面就是冻结布局的一个效果截图：FR:海涛高软（Hunk Xu) QQ技术交流群：386476712

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值