pc端实战练习 - 第11期-css

html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="iconfont.css" />
<link rel="stylesheet" href="php.css" />
<title>pc端实战练习</title>
</head>
<body>

<header>
<a href=""><img src="./imgs/logo1.jpg" alt="图片加载失败" /></a>
<a href=""><img src="./imgs/logo.png" alt="图片加载失败" /></a>
<span class="iconfont"></span>
</header>

<div class="carousel">
<img src="./imgs/play.jpg" alt="图片加载失败" />
</div>

<div class="nav">
<div class="item">
<a href=""><img src="./imgs/html1.png" alt="图片加载失败" /></a>
<p>HTML/CSS</p>
</div>
<div class="item">
<a href=""><img src="./imgs/JavaScript.png" alt="图片加载失败" /></a>
<p>JavaScript</p>
</div>
<div class="item">
<a href=""><img src="./imgs/code.png" alt="图片加载失败" /></a>
<p>服务端</p>
</div>
<div class="item">
<a href=""><img src="./imgs/sql.png" alt="图片加载失败" /></a>
<p>数据库</p>
</div>
<div class="item">
<a href=""><img src="./imgs/app.png" alt="图片加载失败" /></a>
<p>移动端</p>
</div>
<div class="item">
<a href=""><img src="./imgs/manual.png" alt="图片加载失败" /></a>
<p>shouce</p>
</div>
<div class="item">
<a href=""><img src="./imgs/tool2.png" alt="图片加载失败" /></a>
<p>工具</p>
</div>
<div class="item">
<a href=""><img src="./imgs/live.png" alt="图片加载失败" /></a>
<p>直播</p>
</div>
</div>
<h2 class="title">推荐课程</h2>
<div class="one">
<a href=""><img src="./imgs/81.jpg" alt="图片加载失败" /></a>
<a href=""><img src="./imgs/82.jpg" alt="图片加载失败" /></a>
</div>
<div class="two">
<a href=""><img src="./imgs/ci.jpg" alt="图片加载失败" /></a>
<div class="two-one">
<a href="">Cl框架30分钟极速入门</a>
<div class="two-two"><span>初级</span> <span>61266次播放</span></div>
</div>
</div>
<div class="two">
<a href=""><img src="./imgs/html5.jpg" alt="图片加载失败" /></a>
<div class="two-one">
<a href="">2018前端入门_HTML5</a>
<div class="two-two"><span>初级</span> <span>310381次播放</span></div>
</div>
</div>
<h2 class="title">最新更新</h2>
<div class="last-update">
<div>
<a href=""><img src="./imgs/php.png" alt="图片加载失败" /></a>
</div>
<div class="g">
<a href=""><h3>php快速操控Excel之PhpSpreadsheet</h3></a>
<p>
老的PHPExcel已经停止更新了!
目前最新的是使用phpOffice插件PhpSpreadsheet,
用纯php编写的库，它提供了一组类，
允许您读取和写入不同的电子表格文件格式！
php中文网欧阳克老师原创课程！注：php运行环境需要php7.1以上
</p>
<div>
<span>中级</span>
<span>15110次播放</span>
</div>
</div>
</div>
<div class="last-update">
<div>
<a href=""><img src="./imgs/tp6.png" alt="图片加载失败" /></a>
</div>
<div class="g">
<a href=""><h3>Thinkphp6.0正式版视频教程</h3></a>
<p>
Thinkphp6.0从2019年10月244日正式发布，相对测试版，右很多变动，
目前TP6已经相对比较稳定了，所有php中文网在2020年再次重新录制课程，
帮助快速入门！相关推荐：ThinkPHP6.0完全开发手册（注解版）http://
www.php.cn/course/1049.html
</p>
<div>
<span>中级</span>
<span>48963次播放</span>
</div>
</div>
</div>
<div class="last-update">
<div>
<a href=""><img src="./imgs/py.jpg" alt="图片加载失败" /></a>
</div>
<div class="g">
<a href=""><h3>2019python自学视频</h3></a>
<p>
本课程适合想从零开始学习 Python 编程语言的开发人员。
由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程
</p>
<div>
<span>初级</span>
<span>36512次播放</span>
</div>
</div>
</div>
<div class="last-update">
<div>
<a href=""><img src="./imgs/php1.png" alt="图片加载失败" /></a>
</div>
<div class="g">
<a href=""><h3>PHP开发免费公益直播课</h3></a>
<p>
主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00
主题：如何高效的学习一门新技术？具体内容：1. 2020了,
还有哪些值得学习的新技术? 2.如何高效的学习前端开发?
3.如果高效的学习PHP开发? 4.phpStudy V8 新功能介绍与演示
5.小皮面板功能介绍
</p>
<div>
<span>初级</span>
<span>6824次播放</span>
</div>
</div>
</div>
<div class="last-update">
<div>
<a href=""><img src="./imgs/web.jpg" alt="图片加载失败" /></a>
</div>
<div class="g">
<a href=""><h3>从零开始到WEB响应式布局</h3></a>
<p>
重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，
了解可以利用HTML+CSS做什么，
有相关工具、后端语言，逻辑思维训练等知识点
</p>
<div>
<span>初级</span>
<span>29227次播放</span>
</div>
</div>
</div>
<div class="last-update">
<div>
<a href=""><img src="./imgs/php2.png" alt="图片加载失败" /></a>
</div>
<div class="g">
<a href=""><h3>php快速操控Excel之PhpSpreadsheet</h3></a>
<p>
老的PHPExcel已经停止更新了!
目前最新的是使用phpOffice插件PhpSpreadsheet,
用纯php编写的库，它提供了一组类，
允许您读取和写入不同的电子表格文件格式！
php中文网欧阳克老师原创课程！注：php运行环境需要php7.1以上
</p>
<div>
<span>中级</span>
<span>8888次播放</span>
</div>
</div>
</div>
<h2 class="title">最新文章</h2>
<div class="j">
<div>
<a href="">ps转化为智能对象有什么作用</a>
<p>发布时间:2020-4-12</p>
</div>
<div>
<a href=""><img src="./imgs/new-essay44.jpg" alt="" /></a>
</div>
</div>
<div class="j">
<div>
<a href="">电脑win键在哪里</a>
<p>发布时间:2020-4-12</p>
</div>
<div>
<a href=""><img src="./imgs/new-essay3.jpg" alt="" /></a>
</div>
</div>
<div class="j">
<div>
<a href="">mac如何升级系统版本</a>
<p>发布时间:2020-4-12</p>
</div>
<div>
<a href=""><img src="./imgs/apple.jpg" alt="" /></a>
</div>
</div>
<div class="j">
<div>
<a href="">指令代码序列称为程序吗</a>
<p>发布时间:2020-4-12</p>
</div>
<div>
<a href=""><img src="./imgs/newessay-.jpg" alt="" /></a>
</div>
</div>
</body>
<div class="j">
<div>
<a href="">p日期转换成年月日格式的方法</a>
<p>发布时间:2020-4-12</p>
</div>
<div>
<a href=""><img src="./imgs/new-essay1.jpg" alt="" /></a>
</div>
</div>
<div class="title3">
<a href="">更多内容</a>
</div>
<h2 class="title">最新博文</h2>
<div class="blog">
<a href=""><h4>css3:细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>CSS 中各类选择器的属性及应用</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>CSS3：弹性盒子flex布局</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>flex容器中的主轴方向与项目换行缩写、主轴
，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例
</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>Jquery+AJAX上传文件，无刷新上传并重命名文件</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="title3">
<a href="">更多内容</a>
</div>
<h2 class="title">最新问答</h2>
<div class="blog">
<a href=""><h4>css3:细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>CSS 中各类选择器的属性及应用</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>CSS3：弹性盒子flex布局</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>flex容器中的主轴方向与项目换行缩写、主轴
，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例
</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="blog">
<a href=""><h4>Jquery+AJAX上传文件，无刷新上传并重命名文件</h4></a></<a>
<span>2020-14-12</span>
</div>
<div class="title3">
<a href="">更多内容</a>
</div>
<footer>
<a href="">
<span class="iconfont"></span>
<span>首页</span>
</a>
<a href="">
<span class="iconfont"></span>
<span>视频</span>
</a>
<a href="">
<span class="iconfont"></span>
<span>社区</span>
</a>
<a href="">
<span class="iconfont"></span>
<span>我的</span>
</a>
</footer>
</body>
</html>

css文件

* {
margin: 0px;
padding: 0px;
}
html {
width: 100vw;
height: 100vh;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
body {
min-width: 360px;
background-color: #edeff0;
display: flex;
flex-flow: column nowrap;
}
.iconfont {
color: #ffffff;
font-size: 30px;
}
body header {
height: 40px;
width: 100vw;
background-color: #333;
padding: 0 10px;
position: fixed;
top: 0px;
width: 95vw;
display: flex;
justify-content: space-between;
align-items: center;
}
header > a:first-of-type > img {
width: 30px;
border-radius: 50%;
}
header > a:last-of-type > img {
width: 120px;
}
.carousel > img {
margin-top: 40px;
width: 100%;
}
.nav {
height: 160px;
display: flex;
flex-flow: row wrap;
padding: 10px 0;
background-color: white;
align-content: space-between;
}
.nav > .item {
align-items: center;
display: flex;
flex-flow: column nowrap;
flex: 1 0 25vw;
}
.nav a {
text-align: center;
}
.nav img {
width: 50%;
}
/* 标题 */
h2 {
color: #888;
height: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: end;
padding-left: 10px;
}
/* 推荐课程 */
.one {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
width: 100vw;
display: flex;
}
.one img {
width: 96%;
}
.two {
margin: 10px 10px;
padding: 10px;
background-color: white;
display: flex;
flex-flow: row nowrap;
}
.two img {
width: 138px;
height: 80px;
}
.two-one > a {
padding: 0 10px;
display: flex;
flex-flow: column nowrap;
text-decoration: none;
font-size: 16px;
color: gray;
}
a:hover {
color: lightcoral;
}
.two-two {
padding: 10px;
font-size: 12px;
}
.two-two > span:first-of-type {
border: 1px solid black;
color: white;
background-color: black;
border-radius: 40%;
}
.last-update {
padding: 10px;
margin: 10px;
background-color: white;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.last-update img {
width: 138px;
height: 80px;
}
.g {
padding: 0 10px;
width: 195px;
height: 80px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
}
.g a {
text-decoration: none;
}
.g h3 {
color: gray;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.g p {
color: gray;
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.g div {
color: gray;
padding-right: 10px;
font-size: 12px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.g > div > span:first-of-type {
border: 1px solid;
border-radius: 40%;
color: white;
background-color: black;
}
.j {
width: 90vw;
padding: 10px;
margin: 10px;
background-color: white;
color: gray;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.j div:first-of-type {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
}
.j img {
width: 100px;
height: 65px;
}
.j a {
color: gray;
text-decoration: none;
}
.j p {
font-size: 12px;
}
.title3 {
margin: 10px;
padding: 5px;
font-size: 16px;
text-align: center;
background-color: white;
}
.title3 > a {
text-decoration: none;
color: gray;
}
.blog {
width: 90vw;
color: gray;
margin: 10px;
padding: 10px;
background-color: white;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.blog a {
color: gray;
text-decoration: none;
}
.blog h4 {
width: 230px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
footer {
background-color: #edeff0;
color: #666;
height: 60px;
border: 1px solid lightgray;
position: fixed;
bottom: 0px;
width: 100vw;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
}
footer a {
color: #666;
text-decoration: none;
/* margin: 5px 0px; */
display: flex;
flex-flow: column nowrap;
/* justify-content: center; */
align-items: center;
}
footer > a > span:first-of-type {
font-size: 35px;
color: #666;
}
footer > a > span:last-of-type {
font-size: 10px;
}

总结

批改老师：

天蓬老师

批改状态：合格

老师批语：这个作业虽然简单, 但里面应用了许多新知识, 特别是许多高级选择器的使用, 非常多, 这些选择器用得好, 你的html代码会非常的干净, seo非常棒