1107作业

实例

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 中元素选择器的用法等等，往往一个知识点没有掌握 在整个过程中就能卡住几个小时。

作业有点脱节 在之后会陆续补上