网页搭建过程中的进一步理解

本周在继续完善大众点评，遇到了几处知识性问题，特此记录

关于背景

1. 背景的作用就是把图片设置为自己想要的状态
2. 背景图可以重复设置
3. 设置背景需要的属性background-…
4. 当设置多个背景的时候：用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;

代码中的就是相互对应的例子

1. 背景的位置，依靠background-origin属性来定位背景图片，属性有三个属性值content-box, padding-box,和 border-box，对应的关系如下：
2. 
3. 但是笔者感觉背景属性的使用还是不太灵活，因为笔者没有发现背景的图片能像盒子模型那样调整的灵活，所以当出现一些图片的时候，还是推荐使用标签

关于全局属性的理解

1. 当初在看html的时候没有好好理解这个概念，本周重新认识到了
2. 可以给元素设置属性，不同的属性有私有的属性值
3. 有一些属性可以给大多数的元素设置，这些属性就叫做全局属性
4. 全局属性方便了我们对于html的整体把握，以及一些细节的运用
5. 常见的全局属性：id、class、style…

关于data-*的理解

1. data是一种全局属性
2. 在写大众点评的时候遇到了一个奇怪的东西
3. 
4. 这段代码里有文字，data-click-title一类，乍一看容易理解成这是一个点击之后就会出现的操作，但是查阅资料之后并非如此
5. 这段代码类似于我们在c++中理解的变量，js中的，data也可以理解成为js中的var，我们需要在这一段元素当中标记一些东西的时候，就可以把这些东西存储到这个data-*-..变量中
6. 为什么会有这样的格式呢？
7. 就像我们设置class类一样，便于记忆
8. data属性有他特有的命名方式
9. data-* 属性由以下两部分组成：

   a.属性名不要包含大写字母，在 data- 后必须至少有一个字符。

   b.该属性可以是任何字符串

注意： 自定义属性前缀 "data-" 会被客户端忽略。

1. data-* 属性用于存储私有页面后应用的自定义数据。
2. data-* 属性可以在所有的 HTML 元素中嵌入数据。

关于bootstrap

1. 一行必定分成12列，只不过看自己是否需要的不同引用多少
2. 当相加多余12列的时候，自动换行
3. xs、md、sm等是根据页面的宽度不同来分级发挥作用的

改进导航栏

1. 导航栏出现了问题，就是排列的问题（上图是完美版）
2. 遇见问题：每一小块无法完全展开、每一行无法列排列整齐
3. 我采用了两种方式：
4. p标签里套a标签，直接对a标签进行操作，但是效果不好，行处理到位，但是列无法对齐
5. 操作li标签，列宽无法设置，不成样子
6. 问题本质：是关于display属性的问题，inline属性无法进行很多的操作，需要把它修改为block就可以进行正常操作了，关于具体的思路以及知识点，上一篇博客写过这里只是一个具体的使用案例

关于layoutit

1. 一个神器，通过拖动模块实现排版、css的效果
2. 好用是真的
3. 不利于新手掌握概念，利于快速搭建板块
4. 下载生成的代码的时候，有一些库是系统生成的，使用的时候要带下来

其他

1. 练习网页的过程前期很烦躁，但是越往后期越顺手，写的也越自然
2. 代码写的越多，越能体会命名以及注释的重要性，以后一定养成注释的好习惯
3. 文件分类，命名引用的都要遵守规范，有规矩才有条理，才有效率
4. 多思考、多探索
5. border属性要想表示出正常的想要的效果，必须要写边的格式，否则即使设置了border的宽度与颜色，也无法显示。