本周在继续完善大众点评，遇到了几处知识性问题，特此记录
关于背景
- 背景的作用就是把图片设置为自己想要的状态
- 背景图可以重复设置
- 设置背景需要的属性background-…
- 当设置多个背景的时候：用background-image引用了多个图片，在后面的相应属性操作也可以用前后来区分
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
代码中的就是相互对应的例子
- 背景的位置，依靠background-origin属性来定位背景图片，属性有三个属性值content-box, padding-box,和 border-box，对应的关系如下：
- 但是笔者感觉背景属性的使用还是不太灵活，因为笔者没有发现背景的图片能像盒子模型那样调整的灵活，所以当出现一些图片的时候，还是推荐使用<img>标签
关于全局属性的理解
- 当初在看html的时候没有好好理解这个概念，本周重新认识到了
- 可以给元素设置属性，不同的属性有私有的属性值
- 有一些属性可以给大多数的元素设置，这些属性就叫做全局属性
- 全局属性方便了我们对于html的整体把握，以及一些细节的运用
- 常见的全局属性：id、class、style…
关于data-*的理解
- data是一种全局属性
- 在写大众点评的时候遇到了一个奇怪的东西
- 这段代码里有文字，data-click-title一类，乍一看容易理解成这是一个点击之后就会出现的操作，但是查阅资料之后并非如此
- 这段代码类似于我们在c++中理解的变量，js中的，data也可以理解成为js中的var，我们需要在这一段元素当中标记一些东西的时候，就可以把这些东西存储到这个data-*-..变量中
- 为什么会有这样的格式呢？
- 就像我们设置class类一样，便于记忆
- data属性有他特有的命名方式
- data-* 属性由以下两部分组成：
a.属性名不要包含大写字母，在 data- 后必须至少有一个字符。
b.该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。
- data-* 属性用于存储私有页面后应用的自定义数据。
- data-* 属性可以在所有的 HTML 元素中嵌入数据。
关于bootstrap
- 一行必定分成12列，只不过看自己是否需要的不同引用多少
- 当相加多余12列的时候，自动换行
- xs、md、sm等是根据页面的宽度不同来分级发挥作用的
改进导航栏
- 导航栏出现了问题，就是排列的问题（上图是完美版）
- 遇见问题：每一小块无法完全展开、每一行无法列排列整齐
- 我采用了两种方式：
- p标签里套a标签，直接对a标签进行操作，但是效果不好，行处理到位，但是列无法对齐
- 操作li标签，列宽无法设置，不成样子
- 问题本质：是关于display属性的问题，inline属性无法进行很多的操作，需要把它修改为block就可以进行正常操作了，关于具体的思路以及知识点，上一篇博客写过这里只是一个具体的使用案例
关于layoutit
- 一个神器，通过拖动模块实现排版、css的效果
- 好用是真的
- 不利于新手掌握概念，利于快速搭建板块
- 下载生成的代码的时候，有一些库是系统生成的，使用的时候要带下来
其他
- 练习网页的过程前期很烦躁，但是越往后期越顺手，写的也越自然
- 代码写的越多，越能体会命名以及注释的重要性，以后一定养成注释的好习惯
- 文件分类，命名引用的都要遵守规范，有规矩才有条理，才有效率
- 多思考、多探索
- border属性要想表示出正常的想要的效果，必须要写边的格式，否则即使设置了border的宽度与颜色，也无法显示。
