1227日作业——Flex实现手机端的布局
1、本次手机端用flex实现,我觉得是对之前知识的综合运用考验,其中包括了:
flex容器的6属性运用和flex项目的6属性运用
2、在做本次作业的时候,多看多记多练是关键,之前自己没看作业视频的时候,经常容易卡壳,有时候一个小小的细节,就要耽搁半个小时以上,可能都还做不出来
3、本次的页面依然有很多不足之处,继续努力
感谢老师的辛勤付出!
以下是实现图片
以下是代码(包含)CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex移动端布局</title>
<style>
* {
padding: 0;
margin-top: 0;
/*outline: 1px dashed red;*/
}
a {
text-decoration: none;
color: #555555;
}
ul , li {
list-style: none;
}
img {
width: 100%;
height: 100%;
}
body {
min-width: 320px;
max-width: 768px;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden ;
margin: auto;
}
body header , body footer {
height: 8vh;
}
body > header {
display: flex;
justify-content: space-between;
background-color: black;
}
body > header > img {
height: inherit;
width: 5vw;
}
body > header > a >img {
height: 100%;
width: 8vw;
}
body > main {
flex-grow: 1;
overflow: auto;
}
/*轮播图*/
body > main > div {
height: 40vh;
width: 100%;
}
body > main > .banner > img {
height: inherit;
width: 100%;
}
body > main > nav {
display: flex;
flex-flow: column nowrap;
background-color: wheat;
}
body > main > nav > ul {
display: flex;
}
body > main > nav > ul > li {
flex-grow: 1;
width: 25%;
}
body > main > nav > ul > li > a {
display: flex;
flex-flow: column wrap;
align-items: center;
margin-top: 5px;
}
body > main > nav > ul > li > a > img {
height: 40px;
width: 40px;
}
/*推荐课程*/
body > main > section {
display: flex;
flex-direction: column;
}
body > main > section > .picture {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
body > main > section > .picture img {
height: 20vh;
width: 50%;
margin: 5px;
}
body > main > section > .comment > section {
display: flex;
flex-flow: row nowrap;
height: 20vh;
}
body > main > section > .comment > section img {
width: 250px;
padding: 5px;
box-sizing: border-box;
}
body > main > section > .comment > section > div {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content:space-around ;
margin-left: 5px;
}
body > main > section > .comment > section > div> div {
display: flex;
/*flex-grow: 1;*/
}
body > main > section > .comment > section > div> div span:first-of-type{
background-color: black;
color: white;
border-radius: 5px;
}
footer {
display: flex;
justify-content: space-between;
background-color: #555555;
flex-grow: 1;
}
footer > span {
color: white;
margin: auto;
}
</style>
</head>
<body>
<!-- 头部-->
<header>
<img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
<a href=""><img src="1225/static/images/logo.png" alt=""></a>
<img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
</header>
<!-- 主体-->
<main>
<!-- 轮播图-->
<div class="banner">
<img src="1225/static/images/5.jpg" alt="">
</div>
<!-- 导航-->
<nav>
<ul>
<li>
<a href="">
<img src="icon_fh1ahalyzh/all.png" alt="">
<span>HTML/CSS</span>
</a>
</li>
<li>
<a href="">
<img src="icon_fh1ahalyzh/auto.png" alt="">
<span>JavaScript</span>
</a>
</li>
<li>
<a href="">
<img src="icon_fh1ahalyzh/code.png" alt="">
<span>服务器</span>
</a>
</li>
<li>
<a href="">
<img src="icon_fh1ahalyzh/component.png" alt="">
<span>数据库</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="">
<img src="icon_fh1ahalyzh/copy.png" alt="">
<span>移动端</span>
</a>
</li>
<li>
<a href="">
<img src="icon_fh1ahalyzh/editor.png" alt="">
<span>手册</span>
</a>
</li>
<li>
<a href="">
<img src="icon_fh1ahalyzh/history.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="">
<img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>
<!-- 推荐课程-->
<section>
<h2>推荐课程</h2>
<div class="picture">
<img src="1225/static/images/img3.jpg" alt="">
<img src="1225/static/images/img4.jpg" alt="">
</div>
<div class="comment">
<section>
<img src="1225/static/images/img1.jpg" alt="">
<div>
<span>CI框架30分钟极速入门</span>
<div>
<span>中级</span>
<span>2187次播放</span>
</div>
</div>
</section>
<section>
<img src="1225/static/images/img1.jpg" alt="">
<div>
<span>CI框架30分钟极速入门</span>
<div>
<span>中级</span>
<span>2187次播放</span>
</div>
</div>
</section>
</div>
</section>
</main>
<footer>
<span>首页</span>
<span>视频</span>
<span>社区</span>
<span>我的</span>
</footer>
</body>
</html>