如何在移动端实现纯css的自定义布局
2016-11-15 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
在移动端实现纯css的自定义布局的方法：
1、html5主页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>html5 移动端单页面布局</title>
</head>
<body>
<!--页面主体部分-->
<div class="main">
<section class="curr">
<img src="pp_1x.png" alt="">
</section>
<section class="hide">
<img src="css3.jpg" alt="">
</section>
<section class="hide">
<img src="hra.png" alt="">
</section>
<section class="hide">
<img src="company-info_1x.png" alt="">
</section>
</div>
<!--页面菜单按钮-->
<div class="menu">
<ul>
<li class="curr">Html5</li>
<li>Css3</li>
<li>Javascript</li>
<li>About</li>
</ul>
</div>
<script src="js/zepto.js"></script>
</body>
</html>
2、css编写的样式：
<style>
/*初始化css*/
*{ margin:0; padding: 0;}
li{ list-style-type: none;}
img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}
html,body{ width: 100%; height: 100%; background: #e4e4e4;
-webkit-tap-highlight-color: rgba(88,44,22,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
}
/*主体页面样式*/
.main{ width: 100%; height: auto; position: relative;}
.main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }
.main section.hide{ display: none;}
.main section.curr{ display: block;}
/*菜单样式*/
.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
</style>
1、html5主页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>html5 移动端单页面布局</title>
</head>
<body>
<!--页面主体部分-->
<div class="main">
<section class="curr">
<img src="pp_1x.png" alt="">
</section>
<section class="hide">
<img src="css3.jpg" alt="">
</section>
<section class="hide">
<img src="hra.png" alt="">
</section>
<section class="hide">
<img src="company-info_1x.png" alt="">
</section>
</div>
<!--页面菜单按钮-->
<div class="menu">
<ul>
<li class="curr">Html5</li>
<li>Css3</li>
<li>Javascript</li>
<li>About</li>
</ul>
</div>
<script src="js/zepto.js"></script>
</body>
</html>
2、css编写的样式：
<style>
/*初始化css*/
*{ margin:0; padding: 0;}
li{ list-style-type: none;}
img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}
html,body{ width: 100%; height: 100%; background: #e4e4e4;
-webkit-tap-highlight-color: rgba(88,44,22,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
}
/*主体页面样式*/
.main{ width: 100%; height: auto; position: relative;}
.main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }
.main section.hide{ display: none;}
.main section.curr{ display: block;}
/*菜单样式*/
.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
</style>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用百分数作单位，如：main{width:80%; height:auto;}或者是其他的方式；
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。
如适应不同的屏幕也可以用媒体查询来设置样式，望采纳！
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。
如适应不同的屏幕也可以用媒体查询来设置样式，望采纳！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
