当前位置:首页/归档/2019

响应式开发中版心的作用详解

2019-07-18 22:57:35 / 舒彬琪 / 127 浏览

响应式版心详解


container 版心名称

<style>

.container {

    width: 1200px;

    margin: 0 auto;

}

</style>

一个基础的版心就完成了

现在给版心添加一个高度和背景,看看效果

height: 600px;

background: skyblue;

image.png

OK,居中效果就出来啦,通常大部分网页都是通过设置版心来控制整体页面的排列效果。

在使用版心的时候,经常会碰到需要背景全屏而版心居中的情况,这个时候只需要在版心外面嵌套一个div

然后给他设置样式宽度和高度100%,添加背景图片或者颜色就可以啦

如下图代码所示:

image.png

而通常响应式页面还需要版心能够根据页面的变化不断变化,这就涉及到媒体查询功能了,下一篇随笔给大家讲解媒体查询对于响应式页面的作用

AndyGuo 的留言

话说你这文章的评论是怎么实现的,貌似pb不带文章评论

Windows 10 Chrome 2019-08-04 20:50:30

管理员回复:

添加了个隐藏字段,文章ID,然后判断对应ID就可以展示对应留言了

2019-08-04 20:54:01

星梦 的留言

嗯,挺好的

Windows 10 Firefox 2019-08-04 17:25:13

管理员回复:

大佬说好就是真的好

2019-08-11 03:09:29