Web_3 Html结构-小米
2019-12-29 本文已影响0人
kerooooo
中文类名：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div class="导航栏">
<div class="列 链接组 左">
<a href="#">小米商城</a>
<a href="#">MIUI</a>
<a href="#">IOT</a>
<a href="#">Item</a>
<a href="#">Item</a>
<a href="#">Item</a>
<a href="#">Item</a>
</div>
<div class="列 链接组 右">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
</div>
</div>
<div class="首屏">
<div class="行 产品导航">
<div class="LOGO"><img src="#" alt="#"></div>
<div class="链接组">
<a href="#">小米手机</a>
<a href="#">Redmi红米</a>
<a href="#">电视</a>
<a href="#">笔记本</a>
<a href="#">家电</a>
<a href="#">路由器</a>
<a href="#">智能硬件</a>
<a href="#">服务</a>
<a href="#">社区</a>
</div>
<div class="搜索栏">
<input type="text">
<button>搜索</button>
</div>
</div>
<div class="行 主促销">
<div class="产品分类">
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
</div>
<div class="轮播">
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
</div>
</div>
<div class="行 辅促销">
<div class="快速通道">
<div class="行">
<div class="列">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="列">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="列">
<img src="#" alt="#">
<div>选购手机</div>
</div>
</div>
<div class="行">
<div class="列">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="列">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="列">
<img src="#" alt="#">
<div>选购手机</div>
</div>
</div>
</div>
<div class="单品"><img src="#" alt=""></div>
<div class="单品"><img src="#" alt=""></div>
<div class="单品"><img src="#" alt=""></div>
</div>
<div class="行 明星单品">
<div class="单品">
<img src="#" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
<div class="单品"></div>
<div class="单品"></div>
<div class="单品"></div>
<div class="单品"></div>
</div>
</div>
<div class="主体">
<div class="行 卡片组">
<div class="头">
<div class="标题">家电</div>
<div class="标签组">
<div class="文字">查看全部</div>
<div class="图标"><img src="#" alt=""></div>
</div>
</div>
<div class="体">
<div class="列 左"><img src="#" alt=""></div>
<div class="列 右">
<div class="行">
<div class="单品">
<img src="" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
<div class="单品">
<img src="" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
<div class="单品">
<img src="" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
</div>
<div class="行">
<div class="列"></div>
<div class="列"></div>
<div class="列"></div>
<div class="列"></div>
</div>
</div>
</div>
</div>
<!-- more -->
</div>
<div class="页脚">
<div class="行 售后">
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
</div>
<div class="行 更多">
<div class="链接组">
<div class="列">
<a href="#">账户管理</a>
<a href="#">账户管理</a>
<a href="#">账户管理</a>
</div>
</div>
<div class="联系方式">
<div class="电话">400-100-5678</div>
<div class="描述">周一至周日 8:00-18:00
（仅收市话费）</div>
<button>人工客服</button>
</div>
</div>
<div class="行 元信息">
<div>链接</div>
<div>链接</div>
<div>链接</div>
<div>链接</div>
<div>链接</div>
</div>
</div>
</body>
</html>
英文类名：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div class="row nav">
<div class="col link-group left">
<a href="#">小米商城</a>
<a href="#">MIUI</a>
<a href="#">IOT</a>
<a href="#">Item</a>
<a href="#">Item</a>
<a href="#">Item</a>
<a href="#">Item</a>
</div>
<div class="col link-group right">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
</div>
</div>
<div class="row first-screen">
<div class="row product-nav">
<div class="col LOGO"><img src="#" alt="#"></div>
<div class="col link-group">
<a href="#">小米手机</a>
<a href="#">Redmi红米</a>
<a href="#">电视</a>
<a href="#">笔记本</a>
<a href="#">家电</a>
<a href="#">路由器</a>
<a href="#">智能硬件</a>
<a href="#">服务</a>
<a href="#">社区</a>
</div>
<div class="col search">
<input type="text">
<button>搜索</button>
</div>
</div>
<div class="row main-promote">
<div class="col product-cat">
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
</div>
<div class="col slider">
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
</div>
</div>
<div class="row sub-promote">
<div class="col shortcut-group">
<div class="row">
<div class="col">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="col">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="col">
<img src="#" alt="#">
<div>选购手机</div>
</div>
</div>
<div class="row">
<div class="col">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="col">
<img src="#" alt="#">
<div>选购手机</div>
</div>
<div class="col">
<img src="#" alt="#">
<div>选购手机</div>
</div>
</div>
</div>
<div class="col product"><img src="#" alt=""></div>
<div class="col product"><img src="#" alt=""></div>
<div class="col product"><img src="#" alt=""></div>
</div>
<div class="row product-star">
<div class="col product">
<img src="#" alt="">
<div class="text">
<div class="title">小米蓝牙耳机</div>
<div class="desc">顽音系列</div>
<div class="price">179元</div>
</div>
</div>
<div class="col product"></div>
<div class="col product"></div>
<div class="col product"></div>
<div class="col product"></div>
</div>
</div>
<div class="row main">
<div class="row card-group">
<div class="row head">
<div class="col cat-title">家电</div>
<div class="col tab-group">
<div class="text">查看全部</div>
<div class="icon"><img src="#" alt=""></div>
</div>
</div>
<div class="row body">
<div class="col left"><img src="#" alt=""></div>
<div class="col right">
<div class="row">
<div class="product">
<img src="" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
<div class="product">
<img src="" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
<div class="product">
<img src="" alt="">
<div class="文字">
<div class="标题">小米蓝牙耳机</div>
<div class="描述">顽音系列</div>
<div class="价格">179元</div>
</div>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
<!-- more -->
</div>
<div class="row footer">
<div class="row support">
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
<div class="链接"><img src="#" alt="#">预约维修服务</div>
</div>
<div class="row more">
<div class="col link">
<div class="col">
<a href="#">账户管理</a>
<a href="#">账户管理</a>
<a href="#">账户管理</a>
</div>
</div>
<div class="col contact">
<div class="tel">400-100-5678</div>
<div class="desc">周一至周日 8:00-18:00
（仅收市话费）</div>
<button>人工客服</button>
</div>
</div>
<div class="row meta">
<div>链接</div>
<div>链接</div>
<div>链接</div>
<div>链接</div>
<div>链接</div>
</div>
</div>
</body>
</html>
