小米商城主界面一共可以分为四部分

顶部栏
导航栏
主页内容
内容详情
脚部

第一部分

可划分为：

实现步骤：

1.先用div创建出各个模块，观察网页发现所有部分都是剧中显示，在div中加入居中的div。

 <body><!-- 顶部栏 --><div class="topBar"><div class="container"></div></div><!-- 导航栏 --><div class="header"><div class="container"></div></div><!-- 主页内容 --><div class="sit-content"><div class="container"></div></div><!-- 内容详情 --><div class="content-desc"><div class="container"></div></div><!-- 脚部 --><div class="footer"><div class="container"></div></div></body>

2.分析并编写第一部分中的第一小步。

（1）首先在topbar的div中添加三个div模块，分别代表左边的导航栏，以及右边的登陆和购物车。然后在导航栏中添加文字和符号。

<div class="topBar"><div class="container"><div class="topBar_list"><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="#">智能生活</a><span>|</span><a href="#">Select Location</a></div><div class="shop"></div><div class="login"></div></div></div>

（2）在购物车的div中添加文字和购物车的图标

                <div class="shop"><span>图标</span><a href="#">购物车（0）</a></div>

（3）编写css样式，引入css样式。

<link rel="stylesheet" type="text/css" href="css/reset.css" />

（4）右击小米商城主页，单机检查，选择body的div查看body的style。

（5）新建一个body的css文件，将需要用到的样式复制进去。

body{font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;color: #333;
}

css的写法：

.标签名{
属性：XXX；
}

（6）编写topBar的css样式

.topBar{width: 100%;height: 40px;background-color: #333;
}

（7）编写container的css样式：

.container{width: 1226px;height: 100%;margin: 0 auto;
}

margin：0 auto；是居中显示，margin是外边距的意思。
（8）设置topbar中三部分的css：

.topBar.topBar_list{float: left;
}
.topBar.shop{float: right;
}
.topBar.login{float: right;
}

补一张图

1代表topBar，1中的容器是container，2是topBar_list，3是login，4是shop

解决div不在同一行的问题：

<div style="display:inline"><div id="div1" style="float:left">div1   content</div><div id="div2" style="float:left">div2   content</div>
//style="display:inline" 需要在同一行的div标签中加入这个属性
</div>

（9）设置a标签中的字体大小和颜色。

.topBar a{color: #e0e0e0;font-size: 12px;display: inline-block;line-height: 40px;
}

其中display: inline-block;是将字体转化为行内块，line-height: 40px;行内块的高度为4px，这样可以让鼠标悬浮在行内块这一个范围内都能对此处进行操作（单击超链接）
（10）对topbar中的span进行设置：

.topBar span{color: #424242;margin: 0 .5em;
}

margin: 0 .5em; 解释：0是上下的间距，后面的.5em是左右的间距，是14*0.5，也就是7px，14px是字体之间的间隔长度。
（11）对shop标签进行设置：

前端web实训——小米商城（第一天）相关推荐

educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作
educoder头歌Web实训太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:动态焦点图页面的样式设计任务描述本关任务: 完成动态焦点图 ...
educoder头歌Web实训 web课——综合应用案例：限时秒杀效果的制作
educoder头歌Web实训太原理工web课--综合应用案例:动态焦点图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:限时秒杀效果图片渲染 [TOC] 图1如下链接为htt ...
杰普实训日志第一天学习内容
杰普实习日志第一天学习内容主讲人:李春雨主讲人原创内容,https://gitee.com/plusyu/shixun_hdjd/commit/7fd126f6bacfec6b27357a22b ...
东软睿道实训日记—第一天
入园第一天,很兴奋,心想着自己也是半个企业人了.沈阳东软A园环境幽静宜人,真是大企业有大家风范,给员工营造的工作环境就很大气.但是我们的是东软实训楼就略显陈旧单调了.不过还是很有学习氛围的,每个学生都 ...
郑州大学WEB实训课程体系
郑大实训课程体系总计课时:208课时说明:最新就业班课程体系分为5部分: Web前台(HTML5)技术本模块包括HTML5.CSS3.JavaScript .DOM和JQuery几部分,可完成B ...
Java Web实训项目：西蒙购物园
一.功能需求 1.只有注册用户成功登录之后才可查看商品类别,查看商品,选购商品,生成订单.查看订单. 2.只有管理员才有权限进入购物网后台管理,进行用户管理.类别管理.商品管理与订单管理. 二.设计思 ...
Java Web实训项目：西蒙购物网（Simonshop）
一.功能需求 1.只有注册用户成功登录之后才可查看商品类别,查看商品,选购商品,生成订单.查看订单. 2.只有管理员才有权限进入购物网后台管理,进行用户管理.类别管理.商品管理与订单管理. 二.设计思 ...
php淘兴趣,Web前端开发实训案例教程(中级1+X证书制度试点培训用书)
目录第1章实践概述 1.1 实践目标 1.2 实践知识地图 1.3 实施安排 1.3.1 实验(技术专题)部分 1.3.2 综合实践部分第2章开发工具(HBuilder) 2.1 实验目标 2 ...
Web前端开发实训 -- 弹球王小游戏
1. 作品展示 2. 代码(全) 链接:https://pan.baidu.com/s/1Mxdz8rR18uM_7yuY-eTwbQ 提取码:6666 以下是项目目录及部分代码. ① 项目目录 ② ...
html css javascript 动漫网页设计成品 (妖狐小红娘) 学生漫画网页DW制作 web实训网页设计 HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...

前端web实训——小米商城（第一天）