响应式网页

我感觉还是先把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才算是前端入门嘛。。现在顶多是个切图仔。。。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180709G1XTF300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券