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