<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/init.css">
<title>手机站PHPCN</title>
<style type="text/css">
/* 初始化 */
*{
list-style-type: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body{
height: 1500px;
}
/* 头部 */
#top{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: flex;
}
#top>img{
width: 25px;
height: 25px;
margin-top: 8px;
}
#top>img:first-of-type{
border-radius: 50%;
margin-left: 5px;
}
#top .logo{
text-align: center;
flex: 1;
}
#top .logo img{
width: 95px;
height: 45px;
}
/* 轮播图 */
#banner{
display: flex;
}
#banner img{
width: 100%;
height: 160px;
}
/* 导航栏 */
#nav{
height: 170px;
background-color: white;
box-sizing: border-box;
}
#nav ul{
display: flex;
padding: 7px;
}
#nav li{
text-align: center;
height: 75px;
flex: 1;
}
#nav li img{
width: 45px;
height: 45px;
}
#nav li a{
color: black;
}
/* 推荐课程 */
#tuijiankecheng{
margin-top: 20px;
}
h3{
padding-left: 5px;
}
#tuijiankecheng .tuijiantu{
display: flex;
}
#tuijiankecheng a{
flex: 1;
}
#tuijiankecheng .tuijiantu img{
width: 100%;
height: 90px;
}
#tuijiankecheng .tuijiantuleft,#tuijiankecheng .tuijianturight{
margin: 5px;
}
#tuijiankecheng .tuijianwenzhang1{
background-color: white;
margin-top: 10px;
height: 90px;
padding: 10px;
display: flex;
justify-content: flex-start;
}
#tuijiankecheng .tuijianwenzhang1 img{
width: 100%;
height: 90px;
}
#tuijiankecheng .tuijianwenzhang1 a{
color: gray;
flex: 0.45;
}
#tuijiankecheng .tuijianwenzhang1 p{
color: gray;
flex: 0.55;
margin-left: 15px;
}
#tuijiankecheng .tuijianwenzhang1 span:first-of-type{
font-size: 0.8rem;
background-color: gray;
color: white;
border-radius: 20%;
padding: 0 2px;
}
#tuijiankecheng .tuijianwenzhang1 span:last-of-type{
font-size: 0.7rem;
}
/* 最新文章 */
#newarticle>.article{
background-color: white;
height: 85px;
display: flex;
margin: 5px;
}
#newarticle>.article p{
flex: 0.7;
margin: 10px;
}
#newarticle>.article img{
height: 65px;
flex: 0.3;
margin: 10px;
}
#newarticle>.article span:first-of-type{
color: gray;
font-weight: bold;
font-size: 15px;
}
#newarticle>.article span:last-of-type{
color: gray;
font-size: 12px;
}
.morear{
height: 30px;
background-color: white;
margin: 5px;
text-align: center;
line-height: 30px;
font-size: 15px;
font-weight: bold;
color: gray;
}
#newwenda>.wendaar{
height: 48px;
background-color: white;
margin: 5px;
line-height: 48px;
}
#newwenda>.wendaar>p{
display: flex;
}
#newwenda>.wendaar span:first-of-type{
flex:0.8;
font-size: 15px;
font-weight: bold;
color: gray;
margin-left: 10px;
}
#newwenda>.wendaar span:last-of-type{
flex:0.2;
font-size: 12px;
color: gray;
}
/* 底部 */
footer li{
text-align: center;
}
footer img{
width: 16px;
}
footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 42px;
border-top: solid 1px gray;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding-top: 10px;
background-color: #edeff0;
}
footer ul{
display: flex;
}
footer ul li{
flex: 1;
}
footer ul a{
color: gray;
font-size: 12px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div id="top">
<img src="images/user-pic.jpeg" alt="">
<div>
<img src="images/logo.png" alt="">
</div>
<img src="images/user-nav.jpg" alt="">
</div>
<!-- 轮播图 -->
<div id="banner">
<img src="images/banner.jpg" alt="">
</div>
<!-- 导航栏 -->
<div id="nav">
<ul>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
<li><a href=""><img src="images/html.png" alt=""><br />S</a></li>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
</ul>
<ul>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
<li><a href=""><img src="images/html.png" alt=""><br />HTML/CSS</a></li>
</ul>
</div>
<!-- 推荐课程 -->
<div id="tuijiankecheng">
<h3>推荐课程</h3>
<div>
<div><a href=""><img src="images/tjkc1.jpg" alt=""></a></div>
<div><a href=""><img src="images/tjkc1.jpg" alt=""></a></div>
</div>
<div>
<a href=""><img src="images/tjkc3.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟入门</a>
<br />
<span>中级</span><span>856558次播放</span>
</p>
</div>
<div>
<a href=""><img src="images/tjkc3.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟入门</a>
<br />
<span>中级</span><span>856558次播放</span>
</p>
</div>
</div>
<!-- 最新文章 -->
<div id="newarticle">
<h3>最新文章</h3>
<div>
<p>
<a href=""><span>php析构函数什么时候调用</span><br /><span>发布时间：2019-09-12</span></a>
</p>
<img src="images/newar.jpg" alt="">
</div>
<div>
<p>
<a href=""><span>php析构函数什么时候调用</span><br /><span>发布时间：2019-09-12</span></a>
</p>
<img src="images/newar.jpg" alt="">
</div>
<div>
<p>
<a href=""><span>php析构函数什么时候调用</span><br /><span>发布时间：2019-09-12</span></a>
</p>
<img src="images/newar.jpg" alt="">
</div>
<div>
<p>
<a href=""><span>php析构函数什么时候调用</span><br /><span>发布时间：2019-09-12</span></a>
</p>
<img src="images/newar.jpg" alt="">
</div>
<div>
<p>
<a href=""><span>php析构函数什么时候调用</span><br /><span>发布时间：2019-09-12</span></a>
</p>
<img src="images/newar.jpg" alt="">
</div>
<div>更多内容</div>
</div>
<!-- 最新问答 -->
<div id="newwenda">
<h3>最新问答</h3>
<div>
<p>
<span>管理员用户名密码无法修改</span><span>2019-19-20</span>
</p>
</div>
<div>更多内容</div>
</div>
<!-- 底部 -->
<footer>
<ul>
<li><a href=""><img src="font-icon/zhuye.png" alt=""><br /><span>主页</span></a></li>
<li><a href=""><img src="font-icon/geren.png" alt=""><br /><span>个人</span></a></li>
<li><a href=""><img src="font-icon/luntan.png" alt=""><br /><span>主页</span></a></li>
<li><a href=""><img src="font-icon/video.png" alt=""><br /><span>主页</span></a></li>
</ul>
</footer>
</body>
</html>