HTML弹性和响应式布局实现方法(超级简单)

那些学很久还不会,可以进来看看哦

一、弹性布局

弹性布局效果图

1、首先呢,先设置一个box盒子,里面再设置4个div(根据实际开发情况自行修改)

<div class="box">
<div class="son" style="background: red;">
二
</div>
<div class="son" style="background: aqua;">
哈
</div>
<div class="son" style="background: bisque;">
博
</div>
<div class="son" style="background: blue;">
客
</div>
</div>

然后在加入css样式,方便后续的学习

.son{
width: 100%;
height: 100px;
text-align: center;
color: white;
margin-left: 30px;
}

2、现在的话运行起来还是竖向的,想要变成横向需要在box设置css样式

display: flex;
justify-content: center;//弹性布局居中的方法
//加入这项css样式之后你会发现页面变成横向的了,这就是弹性布局了

3、也可以使用apace-around属性来设置子盒子之间空白的间隔,想要设置其它属性的自行百度,这里就不用说了

二、响应式布局

本人建议配合弹性布局使用

原理:意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局相对来说是比较容易了,只是代码量比较多

1、只需在css里加入

//设置大屏的宽度1080px
@media only screen and (min-width: 1080px){
      //在这里面编写大屏的代码
    }
//设置中屏的宽度600px
@media only screen and (min-width: 600px) {
      //在这里面编写中屏的代码
    }
//设置小屏的宽度200px
@media only screen and (max-width:200px) {
      //在这里面编写小屏的代码
    }

//响应式布局不仅要编写大屏和中屏的代码,而且还要编写小屏的代码。这里就是刚刚开始说的代码量比较多了,讲到这里应该有很多人理解响应式布局的开发了吧

有需要的可以联系我私发当时我现场考核响应式的作品,为了防止泛滥,本站暂不支持下载源码

效果动态图

(利用弹性和响应式布局实现的)

教程结束

请关注小林科技:www.nhl520.cn

作者QQ/wx:3132876589

二哈

文章作者信息...

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐

暂无内容!