响应式网页

我感觉还是先把css再次的巩固一下下。。

@font-face

制定某个url的字体

src是其字体的绝对地址

border-raidus

圆角属性，不会对流进行影响，类似于裁剪属性，clip属性

box-shadow

对文档流没有影响，并且css3支持rgb的透明色，同时时也有opacity，设置其div的不透明度，不过貌似透明度颜色在edge上不支持

注：该属性对于文档流没有影响

背景属性

background-image可以设置其背景图片的地址，为绝对地址，background-size设置其高度和宽度，也可以设置百分比，百分比相对于其父元素进行设置。

background-Origin 可以设置其背景图像在哪，为center-box还是padding-box还是border-box范围内。

background-image支持多图像的设置，并且顺序决定其background-position，背景图像定位，以及背景图像的裁剪background-size，其排列顺序和background-image有关，图像叠放顺序为往下叠放，写在后面的比写前面的z-index的值小（z-index要求是必须满足定位为绝对定位或相对定位才行）

background-clip为规定限制在哪个方框内部。

浏览器的私有属性

火狐浏览器的私有属性

一个很哪个css属性box-sizing

规定其内边距和边框时候算在高度和宽度之内，，实际上就是以前的老旧ie浏览器的哪个怪异盒子，还是w3c的盒子，，不过啊，，话说我更喜欢w3c的盒子。。。

box-sizing的值为content-box

css之网格视图

网页是按照网格布局的，以行和列分割。

话说引用css的时候用的就是这个，不过前方加的是cdn而已，仅此而已

先进行默认属性样式，清空浏览器默认样式

下面是最关键的部分

一般是12列进行布局，那100%/12确定值为8.33%

然后在规定col-后面跟上的数字为该列内放置的span标签，当span为1时，col后面的值为1，当内部放置span为2时，col后面的值为2，种子在一行row内部，col后面的值相加之和，恒等于于12；width已经包含padding。。

书写样式表

让原先的块，变成列，想设置line-block，不过还是算了，担心line-blcok中的块和块之间小小的4px的间距，那就更烦人了。设置浮动。不过需要让其父元素清除浮动

但是行有不行了，坍陷了。。决定使用after伪元素进行防止盒子塌陷

ok。至此布局完成，下面写一个页面

先设定其编码为utf-8，并且为了照顾一下国内的双核浏览器，要求其使用webkit内核进行渲染，再次引入css文件，完毕

太难看了，，决定修饰一下

然后呢，在继续设置媒体查询，当浏览器宽度小于一定的时候，导航自动成一行，并折叠

代码如下

在添加一段meta告诉浏览器缩放大小，以及网页的宽度

大功告成，访问一下

https://l.iming.info/web/07/09/

https://ll.iming.info/web/07/09/

随便看了一下一个貌似过时的框架。。。Bootstrap4。。感觉好简单啊。。。。不过重点应该是js。。。js才算是前端入门嘛。。现在顶多是个切图仔。。。