YuKing_HONG的博客

给其父元素添加text-align:center使其水平居中，这个只是对行内元素和行内块元素有效。而P元素是块级元素，所以不能使用上面的方法。再给他父元素two加 position: relative;然后开始计算上面距离的数值和左边距离的数值，这里分别是。行内元素和行内块元素水平居中，给其父元素添加text-align:center；所以案例里面给one加了 text-align: center之后span就会水平居中了。红色1块是span，属于行内元素。绿色2块是p，属于块级元素。

ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接。专业的综合网购商城，销售家电，数码通讯，电脑、家居百货、服饰服装、母婴、图书、食品等优质商品，便捷，诚信服务，为您提供愉悦的上网购物体验。写好一个样式，其余的页面用到这些相同的样式。具有不可替代性，是我们内页的一个重要标签，是搜索引擎了解网页的入口喝对网页主题归属的最佳判断点。，从而帮助网站获取免费的流量，进而在搜索引擎上提高网站的排名，提高网站的知名度。

效果如下，制作一个下拉框，箭头用字体库做。

阿里图库注册一个账号。把需要的图标加入购物车。点击购物车后-->添加到项目解压之后的文件要放到和html文件同一个目录下（我因为之前没有在一个目录一直没有成功，也不知道为啥）点击下载下来的这个网页，会有相应的代码和教程。如下所示根据他的提示就可以了。注意没有下载的图标是使用不了的。

这样的好处是，不用设置任何宽度，每个盒子可以自适应内容的宽度。用一个和所有浮动盒子等宽的大盒子包裹起来，然后设置大盒子的margin:0 auto;需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距，内填充，边框等。还有大盒子里面所有元素浮动之后，大盒子的高度消失的问题。还是用一个大盒子包裹起来，大盒子的position设置成absolute或者relative，然后大盒子的left为50%，margin-left设置为负的大盒子宽度的一半，这也需要知道大盒子的宽度。

在网页布局中我们经常会用到display:inline-block;好处是：能够将块状元素按照内联元素的方式布局，同时能设置宽高。个人感觉很好用，可是用多了慢慢的问题就来了？

不要在意我的图片，主要是巩固显示隐藏。

【代码】淘宝焦点图---pink老师案例。

哔哩哔哩里面pink老师课程那里实操。代码和图片资源在末尾

案例效果如下，主要是布局。

【代码】pink老师:浮动--小米布局案例2。

这里主要是练习浮动布局。pink老师课程案例。

个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。

没有按照老师的写，可能存在差异。

案例模块制作代码