Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:大家才学习不到二周的课程, 能写到如此地步, 已经相当不错了
整个页面分为:头部header
、轮播图banner
、导航nav
、主体main
、尾部footer
五大部份。
1.1 头部header
: 用户头像、logo 、用户导航,水平排列
1.2 轮播图banner
:可点图片a+img
1.3 导航nav
:2个无序列表ul
垂直排列。每个ul
中4个列表li
水平排列。li
内是可点击a
的1张图片img
和图片说明span
。
1.4 主体main
:
主体main
分为:推荐课程recomment
、最新更新renew
、最新文章article
、最新博文blog
、最新问答quan
五部分垂直排列。
1.5 尾部footer
:4个字体图标和说明span
水平排列,每个字体图标和说明span
垂直排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php中文网移动端首页</title>
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<header>
<a href=""><img src="static/images/user-pic1.jpg" alt=""></a>
<a href=""><img src="static/images/logo.png" alt=""></a>
<a href=""><img src="static/images/user-nav.jpg" alt=""></a>
</header>
<div class="banner">
<a href=""><img src="static/images/banner.jpg" alt=""></a>
</div>
<nav>
<ul>
<li>
<a href="">
<img src="static/images/html.png" alt="">
<span>HTML/CSS</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/JavaScript.png" alt="">
<span>JavaScript</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/code.png" alt="">
<span>服务器端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/sql.png" alt="">
<span>数据库</span>
</a>
</li>
</ul>
</nav>
<main>
<article class="recommend">
<h3>推荐课程</h3>
<section>
<a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
<a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
</section>
<section>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span><i>中级</i>55780次播放</span>
</span>
</div>
</section>
</article>
<article class="renew">
<h3>最新更新</h3>
<section>
<div>
<a href=""><img src="static/images/zxkc1.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带...</span>
<span><i>中级</i>55780次播放</span>
</span>
</div>
</section>
</article>
<article class="article">
<h3>最新文章</h3>
<section>
<div>
<span>
<a href="">java学了做什么?</a>
<span><i>发布时间:</i>2019-12-30</span>
</span>
<a href=""><img src="static/images/zxwz1.jpg" alt=""></a>
</div>
</section>
<section>
<div>
<span>
<a href="">更多内容</a>
</span>
</div>
</section>
</article>
<article class="blog">
<h3>最新博文</h3>
<section>
<span>
composer安装laravel,nginx服务器路配置解决404问题,创建简单的控制器...
</span>
<i>2019-12-27</i>
</section>
</article>
<article class="quan">
<h3>最新问答</h3>
<section>
<span>
变量规则无法定义
</span>
<i>2019-12-30</i>
</section>
</article>
</main>
<footer>
<a href="">
<img src="static/font-icon/zhuye.png" alt="">
<span>首页</span>
</a>
<a href="">
<img src="static/font-icon/video.png" alt="">
<span>视频</span>
</a>
<a href="">
<img src="static/font-icon/luntan.png" alt="">
<span>社区</span>
</a>
<a href="">
<img src="static/font-icon/geren.png" alt="">
<span>我的</span>
</a>
</footer>
</body>
</html>
@import "reset.css";
/*头部样式*/
header{
/*固定定位*/
position: fixed;
top: 0;
/*宽度自适应*/
width: 100%;
height:45px;
background-color: #444444;
color: #ffffff;
min-width: 320px;
max-width: 768px;
/*转为flex*/
display: flex;
/*水平排列*/
flex-direction: row;
/*两端对齐*/
justify-content: space-between;
/*垂直方向居中排列*/
align-items: center;
}
/*设置用户头像/用户导航图标大小*/
header > a:first-of-type > img,
header > a:last-of-type > img {
width: 30px;
height: 30px;
margin: 5px;
}
header > a:first-of-type > img {
/*用户头像圆角*/
border-radius: 50%;
}
/*轮播图*/
.banner > a {
display: flex;
height: 200px;
}
/*导航区*/
nav {
background-color: #fff;
display: flex;
/*垂直,不换行*/
flex-flow: column nowrap;
}
nav img {
width: 45px;
height: 49px;
}
nav > ul {
display: flex;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: flex;
flex-flow: column wrap;
align-items: center;
margin: 10px;
}
nav ul li a span {
margin-top: 5px;
align-items: center;
}
/*主体内容区*/
main {
display: flex;
flex-direction: column;
}
main > .recommend > section:first-of-type {
/*第1个section内两图片水平排列*/
display: flex;
flex-direction: row;
}
main > .recommend > section:first-of-type > a {
/*第1个section内两图片样式*/
margin: 5px;
flex: 1;
}
main > .recommend > section:first-of-type > a > img {
/*第1个section内两图片高度*/
height: 90px;
}
main > .recommend > section:last-of-type {
/*第2个section内两div(图片和说明)整体垂直排列*/
display: flex;
flex-direction: column;
}
main > .recommend > section:last-of-type > div {
background-color: #fff;
margin: 5px;
display: flex;
/*图片和说明水平排列*/
flex-direction: row;
}
main > .recommend > section:last-of-type > div img {
width: 350px;
height: 90px;
}
main > .recommend > section:last-of-type > div > span {
flex: 1;
display: flex;
/*说明垂直排列*/
flex-direction: column;
margin-top: 5px;
padding-left: 10px;
}
main > .recommend > section:last-of-type > div > span i {
font-style: normal;
background-color: #333333;
color: white;
border-radius: 3px;
padding: 0 5px;
font-size: smaller;
}
main > .recommend > section:last-of-type > div > span > span {
margin-top: 40px;
display: flex;
/*初级、播放次数水平*/
flex-direction: row;
justify-content: space-between;
}
body {
height: 2000px;
}
/*设置最新更新垂直排列*/
main > .renew > {
display: flex;
/*h3\section垂直*/
flex-direction: column;
}
main > .renew > section > {
display: flex;
/div垂直*/
flex-direction: column;
}
main > .renew > section > div {
display: flex;
/*div内图片和span水平*/
flex-direction: row;
margin: 40px 0;
}
main > .renew > section > div > span {
display: flex;
/*span内a\span垂直*/
flex-direction: column;
margin-top: 5px;
margin-left: 5px;
}
main > .renew > section > div > span >span {
margin-top: 5px;
font-size: 14px;
}
main > .renew > section > div > span >span > i {
font-size: 14px;
}
main > .renew > section > div > span i {
font-style: normal;
background-color: #333333;
color: white;
border-radius: 3px;
font-size: smaller;
}
main > .renew > section > div > span > span {
display: flex;
/*初级、播放次数水平*/
flex-direction: row;
justify-content: space-between;
}
main > .renew > section > div img {
width: 300px;
height: 80px;
}
/*最新文章*/
main > .article {
display: flex;
flex-direction: column;
}
main > .article > section > div {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 5px 0;
background-color: white;
}
main > .article > section > div img {
width: 220px;
height: 70px;
}
main > .article > section > div > span {
display: flex;
flex-direction: column;
margin: 10px 0;
}
/*最新博文*/
main > .blog {
display: flex;
flex-direction: column;
}
main > .blog > section {
display: flex;
flex-direction: row;
background-color: white;
margin: 5px 0;
height: 50px;
justify-content: space-between;
}
main > .blog > section > span {
margin-top: 15px;
}
main > .blog > section > i {
margin-top: 15px;
}
/*最新问答*/
main > .quan {
display: flex;
flex-direction: column;
}
main > .quan > section {
display: flex;
flex-direction: row;
background-color: white;
margin: 5px 0;
height: 50px;
justify-content: space-between;
}
main > .quan > section > span {
margin-top: 15px;
}
main > .quan > section > i {
margin-top: 15px;
}
/*尾部*/
footer {
position: fixed;
bottom: 0;
width: 100%;
height:60px;
/*background-color: #444444;*/
color: #ffffff;
min-width: 320px;
max-width: 768px;
/*转为flex*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
footer > a > img {
width: 20px;
height: 20px;
margin: 5px;
}
footer > a > span {
display: flex;
flex-direction: column;
color: red;
}
总结:
第一次没有完全老师代码的作业,过程很艰难。结果不知道合格不合格。但是个人觉得进步很大,感常见蛮有成就感的。
不足之处:就是基础不牢固,需要慢慢补充。
提问老师:布局之外的其它样式,比如宽高,字体……是须要通过不断写代码积累的吗?还是通过什么工具测量的?