html中怎么写响应式布局代码
这篇文章主要讲解了“html中怎么写响应式布局代码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html中怎么写响应式布局代码”吧!
我们提供的服务有:网站设计、做网站、微信公众号开发、网站优化、网站认证、镇海ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的镇海网站制作公司
1.直接在CSS文件中使用:
@media 类型 and (条件1) and (条件二){
css样式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}
2.使用@import导入
@import url("css/moxie.css") all and (max-width:980px);
3.也是最常用的方法--直接使用link连接,media属性用于设置查询方法
下面是一个简单的响应式的布局HTMl代码:
响应式
下面是CSS样式:
*{
margin:0;
padding:0;
text-align:center;
color:yellow;
}
.header{
width:100%;
height:100px;
background:#ccc;
line-height:100px;
}
.main{
background:green;
width:100%;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
.left,.center,.right{
float:left;
}
.left{
width:20%;
background:#112993;
height:300px;
font-size:50px;
line-height:300px;
}
.center{
width:60%;
background:#ff0;
height:400px;
color:#fff;
font-size:50px;
line-height:400px;
}
.right{
width:20%;
background:#f0f;
height:300px;
font-size:50px;
line-height:300px;
}
.footer{
width:100%;
height:50px;
background:#000;
line-height:50px;
}
样式代码
.right{
float:none;
width:100%;
background:#f0f;
clear:both;
}
.left{
width:30%;
}
.center{
width:70%;
}
.main{
height:800px;
}
样式代码
.left,.center,.right{
float:none;
width:100%;
}
当窗口大于1024px 时,指挥被压缩,并不会发生其他变化:
当窗口小于1024px,大于720px的时候,右侧栏取消浮动,在下边显示:
当窗口小于720px的时候,左中右三栏,全都取消浮动,宽度100%:
感谢各位的阅读,以上就是“html中怎么写响应式布局代码”的内容了,经过本文的学习后,相信大家对html中怎么写响应式布局代码这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网站标题:html中怎么写响应式布局代码
网址分享:http://scyanting.com/article/pddehp.html