在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局
响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局
要用的就是CSS中的没接查询，下面就介绍一下怎么运用：
使用@media 的三种方法
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中写响应式布局的代码,CSS实现响应式布局的方法相关推荐
- html 响应式布局怎么实现,CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
- css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 左边 中间 右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
- html布局直接填充,css实现自动填充布局
更新记录 0.0.2(2020-01-07) 无 平台兼容性 app 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用 app-vue × × × × × × h5-Safari ...
- 响应式网页设计代码_消除响应式网站建设设计中的缺陷
在过去的5年里,移动流量的份额增长了20%,现在响应式网站设计已经被认为是理所当然的了.到2020年,您可以通过手机几乎可以访问任何网站,它会很好用.大多数用户如果看到一个网站在他们的智能手机或平板电 ...
- HTML学生个人网站作业设计：动漫网站设计——海贼王中乔巴专题漫画(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
- 20110126 学习记录：一些关于html中布局的代码 CSS hack速查表
让你的浏览器body滚动条在左边 direction: rtl; HTML段落两端对齐代码 text-align:justify; text-justify:inter-ideograph; 图片垂 ...
- CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局
圣杯布局 圣杯布局是典型的 CSS 布局问题,有着众多的解决方案. 圣杯布局是一种非常经典和常用的布局方式,其所指的是三列布局,中间宽度自适应,两边定宽:或者两列布局,主体宽度自适应,左边或右边定宽. ...
- html5语义化布局分割代码,HTML5语义化标签布局的兼容性.html
html5语义化标签布局兼容性调整 header, section, footer, aside, nav, main, article, figure { display: block; } bod ...
- 外链式样式表_html+css外链式
无标题文档 h1{background:red;} /*这是Css注释*/ p{color:greenyellow;} div{font-size: 30px;} .one{color: yellow ...
最新文章
- 特斯拉撞了警车：Autopilot全程开启，连撞两车还没自动停下
- JS的一些扩展：String、StringBuilder、Uri
- Spring boot集成spring-boot-starter-data-jpa环境搭建
- java.exe闪退_Tomcat7.0 exe闪退问题
- Educational Codeforces Round 55 (Rated for Div. 2) B. Vova and Trophies 【贪心 】
- 【BZOJ2194】快速傅里叶之二，FFT和一点奇怪的想法
- mysql上机实验报告3_SQL入门随笔(上机实验报告)
- 老人为什么要去依靠曾经不喜欢的子女去为她养老？
- Windows2003远程桌面无用户限制
- python安装scrapy教程_Python实用工具包Scrapy安装教程
- android文件管理器,10款优秀的Android文件管理器
- eclipse下改变 匹配标签和匹配括号的颜色
- Windows server 2008 安装Hyper-V
- setTimeout运行机制
- SSD算法的改进版之R-SSD
- java 多线程 并发 面试题_最常见的15个Java多线程，并发面试问题
- LK 打印log控制
- 树冠点云投影面积计算（AlphaShape算法）
- 二叉树的先序、中序、后序、层序遍历方式详解，由遍历序列构造二叉树过程详解以及C++代码详细实现
- 将Hexo博客部署到云主机