实例
body{
padding-bottom: 70px;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 42px;
background: #444444;
color: white;
min-width: 320px;
max-width: 768px;
display: flex;
justify-content: space-between;
align-items: center;
}
header > img:first-of-type {
width: 26px;
height: 26px;
margin: 5px;
border-radius: 50%;
}
header > img:last-of-type {
width: 26px;
height: 26px;
margin: 5px;
}
header img {
width: 94px;
}
.banner {
display: flex;
height: 200px;
}
/****************************/
.nav {
background-color: white;
display: flex;
flex-flow: column nowrap;
padding: 15px 0;
box-shadow: 1px 1px 1px lightgray;
}
.nav img {
width: 45px;
height: 45px;
}
.nav > ul {
display: flex;
flex-flow: row nowrap;
margin: 15px ;
}
.nav > ul >li {
flex: 1;
}
.nav > ul > li > a {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
/*****************************/
main {
display: flex;
flex-flow: column nowrap;
}
.recommend > section:first-of-type {
display: flex;
flex-flow: row nowrap;
}
.recommend > section:first-of-type a {
margin: 5px;
flex: 1;
}
.recommend > section:first-of-type a img {
height: 120px;
}
.recommend > section:last-of-type {
display: flex;
flex-flow: column nowrap;
}
.recommend > section:last-of-type div {
display: flex;
flex-flow: row nowrap;
background-color: white;
margin: 5px;
box-sizing: border-box;
box-shadow: 1px 1px 1px lightgray;
}
.recommend > section:last-of-type img{
width: 350px;
height: 90px;
margin: 5px;
}
.recommend > section:last-of-type > div >span {
display: flex;
flex-flow: column nowrap;
margin-top: 5px;
padding-left: 10px;
}
.recommend > section:last-of-type > div > span i {
font-style: normal;
background-color: #333333;
color: white;
border-radius: 4px;
padding: 0 5px;
font-size: smaller;
margin-right: 5px;
}
.new > section:first-of-type {
display: flex;
flex-flow: column nowrap;
}
.new > section:first-of-type > div {
display: flex;
flex-flow: row nowrap;
margin-top: 5px;
background-color: white;
width: 768px;
box-shadow: 1px 1px 1px lightgray;
}
.new > section:first-of-type img {
width: 350px;
height: 90px;
}
.new > section:first-of-type > div > ul > li:first-of-type{
font-size: 1.1rem;
}
.new > section:first-of-type > div > ul > li:nth-of-type(2){
font-size: 0.8rem;
}
.new > section:first-of-type > div > ul > li {
margin: 7px;
}
.new > section:first-of-type > div > ul > li > i {
font-style: normal;
background-color: #333333;
color: white;
border-radius: 4px;
padding: 0 5px;
font-size: smaller;
margin-right: 5px;
}
.new > section:first-of-type > div > ul {
margin: 0 8px;
width: 768px;
}
.new > section:first-of-type > div > ul > li:last-of-type{
display: flex;
justify-content: space-between;
}
/********************footer******************/
footer img {
width: 16px;
height: 16px;
}
footer {
position: fixed;
bottom: 0;
width: 768px;
height: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
border-top: 1px solid lightgray;
padding: 5px;
}
footer a {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
作业总结：
在模仿网站的过程中发现，需要反复的练习前期学到的各种基础知识 比如html的各种标签的用法，css 中元素选择器的用法等等，往往一个知识点没有掌握 在整个过程中就能卡住几个小时。
作业有点脱节 在之后会陆续补上