只要注意好层级关系
效果区
ml代码区
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>移动端</title> <link rel="stylesheet" href="demo1.css"> <link rel="stylesheet" href="static/font/iconfont.css"></head><body> <!--头部--> <header> <img src="static/images/user.png" alt=""> <img src="static/images/logo.png" alt=""> <img src="static/images/user.png" alt=""> </header> <!--轮播图--> <div> <a href=""> <img src="static/images/1.jpg" alt=""> </a> </div> <!--导航区--> <nav> <ul> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> </ul> <ul> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> <li> <a href=""> <img src="static/images/user.png" alt=""> <span>导航/名字</span> </a> </li> </ul> </nav> <!--课程区--> <main> <setcion> <h3>推荐课程</h3> <div> <a href=""> <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""> </a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>中级</i>55749次播放</span> </span> </div> <div> <a href=""> <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""> </a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>中级</i>55749次播放</span> </span> </div> </setcion> </main> <footer> <a href=""> <i class="iconfont icon-huiyuan2"></i> <span>首页</span> </a> <a href=""> <i class="iconfont icon-huiyuan2"></i> <span>首页</span> </a> <a href=""> <i class="iconfont icon-huiyuan2"></i> <span>首页</span> </a> <a href=""> <i class="iconfont icon-huiyuan2"></i> <span>首页</span> </a> </footer></body></html>
css代码区
*{ margin: 0; padding: 0; /*参考线*/ /*outline: 1px red dashed;*/}a { /*去除下划线*/ text-decoration: none; color: #222222;}li{ /*去除前面的小黑点*/ list-style: none;}body{ /*最下宽度*/ min-width: 320px; /*最大宽度*/ max-width: 768px; display: flex; flex-direction: column;}/*头部*/body > header{ height: 8vh; display: flex; flex-direction: row; /*两端对齐*/ justify-content: space-between;}/*设置图片大小*/body > header img{ height: 100%;}/*轮播图*/body > div{ height: 30vh;}body > div img{ height: 100%; width: 100%;}/*导航*/body > nav > ul > li > a >img{ height: 60px; width: 60px;}body > nav > ul{ display: flex; justify-content: space-around; background-color: #888888;}body > nav > ul > li > a { margin-top: 1vh; display: flex; flex-direction: column;}/*课程区*/body > main > setcion >h3{ color: #666666; margin-left: 1vh;}body > main > setcion >div{ display: flex; flex-direction: row;}body > main > setcion > div > a > img{ width: 300px; height: 150px;}body > main > setcion > div > span{ flex-grow: 1; display: flex; flex-direction: column;}body > main > setcion > div > span > span > i{ background-color: #bd2c00;}body > main > setcion > div > span > span{ margin-top: auto;}body > main > setcion > div > span > span{ display: flex; /*两端对齐*/ justify-content: space-between;}/*尾部*/body > footer{ height: 8vh; display: flex; flex-direction: row; justify-content: space-around;}body > footer > a{ margin-top: 1vh; display: flex; flex-direction: column;}body > footer > a > i{ font-size: 20px !important;}
