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