<!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">

    <title>Title</title>

    <style>

        body{

            /*设置页面的四个编辑，如果都是0的话，直接写一个0即可。*/

            margin:0;

        }

        /*id选择器,用#来对id进行指定*/

        #topbar{

            background-color: darkblue;

            /*让文本垂直居中*/

            height: 40px;

            line-height: 40px;

            font-size: 12px;

        }

        /*类选择器：通过.类名的方式进行引用*/

        .container{

            width: 1226px;

            height: 100%;

            background-color: deeppink;

            /*margin-left: auto;*/

            /*margin-right: auto;*/

            /*margin-top: 0;*/

            /*margin-bottom: 0;*/

            margin: 0 auto;

        }

        /*标签选择器*/

        a{

            color:black;

        }

        span{

            color:red;

        }

    </style>

</head>

<body>

<div id = "topbar">

    <div class ="container">

        <div class="top_left">

            <a href="">小米商城</a>

            <span>|</span>

            <a href="">MIUI</a>

            <span>|</span>

            <a href="">loT</a>

            <span>|</span>

            <a href="">云服务</a>

            <span>|</span>

            <a href="">金融</a>

            <span>|</span>

            <a href="">有品</a>

            <span>|</span>

            <a href="">小爱开发平台</a>

            <span>|</span>

            <a href="">政企服务</a>

            <span>|</span>

            <a href="">资质证照</a>

            <span>|</span>

            <a href="">协议规则</a>

            <span>|</span>

            <a href="">下载app</a>

            <span>|</span>

            <a href="">Select Region</a>

        </div>

        <div class="top_login">

            <a href="">登录</a>

            <span>|</span>

            <a href="">注册</a>

            <span>|</span>

            <a href="">消息通知</a>

        </div>

        <div class="top_shop">

            购物车

        </div>

    </div>

</div>

<div class="box">

    <!--无序列表,必须要和li搭配使用-->

    <ul>

        <li>手机 电话卡</li>

        <li>电视 盒子</li>

        <li>笔记本 平板</li>

        <li>家电 插线板</li>

        <li>出行 穿戴</li>

        <li>智能 路由器</li>

        <li>电源 配件</li>

        <li>健康 儿童</li>

        <li>耳机 音响</li>

        <li>生活 箱包</li>

    </ul>

    <ul>

        <li>

            <a href="">

                <!--img标签：网页图片标签，src指定链接的图片地址，alt图片资源加载失败时显示的标题-->

                <img src="" alt="">

            </a>

        </li>

        <li>手机 电话卡</li>

        <li>电视 盒子</li>

        <li>笔记本 平板</li>

        <li>家电 插线板</li>

        <li>出行 穿戴</li>

        <li>智能 路由器</li>

        <li>电源 配件</li>

        <li>健康 儿童</li>

        <li>耳机 音响</li>

        <li>生活 箱包</li>

    </ul>

    <!--dl dt dd是一组标签，叫做d表格标签，-->

    <!--<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。-->

    <dl>

        <dt>帮助中心</dt>

        <dd>账户管理</dd>

        <dd>购物指南</dd>

        <dd>订单操作</dd>

    </dl>

    <dl>

        <dt>服务支持</dt>

        <dd>售后政策</dd>

        <dd>自助服务</dd>

        <dd>相关下载</dd>

    </dl>

    <dl>

        <dt>线下门店</dt>

        <dd>小米之家</dd>

        <dd>服务网点</dd>

        <dd>授权体验店</dd>

    </dl>

    <dl>

        <dt>关于小米</dt>

        <dd>了解小米</dd>

        <dd>加入小米</dd>

        <dd>投资者关系</dd>

    </dl>

    <dl>

        <dt>关注我们</dt>

        <dd>新浪微博</dd>

        <dd>官方微信</dd>

        <dd>联系我们</dd>

    </dl>

    <dl>

        <dt>特色服务</dt>

        <dd>F码通道</dd>

        <dd>礼物码</dd>

        <dd>防伪查询</dd>

    </dl>

</div>

<div>

    <ul>

        <li>

            <p>

                <span class="price">99元</span>

                <!--del：文本带有删除线-->

                <del class="ori_price">208元</del>

            </p>

        </li>

    </ul>

</div>

</body>

</html>

05 div的嵌套的更多相关文章

  1. div中嵌套div水平垂直居中

    div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...

  2. div里嵌套了img底部会有白块问题和图片一像素问题解决

    div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...

  3. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  4. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  5. div中嵌套img元素，4px空白

    写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...

  6. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  7. jquery 实践操作：div 动态嵌套页面

    此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...

  8. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  9. 关于DIV多层嵌套的margin-top的BUG

    今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下: html: <div class="logo"></div> <div ...

随机推荐

  1. echarts的一些基础笔记

    图表标题 title: { x: "left", // 水平安放位置,默认为左对齐,可选为: // 'center' ¦ 'left' ¦ 'right' // ¦ {number ...

  2. Cocos2dx 温馨提示（十）三种缓存类演示

    在介绍了三级缓存,首先,我们必须弄清楚的一个问题:什么是纹理?它的通俗的解释,质感是它的含义的图片. 当图像加载到内存中后,,它是存在于纹理的形式.由于从这里可以看出.纹理事实上就是一块内存.这块内存 ...

  3. Win10忘记ubuntu子系统密码

    原文:Win10忘记ubuntu子系统密码 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wf19930209/article/details/80 ...

  4. C#中的MessageBox消息对话框

    关键字:C# MessageBox 消息对话框 在程序中,我们经常使用消息对话框给用户一定的信息提示,如在操作过程中遇到错误或程序异常,经常会使用这种方式给用于以提示.在C#中,MessageBox消 ...

  5. Arcgis for Javascript实现图

    首先,截个图给大家看结果: 初始化状态 放大后的状态 点击选中后的状态 如上图所看到的,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态.2.缩放后的状态:3.点击选中显示详情状态. ...

  6. React学习（3）——ref，key，PureComponent，bindActionCreator

    ref 如果在html里设置ref那么它就指向这个真实的DOM节点. 如果在组件里设置ref,那么它就指向这个组件实例的引用,和组件里面的this互等. 我们经常在表单input,select里使用, ...

  7. GTK+浅谈之一Windows10下QtCreator中GTK+环境搭建（十几篇）

    一.简介 虽然GTK+是Linux下的开发环境,因为其跨平台特性,有时候需要在Windows上用到它的.如下是在Windows10下配置GTK+的开发环境.        Gnome的开发基础结构是围 ...

  8. bigdata_zookeeper 可视化界面zkui

    安装zkui zookeeper节点的可视化界面有很多种,我使用的是zkui,比较直观,而且可以导入文件,他的Git地址:                     https://github.com ...

  9. apt-spy 软件源更新

    ebian上的apt-get是最快的软件安装方式,不过要用好apt-get,首先得需要找到最快的源,这样安装软件的时候才能获得好的速度,用起来才能得心应手. 有的源在用了一段以后,就会失效,这个时候, ...

  10. 读BeautifulSoup官方文档之html树的搜索(1)

    之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...