前端设计>css>正文
首先需要在网站的meta信息里面加上:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
其次对于网页居中问题要注意css样式代码的问题:
* {margin:0 auto;padding: 0;border: 0;-webkit-user-select: text}
另外对于网页的初始宽度可以适应max-width来控制,其他容器也是类似,要避免直接出现定义body体的宽度。
附件:
网页参考源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>Bootstrap 101 Template</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="css/main.css" rel="stylesheet"> </head> <body> <div id="top" class="">这是顶部信息</div> <div id="nav">这是导航栏 <div id="">菜单</div> <div id="">左边</div> <div id="">右边</div> </div> </body> </html>
CSS文件:
* { margin:0 auto; padding: 0; border: 0; -webkit-user-select: text } /*头部*/ #top { max-width:680px; background-color:red; } #nav { max-width:680px; background-color: bisque; } .menu { max-width:680px; background-color: brown; } .cleft { width: 60%; min-height: 400px; float: left; background-color: #5FAD7E; } .cright { width: 40%; float: left; min-height: 400px; background-color: chocolate; } /*清浮动*/ .clearfix:before, .clearfix:after { content:"."; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */ .fl { float:left; } .fr { float:right; }
本文链接:https://www.weguiding.com/css/442.html
- 上一篇:纯css实现导航处hot小图标实现
- 下一篇:CSS3水纹效果的示例代码
猜你喜欢
- 19-06-12 文章内容页图片显示优化居中处理
- 19-05-30 CSS3水纹效果的示例代码
- 19-05-20 手机站做自适应页面要注意的问题
- 19-05-18 纯css实现导航处hot小图标实现
- 19-01-27 纯html+css的下拉导航动画效果
- 19-01-24 DIV边框样式控制设置
- 19-01-24 块元素水平垂直居中(CSS控制)
- 19-01-24 CSS基本语法
- 19-01-24 html去除表格边框空隙
- 01-24html去除表格边框空隙
- 01-24CSS样式:字体、表格
- 01-24屏蔽网页元素内联样式,提高外联优先级
- 06-12文章内容页图片显示优化居中处理
- 01-27纯html+css的下拉导航动画效果
- 01-24网页字体样式选择调整
- 01-24文章内容页图片显示优化,图片居中处理
- 05-30CSS3水纹效果的示例代码
- 05-20手机站做自适应页面要注意的问题
- 05-18纯css实现导航处hot小图标实现
- 01-27纯html+css的下拉导航动画效果
- 01-24DIV边框样式控制设置
- 01-24块元素水平垂直居中(CSS控制)
- 01-24CSS基本语法
- 05-30CSS3水纹效果的示例代码
- 05-20手机站做自适应页面要注意的问题
- 05-18纯css实现导航处hot小图标实现
- 01-27纯html+css的下拉导航动画效果
- 01-24DIV边框样式控制设置
- 01-24块元素水平垂直居中(CSS控制)
- 01-24CSS基本语法