考核设计理念
布局结构包括6部分
顶部导航条
头部logo&搜索区
头导航区
主要导航区
商品专区
页脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dlo商店</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top">...</div>
<div class="header">...</div>
<div class="main-head">...</div>
<div class="main-content">...</div>
<div class="market">...</div>
<div class="footer">...</div>
</body>
</html>
技术实现细节（全局定义）：
1.创建一个主体框架container，将container嵌入到区块中，实现了每一部分的内容宽度都一样，配合float：left浮动实现从左往右排列内容。
2.因为需要该项目需要到大量的浮动样式，定义了类flleft和flright，实现样式清晰化，无需在各个模块中重新定义，直接引用该浮动样式。
3.基础样式
* { margin: 0; padding: 0; }
body { font: 12px/1.5 "Microsoft YaHei"; color: #333; }
a { color: #666; text-decoration: none; }
.container { width: 1190px; margin: auto; }
img { max-width: 100%; height: auto; }
1.顶部导航条
使用
<div>和<ul>结构，结合浮动 (float) 实现布局
2.头部Logo与搜索框
float实现左、右布局搜索框使用表单
<form>元素，内含文本输入框和提交按钮
3.主导航区
通过
<ul>列表构建导航项，并通过float实现横向排列
4.主要内容区
三栏布局：左侧分类导航、中间新品发布、右侧快捷图标入口
利用伪类实现左侧导航弹窗
5.商品展示区
商品项通过
<li>列表展示，使用float: left进行横向排列图片大小自适应：
img { max-width: 100%; height: auto; }
6.业脚
写相关信息，如联系电话，企业简介等
考核设计理念
http://localhost:8090//archives/63232