10-30 H5第一次课品牌墙

最新推荐文章于 2025-04-27 16:25:19 发布

Luhuadeng

最新推荐文章于 2025-04-27 16:25:19 发布

阅读量434

点赞数

分类专栏： html5 文章标签： html css

本文链接：https://blog.youkuaiyun.com/Luhuadeng/article/details/83551979

版权

html5 专栏收录该内容

1 篇文章

订阅专栏

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

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.youkuaiyun.com/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;