目录
- HTML部分
- CSS_默认风格重置
- CSS_1
- CSS_2
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>伪海尔商城</title> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="css/test.css" /> </head> <body> <!-------------------------------头部左----------------------------> <!--定义头部容器1--> <div id="header-bar-box"> <!--定义包装 内容容器--> <div class="wrapper container"> <!--定义选择城市容器 左浮动 --> <div class="choose-city-box"> <span class="s-title">选择城市：</span> <span class="s-city"> <em class="em-city">西安</em> </span> </div> <a class="a-fav-ehaier" href="#">收藏海尔商城</a> <!--定义微信 容器 --> <span class="s-weixin-box"><a href="#">微信 <!--设置“微信下载”下拉框容器 --> <div class="s-weixin-top"> <img src="img/wechat.png" alt="微信扫描"> </div> </a> </span> <!--定义app 容器--> <span class="s-app-box"> <a href="">商城app <div class="s-app-top"> <img src="img/qrehaier.png" alt="商城app"/> </div> </a> </span> <!-------------------------------头部+1+右----------------------------> <!--定义头部右侧部分 --> <div class="all-haeder-bor"> <!--定义右侧无序列表--> <ul class="ul-topnav"> <li>嗨，欢迎来到海尔官方商城 请</li> <li><a href="#">登录</a></li>| <li><a href="#">免费注册</a></li>| <li><a href="#">我的订单</a></li> <li><a href="#">服务中心</a></li>| <li><a href="#">企业采购</a></li>| <li><a href="#">互动社区</a></li>| <li><a href="#">海尔官网</a></li> </ul> </div> </div> </div> <!-------------------------------身体----------------------------> <!--定义身体容器2--> <div class="all-header-cont"> <!--定义包装 内容2容器--> <div class="wrapper1 container"> <!--身体+2+左侧--> <h1 class="h1-site"> <!--此处a有图片在css中--> <a href="#"></a> <img src="img/slogan.png" alt="海尔"/> </h1> <!-----------身体容器+内容包装容器+搜索框----------> <div class="all-search"> <form class="hotsearch"> <input class="text-search" type="text" name="" value="" /> <input class="but-search" type="submit" name="" value="" /> </form> <div class="hot-words"> <ul> <li>热门搜索：</li> <li><a href="#">波轮洗衣机</a></li> <li><a href="#">电热水器 </a></li> <li><a href="#">三门冰箱 </a></li> <li><a href="#">滚筒洗衣机 </a></li> <li><a href="#">空调 </a></li> <li><a href="#">智能彩电</a></li> <li><a href="#">冰箱 </a></li> </ul> </div> </div> <!---------------身体+2+右侧-----------> <div class="head-promise"> <a class="a-promiseFreeship" href="#">全场免运费</a> <a class="a-promiseDeliverinstall" href="#">送装同步</a> <a class="a-promiseSatisfy" href="#">满意再付款</a> </div> </div> </div> <!-------------------------------内容+导航链接----------------------------> <!--<nav> 元素只是作为标注一个导航链接的区域。--> <div class="nav"> <!--定义内容容器--> <div class="container"> <!--定义 清除浮动容器 --> <div class="clearfix"> <!--导航栏+左侧--> <!--定义类型列表ul--> <ul class="all-category-box"> <p>商品分类</p> <!--导航+商品分类+下拉栏内容--> <!--设置类型总容器--> <div class="all-category-box-top container"> <!--设置类型小容器1--> <div class="all-category-box-top1"> <!--自定义列表 自定义列表以 <dl> 标签开始。列表 每个自定义列表项以 <dt> 开始。行 每个自定义列表项的定义以 <dd> 开始。个 --> <!--定义小类型自定义列表1_1 --> <dl class="dl-category-box-top1"> <dt> <a href="#">冰箱</a></dt> <dd><a href="#">单门 </a>| <a href="">两门 </a>| <a href="">三门 </a>|<a href=""> 多门 </a>|</dd> <dd><a href="#">对开门</a></dd> </dl> <!--定义小类型自定义列表1_2--> <dl class="dl-category-box-top1"> <dt><a href="#">家用空调</a></dt> <dd><a href="#">壁挂式空调 </a>| <a href="">柜式空调 |</a></dd> <dd><a href="#">空气类产品 </a> </dd> </dl> <!--定义小类型自定义列表1_3--> <dl class="dl-category-box-top1"> <dt><a href="#">商用空调 </a></dt> <dd><a href="#">家用中央空调 </a>| <a href="">嵌入机</a> | </dd> <dd><a href="#">商用柜机 </a> </dd> </dl> <!--定义小类型自定义列表1_4--> <dl class="dl-category-box-top1"> <dt><a href="#">洗衣机</a></dt> <dd><a href="#">双缸 </a>|<a href=""> 波轮 </a>|<a href=""> 滚筒</a> |<a href=""> 免清洗</a> | </dd> <dd><a href="#">mini </a>|<a href=""> 洗烘一体</a> |<a href=""> 干衣机</a></dd> </dl> <!--定义小类型自定义列表1_5--> <dl class="dl-category-box-top1"> <dt><a href="#">冰柜</a></dt> <dd><a href="#">冰吧 </a>| <a href="">酒柜 </a>|<a href=""> 冷柜</a> |<a href=""> 展示柜</a> </dd> </dl> </div> <!--定义类型小容器2--> <div class="all-category-box-top2"> <!--定义小类型自定义列表2_1--> <dl class="dl-category-box-top2"> <dt><a href="#"