05 div的嵌套
<!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的嵌套的更多相关文章
- div中嵌套div水平垂直居中
div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...
- div里嵌套了img底部会有白块问题和图片一像素问题解决
div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...
- div中嵌套div速度将会同样很慢
---恢复内容开始--- div中嵌套了div速度将会同样很慢 最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- div中嵌套img元素，4px空白
写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...
- div中嵌套div中使用margin-top失效问题
div中嵌套div中使用margin-top失效问题
- jquery 实践操作：div 动态嵌套页面
此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...
- "margin塌陷现象"div盒子嵌套盒子外边距合并现象
问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...
- 关于DIV多层嵌套的margin-top的BUG
今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下: html: <div class="logo"></div> <div ...
随机推荐
- Spring boot参考指南
介绍 转载自:https://www.gitbook.com/book/qbgbook/spring-boot-reference-guide-zh/details 带目录浏览地址:http://ww ...
- override 与overload 的差别
方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现. 重写(Overriding)是父类与子类之间多态性的一种表现,而重载(Overloading)是一个 ...
- 深入了解Java虚拟机
一.垃圾收集 Java虚拟机堆不停的运转java由程序创建的所有对象.当一个对象不再被引用,它使用堆空间能够被回收,以便兴许的新对象所使用. 垃圾收集器必须能够断定哪些对象是不再被引用的,而且能够把它 ...
- expdp&impdp
1 创建逻辑文件夹,该命令不会在操作系统创建真正的文件夹,最好以system等管理员创建. create directory dpdata1 as '/opt/oracle/dpdata1'; c ...
- XBMC 最新版本号错误
1. Syntax error: "(" unexpected 改动 tools/depends下的makefile.include 将NDK_VER=0x9d
- SpringMVC+easyUI 分页，查询 （完整的CRUD）
最终完毕CRUD的功能了,注意,这里会对前面有一些修改,UserController的listUser() 已经改写了,如今把所有整理一下吧. JSP: <%@ page language=&q ...
- C#实现万年历(农历、节气、节日、星座、星宿、属相、生肖、闰年月、时辰)
C# 万年历 农历 节气 节日 星座 星宿 属相 生肖 闰年月 时辰地址:http://www.cnblogs.com/txw1958/archive/2013/01/27/csharp-calend ...
- ASP.NET Core 设置和初始化数据库 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 设置和初始化数据库 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 设置和初始化数据库 上一章节中我们已经设置和配置好了 EF ...
- DataGrid数据绑定
后台数据绑定 用户场景是生成报表,展示公司各员工每个月的绩效 数据结构 包括报表和单个员工绩效两个实体 public class Report { /// <summary> /// 统计 ...
- DateTime格式转换结果
Console.WriteLine(string.Format("ToLongDateString:{0}", DateTime.Now.ToLongDateString())); ...