1、php中文网手机站首页
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=s, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./static/css/init.css"> <link rel="stylesheet" href="./static/css/style.css"> <title>php中文网手机端-首页</title> </head> <body> <!-- 布局原则：宽度自适应，高度不变 --> <!-- 固定定位顶部 --> <div class="top"> <img src="./static/images/user-pic.jpeg" alt=""> <div class="logo"> <img src="./static/images/logo.png" alt=""> </div> <img src="./static/images/user-nav.jpg" alt=""> </div> <div class="banner"> <img src="./static/images/banner.jpg" alt=""> </div> <!-- 导航区 --> <div class="nav"> <ul> <li><a href=""> <img src="./static/images/html.png" alt=""><br>HTML/CSS </a></li> <li><a href=""><img src="./static/images/JavaScript.png" alt=""><br>JavaScript</a></li> <li><a href=""><img src="./static/images/code.png" alt=""><br>服务端</a></li> <li><a href=""><img src="./static/images/sql.png" alt=""><br>数据库</a></li> </ul> <ul> <li><a href=""> <img src="./static/images/app.png" alt=""><br>移动端 </a></li> <li><a href=""><img src="./static/images/manual.png" alt=""><br>手册</a></li> <li><a href=""><img src="./static/images/tool2.png" alt=""><br>工具</a></li> <li><a href=""><img src="./static/images/live.png" alt=""><br>直播</a></li> </ul> </div> <!-- 课程区 --> <h3>推荐课程</h3> <div class="news"> <ul> <li> <a href=""><img src="./static/images/tjkc1.jpg" alt=""></a> </li> <li> <a href=""><img src="./static/images/tjkc2.jpg" alt=""></a> </li> </ul> <div> <a href=""> <img src="./static/images/tjkc3.jpg" alt=""> <p> <a href="">CI框架30分钟极速入门</a> <br> <span>中级</span><span>49748次播放</span> </p> </a> </div> <div> <a href=""> <img src="./static/images/tjkc3.jpg" alt=""> <p> <a href="">2018前端入门_HTML5</a> <br> <span>初级</span><span>210066次播放</span> </p> </a> </div> </div> <!-- 最近更新 --> <h3>最近更新</h3> <div class="news"> <div> <a href=""> <img src="./static/images/news1.jpg" alt=""> <p> <a href="">Laravel 5.8 中文文档手册</a> <br> <span>中级</span><span>7286次播放</span> </p> </a> </div> <div> <a href=""> <img src="./static/images/news2.jpg" alt=""> <p> <a href="">JavaScript极速入门</a> <br> <span>初级</span><span>7093次播放</span> </p> </a> </div> <div> <a href=""> <img src="./static/images/news3.jpg" alt=""> <p> <a href="">第七期_直播体验课</a> <br> <span>初级</span><span>6671次播放</span> </p> </a> </div> <div> <a href=""> <img src="./static/images/news4.jpg" alt=""> <p> <a href="">CSS3 极速入门</a> <br> <span>初级</span><span>6630次播放</span> </p> </a> </div> <div> <a href=""> <img src="./static/images/news5.jpg" alt=""> <p> <a href="">HTML5 极速入门</a> <br> <span>初级</span><span>5589次播放 </span> </p> </a> </div> <div> <a href=""> <img src="./static/images/news6.jpg" alt=""> <p> <a href="">nodejs开发基础教程</a> <br> <span>初级</span><span>4856次播放</span> </p> </a> </div> </div> <!-- 底部 --> <div class="footer"> <ul> <li><a href=""><img src="./static/images/zhuye.png" alt=""></a></li> <li><a href=""><img src="./static/images/video.png" alt=""></a></li> <li><a href=""><img src="./static/images/luntan.png" alt=""></a></li> <li><a href=""><img src="./static/images/geren.png" alt=""></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{
width:94px;
height: 45px;
}
.banner{
display: flex;
}
.banner img{
width:100%;
height: 160px;
}
/* 导航区 */
.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:#444444;
}
.courses{
height: 326px;
color:gray;
margin-bottom:20px;
}
.courses ul{
margin:0;
padding:0;
list-style: none;
display: flex;
}
.courses ul li{
padding: 5px;
}
.courses ul img{
width: 100%;
height: 90px;
}
.courses div{
background-color: white;
padding:10px;
margin-top:10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.courses div img{
width:100%;
height: 90px;
/* border:1px solid black; */
}
.courses div a{
text-decoration: none;
color: gray;
flex: 0.45;
}
.courses div p{
/* border:1px solid green; */
flex: 0.55;
margin-left: 15px;
}
.courses div p span:first-of-type{
font-size: 0.8rem;
background-color: black;
color:white;
border-radius: 20%;
padding:0 2px;
}
.courses div p span:last-of-type{
font-size:0.7rem;
}
/* 最近更新 */
h3{
color:#444444;
}
.news{
height: 326px;
color:gray;
margin-bottom: 20px;
}
.news ul{
margin:0;
padding:0;
list-style: none;
display: flex;
}
.news ul li{
padding: 5px;
}
.news ul img{
width: 100%;
height: 90px;
}
.news div{
background-color: white;
padding:10px;
margin-top:10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.news div img{
width:100%;
height: 90px;
/* border:1px solid black; */
}
.news div a{
text-decoration: none;
color: gray;
flex: 0.45;
}
.news div p{
/* border:1px solid green; */
flex: 0.55;
margin-left: 15px;
}
.news div p span:first-of-type{
font-size: 0.8rem;
background-color: black;
color:white;
border-radius: 20%;
padding:0 2px;
}
.news div p span:last-of-type{
font-size:0.7rem;
}
/* 最新文章 */
h3{
color:#444444;
}
.article{
height: 326px;
color:gray;
}
.article ul{
margin:0;
padding:0;
list-style: none;
display: flex;
}
.article ul li{
padding: 5px;
}
.nearticlews ul img{
width: 100%;
height: 90px;
}
.article div{
background-color: white;
padding:10px;
margin-top:10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.article div img{
width:100%;
height: 90px;
/* border:1px solid black; */
}
.article div a{
text-decoration: none;
color: gray;
flex: 0.45;
}
.article div p{
/* border:1px solid green; */
flex: 0.55;
margin-left: 15px;
}
.article div p span:first-of-type{
font-size: 0.8rem;
background-color: black;
color:white;
border-radius: 20%;
padding:0 2px;
}
.article div p span:last-of-type{
font-size:0.7rem;
}
/* 底部样式 */
body {
height: 2000px;
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 768px;
left:50%;
-webkit-transform: translateX(-50%);
transform:translateX(-50%);
}
.footer ul{
display: flex;
margin:0;
padding: 0;
list-style-type: none;
text-align: center;
}
.footer ul li img{
width:30px;
height: 30px;
}
.footer ul li a{
color: gray;
text-decoration: none;
}
.footer ul li{
flex:1;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
