品牌墙——本次课程的主要内容是介绍

1 视口设置

<!-- 设置viewport（视口）根据屏幕的宽度来确定视口的宽度，不允许用户改变屏幕的大小 -->
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" name="viewport" >

2 HTML5新增的结构标签header，section，footer

header通常用来表示页眉，footer用来表示页尾。section表示一个区块

 <body><header></header><section class="main"></section><footer></footer></body>

3介绍了界面的样式初始化

初始化浏览器的样式。由于浏览器为某一些标签设置了默认的样式。比如body有外边距，ul有内边距，li有项目符号，a标签有下划线，h1等有外边距，字体大小为2em等。通常我们在设计页面时，希望自己定义各个标签的样式。这时就需要用到样式初始化。
我们这个例子中主要用到了两个标签的初始化。如下代码所示。

body,ul{margin: 0; padding: 0;
}

实际上，页面样式初始化是一项非常常见的工作，因此网上存在一些已经写好的初始化代码。我们可以直接拿过来用。文章：CSS样式初始化代码，对CSS样式初始化进行了详细的介绍。[https://blog.csdn.net/pengpengpeng85/article/details/52070583]

4 介绍了文字（行内元素）的对其方式，水平居中

文字的水平方向的居中，是将所在块状元素的text-align属性设置为center即可完成。

结构代码html

    <header><span>服装品牌墙</span></header>

样式代码css

header{ text-align: center; /*属性将块状标记header内文字（行状元素）水平居中*/width: 100%;
}

上述代码中的header是一个块状元素，text-algin:center，将其中的文字（行状元素）在区块的中间显示，由于span是一个行状元素，因此“服装品牌墙”就水平居中显示了。

5 文字（行状元素）在块状元素中垂直居中

主要通过设置块状元素的高度与行高相等的方式实现。结合上面的代码，就可以实现文字在块状元素中的水平和垂直两个方向上的居中显示。

<header><span>服装品牌墙</span>
</header>

header{text-align: center;width: 100%;line-height: 45px;height: 45px;}

4. 介绍了浮动布局float的使用方法

 块状元素内部的子元素（块状和行状）可以设置为float，以便在同一行中显示多个子元素。浮动后的元素脱离原来文档流，浮动在原始文档流的上面。因此父块状元素的高度无法通过字块撑起，因此高度会变成0.为了解决这个问题，是的父容器的高度随着在子块浮动情况依然可以随着子块的高度的变化而变化。可以在父容器的结束标签的后面添加一个清除浮动标签。具体代码如下所示。li被设置为浮动，在ul的最后添加一个div清除浮动。

 <ul><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><li><a href="#"><img src="./images/anta.png" alt=""><span>安踏</span></a></li><div style="clear: both;"></div></ul>

5. 介绍了块状元素在父容器中的居中设置方式

当块状父容器和（唯一）子块都已经设置宽度后，这是字块就可以通过margin:0 auto；将字块放置在父容器的中间。具体代码示例如下：

<section class="main"><ul></ul>
</section>

section.main{width:100%;
}
ul{width: 90%;margin: 0 auto 0 auto;
}

6. 介绍了字体大小为0的设置方式

如果不想文字显示出来，可以设置文字的字体大小为0，这种方式可以用来设置行内文字是否显示。去掉神奇的4px问题（多个图片并排显示时，中间存在一个4px的间隔）。

font-size:0;

7 提醒大家上网查询，行内元素（inline），块状元素（block），行内块元素（inline-block）的区别。

10-30 H5第一次课品牌墙相关推荐

全国计算机等级AJIL,全国计算机二级VB知识点2015第一次课
<全国计算机二级VB知识点2015第一次课>由会员分享,可在线阅读,更多相关<全国计算机二级VB知识点2015第一次课(20页珍藏版)>请在人人文库网上搜索. 1.全国计算机二 ...
选修课《创新创业执行力》第一次课有感
第一次给学生上公共选修课--<创新创业执行力>,一看学生名单,200人,还真的压力很大,但现在,我已经喜欢上这门课程了. 平台学习资料.手册下载网址(http://pan.baidu.c ...
About 10.30 This Week
Motivation: 1. Math 2. RE 3. English 一:Math 真实的认识到自己进度太慢了,我决定接下来几周卷数学,下周月考一定不能四五六章空着了,这次月考刚好考了个及格,除了 ...
H5案例课—5点连线画一个爱-岑远科-专题视频课程
H5案例课-5点连线画一个爱-1329人已学习课程介绍主要针对Mugeda有一定基础的同学,购买前请先学习初级课程,初级课程地址: http://edu.csdn.net/cour ...
一周第一次课笔记（1月22日）
一周第一次课(1月22日) 1.1学习之初 1.2约定 1.3认识Linux 1.4安装虚拟机 1.5安装centos7 1.1学习之初学习之前合理定位自己给自己设定1个合理目标计划好学习的期限 ...
国货如此畸形，改革30年无国际品牌
http://club.china.alibaba.com/forum/thread/view/51_25802045_.html 在我们这个特别能忘却,特别能原谅,特别能感恩的社会,特别有必要倡导一 ...
大搜车Java面试 2017.10.30
大搜车Java面试 2017.10.30 杭州余杭区办公环境一般,两层一栋的办公楼,但是开发工位是连成一片的没有卡位一说.比较拥挤. 面试两轮技术面,总共耗时3小时,各种等待就有1小时,最后人事说三天 ...
10.30纪中DAY2_小麦亩产一千八（kela）休息（rest）军训（training）
noip2019-counting down three weeks 纪中day2 10.30纪中B组notes 小麦亩产一千八(kela)-_- 休息(rest) 军训(training) 题目来源 ...
视频教程-【10天企业定制课】2019年PS软件photoshop/CC应用计划学习视频-UI
[10天企业定制课]2019年PS软件photoshop/CC应用计划学习视频教学产品线与企业合作项目负责人,移动互联学院教学总监,从事培训与UI/UED课程研发工作多年,拥有数万学员且平均薪资位居 ...

10-30 H5第一次课品牌墙

品牌墙——本次课程的主要内容是介绍

1 视口设置

2 HTML5新增的结构标签header，section，footer

3介绍了界面的样式初始化

4 介绍了文字（行内元素）的对其方式，水平居中

5 文字（行状元素）在块状元素中垂直居中

4. 介绍了浮动布局float的使用方法

5. 介绍了块状元素在父容器中的居中设置方式

6. 介绍了字体大小为0的设置方式

7 提醒大家上网查询，行内元素（inline），块状元素（block），行内块元素（inline-block）的区别。

10-30 H5第一次课品牌墙相关推荐

最新文章

热门文章

10-30 H5第一次课 品牌墙

品牌墙——本次课程的主要内容是介绍

1 视口设置

2 HTML5新增的结构标签header，section，footer

3介绍了界面的样式初始化

4 介绍了文字（行内元素）的对其方式，水平居中

5 文字（行状元素）在块状元素中垂直居中

4. 介绍了浮动布局float的使用方法

5. 介绍了块状元素在父容器中的居中设置方式

6. 介绍了字体大小为0的设置方式

7 提醒大家上网查询，行内元素（inline），块状元素（block），行内块元素（inline-block）的区别。

10-30 H5第一次课 品牌墙相关推荐

最新文章

热门文章

10-30 H5第一次课品牌墙

10-30 H5第一次课品牌墙相关推荐