社交移动端网页牛刀小试——通过viewport适配（功能完善加强版）

其他 2018-09-23 01:48:27 阅读次数: 0

html在原来基础上增添一些元素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>领哥做网页</title>
	<meta name="viewport" id="viewport" content="width=640">
	<script src="mobile-util.js"></script>
	<link rel="stylesheet" type="text/css" href="font/iconfont.css">
	<link rel="stylesheet" href="viewport.css">
</head>
<body>
	<div class="box" id="box">
		<div class="page">
			<header>
				<div class="menu iconfont icon-caidan fl" id="menu"></div>
				<span class="header_item" id="header_item"><a href="#" class=""  id="active1">Open</a><a href="#" id="active2" class="active">Close</a></span>
				<div class="add iconfont icon-jiahao fr"></div>
			</header>
			<div class="item">
				<div class="item_hd">
					<div class="item_title clearfix">
						<div class="user_img fl">
							<img src="1.png" alt="">
						</div>
						<h5>领 哥</h5>
						<span class="iconfont icon-xingxing fr">175</span>
					</div>
					<p class="text">我好，你好，大家好，才是真的好</p>
				</div>
				<div class="item_bd">
					<div class="ibd_img">
						<img src="6.jpg" alt="">
						<div class="ibd_time"><i></i><span>11:23:32</span></div>
					</div>
					<div class="btns clearfix">
						<span class="people fl iconfont icon-yonghu">people</span>
						<a href="#" class="btns_mao iconfont icon-mao">accept</a>
						<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
					</div>
				</div>
			</div>


			<div class="item">
				<div class="item_hd">
					<div class="item_title clearfix">
						<div class="user_img fl">
							<img src="1.png" alt="">
						</div>
						<h5>我爱领哥</h5>
						<span class="iconfont icon-xingxing fr">360</span>
					</div>
					<p class="text">美好总是短暂的</p>
				</div>
				<div class="item_bd">
					<div class="ibd_img">
						<img src="3.jpg" alt="">
						<div class="ibd_time"><i></i><span>12:32:32</span></div>
					</div>
					<div class="btns clearfix">
						<span class="people fl iconfont icon-yonghu">people</span>
						<a href="#" class="btns_mao iconfont icon-mao">accept</a>
						<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
					</div>
				</div>
			</div>

			
			<div class="item">
				<div class="item_hd">
					<div class="item_title clearfix">
						<div class="user_img fl">
							<img src="1.png" alt="">
						</div>
						<h5>Martin Groove</h5>
						<span class="iconfont icon-xingxing fr">99</span>
					</div>
					<p class="text">回家烧锅</p>
				</div>
				<div class="item_bd">
					<div class="ibd_img">
						<img src="2.jpg" alt="">
						<div class="ibd_time"><i></i><span>16:36:32</span></div>
					</div>
					<div class="btns clearfix">
						<span class="people fl iconfont icon-yonghu">people</span>
						<a href="#" class="btns_mao iconfont icon-mao">accept</a>
						<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
					</div>
				</div>
			</div>
			
			<div class="item">
				<div class="item_hd">
					<div class="item_title clearfix">
						<div class="user_img fl">
							<img src="1.png" alt="">
						</div>
						<h5>Martin Groove</h5>
						<span class="iconfont icon-xingxing fr">3</span>
					</div>
					<p class="text">掰玉米</p>
				</div>
				<div class="item_bd">
					<div class="ibd_img">
						<img src="1.jpg" alt="">
						<div class="ibd_time"><i></i><span>17:39:36</span></div>
					</div>
					<div class="btns clearfix">
						<span class="people fl iconfont icon-yonghu">people</span>
						<a href="#" class="btns_mao iconfont icon-mao">accept</a>
						<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
					</div>
				</div>
			</div>

			<div class="item">
				<div class="item_hd">
					<div class="item_title clearfix">
						<div class="user_img fl">
							<img src="1.png" alt="">
						</div>
						<h5>我思念领哥</h5>
						<span class="iconfont icon-xingxing fr">271</span>
					</div>
					<p class="text">疯狂的睡觉</p>
				</div>
				<div class="item_bd">
					<div class="ibd_img">
						<img src="2.jpg" alt="">
						<div class="ibd_time"><i></i><span>22:36:32</span></div>
					</div>
					<div class="btns clearfix">
						<span class="people fl iconfont icon-yonghu">people</span>
						<a href="#" class="btns_mao iconfont icon-mao">accept</a>
						<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
					</div>
				</div>
			</div>
		</div>
	
		<div class="mask"></div>
		<div class="leftNav clearfix">
			<div class="menu iconfont icon-caidan" id="leftNav"></div>
			<div class="leftNav_img"><img src="1.png" alt=""></div>
			<ul class="clearfix">
				<a href="#"><li class="iconfont icon-tongji ap">统计<i class="iconfont fr icon-jiantouyou
"></i></li></a>
				<a href="#"><li class="iconfont icon-yonghu ap">用户<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
				<a href="#"><li class="iconfont icon-xiugai ap">修改<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
				<a href="#"><li class="iconfont icon-kanxiaoguo ap">相册<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
				<a href="../day42 html5案例/进度条案例.html"><li class="iconfont icon-youxi ap">游戏<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
				<a href="#"><li class="iconfont icon-shezhi ap">设置<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
				<a href="#"><li class="iconfont icon-longxia1 ap">吃货<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
				<a href="#"><li class="iconfont icon-guanyuwomen1 ap">领哥<i class="iconfont fr icon-jiantouyou
"></i></li></li></a>
			</ul>
		</div>
	</div>
	<script>
		var oMen=document.getElementById("menu");
		var oNav=document.getElementById("leftNav");
		var oBox=document.getElementById("box");
		oMen.onclick=function(){
			oBox.className="open box";
		}
		oNav.onclick=function(){
			oBox.className="box";
		}
		var zo=document.getElementById("header_item");
		var aCt1=document.getElementById("active1");
		var aCt2=document.getElementById("active2");
		zo.onclick=function(){
			if (aCt1.className=="active" && aCt2.className=="") {
				aCt2.className="active";
				aCt1.className="";
			}else{
				aCt2.className="";
				aCt1.className="active";
			}
		}
	</script>
</body>
</html>

css样式如下：

*{
	padding: 0;
	margin:0;
}
body{
	background-color: #fef4e4;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
.clearfix{
	zoom:1;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.box{
	width: 640px;
	margin:0 auto;
	position: relative;
	
}
header{
	padding: 31px 11px 10px;
	text-align: center;
}
.menu,.add{
	width: 53px;
	height: 53px;
	font-size: 46px;
	color: #000;
	text-align: center;
	line-height: 53px;
}
.header_item{
	display: inline-block;
	line-height: 53px;
	padding: 6px;
	border-radius: 8px;
	background-color: #EFE1D3;
}
.header_item a{
	display: inline-block;
	text-decoration: none;
	height: 41px;
	line-height: 41px;
	padding: 0 24px;
	color: #000;
	border-radius: 6px;

}
.header_item .active{
	background-color: #ff7f66;
	color: #fff;
}
.item_hd{
	padding: 41px 22px 0;
	line-height: 53px;
}
.user_img{
	height: 60px;
	width: 60px;
	border:solid 5px #ff7f66;
	border-radius: 50%;
	margin-right: 15px;
	overflow: hidden;
}
.user_img img{
	width: 100%;
	height: 100%;
}
.item_title h5{
	float: left;
	font-size: 26px;
	line-height: 70px;
	color: #ff7f66;
}
.item_title .icon-xingxing{
	font-size: 26px;
	line-height: 70px;
}
.icon-xingxing:before{
	margin-right:8px; 
}
.text{
	margin-top: 19px;
	line-height: 68px;
	font-size: 30px;
}
.ibd_img{
	position: relative;
}
.ibd_img img{
	width: 100%;
}
.ibd_time{
	width: 214px;
	height: 100%;
	position: absolute;
	top:0;
	left: 50%;
	background-color:rgba(0,0,0,0.3);
	color: #fff;
	margin-left: -107px;
	text-align: center;
	font-size: 36px;
}
.ibd_time i{
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.ibd_time span{
	vertical-align: middle;
}
.btns{
	height: 80px;
	background-color: #2f3d4c;
	padding: 0 20px;
	margin-top: -4px;
}
.icon-mao{
	width: 214px;
	height: 60px;
	margin:10px auto;
	display: inline-block;
	background-color: #ff7f66;
	border-radius: 10px;
	color:#fff;
	text-align: center;
	line-height: 60px;
	font-size: 30px;
	margin-left: 50px;
}
.people,.share{
	display: inline-block;
	color:#ccc;
	line-height: 81px;
	font-size: 30px;
}
.people:before,.share:before{
	margin-right:10px; 
}
a{
	text-decoration: none;
	color: #fff;
}
.mask{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
	display: none;
}
.leftNav{
	position: absolute;
	top: 0;
	left: 0;
	width: 560px;
	height: 100%;
	background-color:#2f3d4c;
	transform: translate(-560px);
	transition: 0.6s;
}
.page{
	transform: translate(0);
	transition: 0.6s;
}
.leftNav div{
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 30px;
	margin-right: -60px;
	display: none;
}
.open .mask,.open .leftNav div{
	display: block;
}
.open .page{
	transform: translate(560px);
}
.open .leftNav{
	transform: translate(0);
}
.leftNav_img{
	width: 90px;
	height: 90px;
	border: solid 6px #ff7f66;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	margin-left: 26px;
}
.leftNav_img img{
	width: 100%;
}
.leftNav ul{
	position: absolute;
	top: 90px;
	left: 0px;
	display: inline-block;
	margin:80px 60px;
	color: #fff;
	width: 420px;
}
li{
	list-style: none;
	width: 100%;
	display:inline-block;
	line-height: 93px;
	border-bottom: solid 1px #ccc;
	/*text-align: center;*/
	font-size: 30px;
}
.ap{
	font-size: 46px;
}
.ap:before{
	margin-right: 60px;
}

javascript代码不变，点击左上角导航时，隐藏侧导航通过transform: translate(560px);平移出来，使用手机打开兼容性良好，成果展示如下图所示：

 

 

猜你喜欢

转载自blog.csdn.net/zhangqling/article/details/82184655
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022