首页 热点资讯 义务教育 高等教育 出国留学 考研考公

如何在移动端实现纯css的自定义布局

发布网友 发布时间:2022-04-21 21:33

我来回答

2个回答

热心网友 时间:2022-04-06 11:59

在移动端实现纯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>

热心网友 时间:2022-04-06 13:17

使用百分数作单位,如:main{width:80%; height:auto;}或者是其他的方式;
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width, vh 是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin 是相对当前视口宽高中 较小 的一个的百分比单位,同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。
如适应不同的屏幕也可以用媒体查询来设置样式,望采纳!

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com