品优购首页布局
命名集合:
名称 | 说明 |
快捷导航栏 | shortcut |
头部 | header |
标志 | logo |
购物车 | shopcar |
搜索 | search |
热点词 | horwrods |
导航 | nav |
导航左侧 | dorpdown 包含 .dd .dt |
导航右侧 | navitems |
1. shortcut制作
1.通栏的盒子 命名为shortcut快捷导航的意思,注意,这里给行高,可以继承给里面的子盒子。
2. 里面包含版心的盒子。
3. 版心盒子里面包含1号左侧盒子左浮动。
4. 版心盒子里面包含2号右侧盒子右浮动。
2. header制作
1. header盒子必须要有高度
2. 1号盒子是logo标志 定位
3. 2号盒子是search 搜索模块 定位
4. 3号盒子是hotwrods 热词模块 定位
5. 4号盒子是shopcar 购车车模块
3. nav制作
1. nav 盒子通栏有高度 而且有个下边框
2. 1号盒子左侧浮动 dorpdown 下拉导航 里面包含 dt dd
3. 2号盒子右侧浮动 navitems 导航栏组
案例命令(1):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>
<meta name="description" content="品优购JD.COM- 专业的综合网上购物商城,销售家,数码通讯
,电脑,家居百货,服装服饰,母婴,图书,食品等数万个品牌优质商品,
便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<!-- 引入facicon.ico网页图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- 引入css初始化的css 文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共样式的css 文件 -->
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!-- 顶部快捷导航start -->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您!</li>
<li>
<a href="#"> 请登录 </a>
<a href="#" class="style-red"> 免费注册 </a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li class="spacer"></li>
<li>我的品优购
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>品优购会员</li>
<li class="spacer"></li>
<li>企业采购</li>
<li class="spacer"></li>
<li>关注品优购
<i class="icomoon"></i>
</li>
<li class="spacer">&l