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);平移出来,使用手机打开兼容性良好,成果展示如下图所示: