仿php中文网移动端首页
实例
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/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="C:\phpstudy_pro\WWW\html\code\phpcn\static\css\init.css"> <link rel="stylesheet" href="C:\phpstudy_pro\WWW\html\code\phpcn\static\css\style.css"> <title>仿PHP中文网</title> </head> <body> <!--布局原因：宽度自适应，高度是固定--> <!--固定定位：顶部--> <div class="top"> <img src="phpcn\img\5d668d03da14c294.jpg" alt=""> <div class="logo"> <img src="phpcn\img\logo.png" alt=""> </div> <img src="phpcn\img\20190914220420.png" alt=""> </div> <!--banner轮播图，这里用图片暂时代替--> <div class="banner"> <img src="phpcn\img\1.jpg" alt=""> </div> <div class="nav"> <ul> <li><a href=""><img src="phpcn\img\html.png" alt=""><br>HTML/CSS</a></li> <li><a href=""><img src="phpcn\img\javascript.png" alt=""><br>JavaScipt</a></li> <li><a href=""><img src="phpcn\img\code.png" alt=""><br>服务端</a></li> <li><a href=""><img src="phpcn\img\sql.png" alt=""><br>数据库</a></li> </ul> <ul> <li><a href=""><img src="phpcn\img\app.png" alt=""><br>移动端</a></li> <li><a href=""><img src="phpcn\img\manual.png" alt=""><br>手册</a></li> <li><a href=""><img src="phpcn\img\tool2.png" alt=""><br>工具</a></li> <li><a href=""><img src="phpcn\img\live.png" alt=""><br>直播</a></li> </ul> </div> <!--课程区--> <h3>推荐课程</h3> <div class="courses"> <ul> <li> <a href=""><img src="phpcn/img/5d242759adb88970.jpg" alt=""></a> </li> <li> <a href=""><img src="phpcn/img/5d242759adb88970.jpg" alt=""></a> </li> </ul> <div> <a href=""><img src="phpcn/img/5d2941e265889366.jpg" alt=""></a> <p> <a href="">CI框架30分钟快速入门</a> <br> <span>中级</span><span>49748次播放</span> </p> </div> <div> <a href=""><img src="phpcn/img/5aa23f0ded921649.jpg" alt=""></a> <p> <a href="">2018前端入门_HTML5</a> <br> <span>初级</span><span>211506次播放</span> </p> </div> </div> <h3>最新更新</h3> <div class="courses2"> <div> <a href=""><img src="phpcn/img/11.jpg" alt=""></a> <p> <a href="">Laravel 5.8 中文文档手册</a> <br> <span>中级</span><span>7726次播放</span> </p> </div> <div> <a href=""><img src="phpcn/img/22.jpg" alt=""></a> <p> <a href="">JavaScript极速入门</a> <br> <span>初级</span><span>7273次播放</span> </p> </div> <div> <a href=""><img src="phpcn/img/33.jpg" alt=""></a> <p> <a href="">第七期_直播体验课</a> <br> <span>初级</span><span>6757次播放</span> </p> </div> <div> <a href=""><img src="phpcn/img/44.jpg" alt=""></a> <p> <a href="">CSS3 极速入门</a> <br> <span>初级</span><span>6786次播放</span> </p> </div> <div> <a href=""><img src="phpcn/img/55.jpg" alt=""></a> <p> <a href="">HTML5 极速入门</a> <br> <span>初级</span><span>5786次播放</span> </p> </div> </div> <h3>最新文章</h3> <div class="courses3"> <div> <p> <a href="">PHP之十六个魔术方法详解（总结）</a> <br> <span>发布时间：2019-07-29</span> </p> <a href=""><img src="phpcn/img/66.jpg" alt=""></a> </div> <div> <p> <a href="">PHP生成折线图和饼图等</a> <br> <span>发布时间：2019-08-02</span> </p> <a href=""><img src="phpcn/img/77.png" alt=""></a> </div> <div> <p> <a href="">PHP实现动态规划之***问题</a> <br> <span>发布时间：2019-08-13</span> </p> <a href=""><img src="phpcn/img/88.jpg" alt=""></a> </div> <div> <p> <a href="">ThinkPHP6源码：从Http类的实例化看依赖注入是如何实现的</a> <br> <span>发布时间：2019-08-16</span> </p> <a href=""><img src="phpcn/img/99.jpg" alt=""></a> </div> <div> <p> <a href="">PHP7中php.ini、php-fpm和www.conf 配置</a> <br> <span>发布时间：2019-08-23</span> </p> <a href=""><img src="phpcn/img/1010.png" alt=""></a> </div> </div> <h3>最新博文</h3> <div class="courses4"> <ul> <li><a href="">mysql查询时间戳和日期的转换</a> <span>2019-09-07</span> </li> <li><a href="">小程序实现复制文本内容</a> <span>2019-09-06</span> </li> <li><a href="">js获取url链接中的域名部分</a> <span>2019-09-07</span> </li> <li><a href="">小程序实现头像图片裁剪</a> <span>2019-09-03</span> </li> <li><a href="">《悦帮到家》小程序</a> <span>2019-09-03</span> </li> </ul> </div> <!--底部--> <div class="footer"> <ul> <li><a href=""><img src="phpcn/img/icon/home.png" alt=""><br><span>主页</span></a></li> <li><a href=""><img src="phpcn/img/icon/sou***png" alt=""><br><span>查找</span></a></li> <li><a href=""><img src="phpcn/img/icon/gouwuche.png" alt=""><br><span>社区</span></a></li> <li><a href=""><img src="phpcn/img/icon/me.png" alt=""><br><span>我的</span></a></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.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%);
}
.top{
display:flex;
}
.top img:first-of-type,
.top img:last-of-type{
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{
margin:0;
width:94px;
height:40px;
}
.banner{
display:flex;
}
.banner img{
width:100%;
height:260px;
margin-top:25px;
}
/*导航区*/
.nav{
height:170px;
background-color:white;
box-sizing: border-box;
}
.nav ul{
margin:0;
padding:6px;
}
.nav ul li{
list-style-type: none;
text-align:center;
height:75px;
}
.nav ul li img{
width:45px;
height:45px;
}
.nav ul li a{
text-align:center;
color:gray;
text-decoration: none;
/*取消下划线*/
}
.nav ul{
display:flex;
}
.nav ul li{
flex:1;
/*分配适应空间*/
}
/*课程区*/
h3{
color:gray;
}
.courses{
height:326px;
color:gray;
}
.courses ul{
margin:0;
padding:0;
/*消除圆点*/
list-style: none;
/*flex布局*/
display:flex;
}
.courses ul li{
padding:3px;
}
.courses ul img{
width:100%;
height:90px;
}
.courses div{
background-color:white;
padding:10px;
/*flex布局*/
display:flex;
justify-content: flex-start;
}
.courses div img{
width:100%;
height:100px;
}
.courses div a{
text-decoration: none;
color:gray;
flex:0.45;
}
.courses div p{
flex:0.55;
margin-left:15px;
}
.courses div p span{
font-size:0.8rem;
background-color:black;
color:white;
border-radius:30%;
padding:0 2px;
}
.courses div p span:last-of-type{
font-size:0.7rem;
}
/*课程区2*/
h3{
margin:0;
padding-top:30px;
}
.courses2 div{
background-color:white;
padding:10px;
/*flex布局*/
display:flex;
justify-content: flex-start;
}
.courses2 div img{
width:100%;
height:100px;
}
.courses2 div a{
text-decoration: none;
color:gray;
flex:0.45;
}
.courses2 div p{
flex:0.55;
margin-left:15px;
}
.courses2 div p span:first-of-type{
font-size:0.8rem;
background-color:black;
color:white;
border-radius:30%;
padding:0 2px;
}
.courses2 div p span:last-of-type{
font-size:0.7rem;
}
/*课程区3*/
.courses3 div{
background-color:white;
padding:10px;
/*flex布局*/
display:flex;
justify-content: flex-start;
}
.courses3 div img{
width:100%;
height:100px;
}
.courses3 div a{
text-decoration: none;
font-size:20px;
color:#1b181b;
flex:0.45;
}
.courses3 div p{
flex:0.55;
margin-right:15px;
}
.courses3 div p span:first-of-type{
font-size:0.8rem;
color:gray;
border-radius:30%;
padding:0 2px;
}
/*课程区4*/
.courses4 ul{
margin:0;
padding:0;
list-style: none;
}
.courses4 ul li{
font-size:20px;
margin:20px auto;
padding:15px;
background-color:white;
}
.courses4 ul li a{
font:bold 20px/30px arial,sans-serif;
color:#1b1918;
text-decoration: none;
/*消除下划线*/
}
.courses4 ul li span{
margin-left:40%;
padding-left:40%;
}
/*底部样式*/
.footer{
position:fixed;
bottom:0;
background-color:lightgrey;
width:100%;
height:50px;
min-width:320px;
max-width:768px;
left:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.footer ul{
display:flex;
margin:6px;
padding:0;
list-style-type:none;
text-align:center;
}
.footer ul li img{
width:25px;
height:25px;
}
.footer ul li a{
color:gray;
text-decoration: none;
}
.footer ul li{
flex:1;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
