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

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

关于背景

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. 可是笔者感受背景属性的使用仍是不太灵活，由于笔者没有发现背景的图片能像盒子模型那样调整的灵活，因此当出现一些图片的时候，仍是推荐使用<img>标签

关于全局属性的理解

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的宽度与颜色，也没法显示。