图片演示
代码演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>php中文网首页-实战</title>
</head>
<style>
/* 公共样式 */
body {
height: 100%;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
/*不要出现水平滚动条*/
overflow-x: hidden;
/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
-webkit-tap-highlight-color: transparent;
}
/* 网站头部 */
.top {
position: fixed;
top: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top {
display: flex;
}
.top img:first-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
border-radius: 50%;
margin-left: 5px;
}
.top img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
margin-right: 15px;
}
.top .logo {
text-align: center;
flex: 1;
}
.top .logo img {
width: 94px;
height: 45px;
}
/*轮播图*/
.banner {
display: flex;
}
.banner img {
width: 100%;
height: 160px;
}
/* 导航区 */
.nav {
height: 170px;
background-color: white;
box-sizing: border-box;
}
.nav ul {
margin: 0;
padding: 6px;
display: flex;
}
.nav ul li {
list-style-type: none;
text-align: center;
height: 75px;
flex: 1;
}
.nav ul li img {
width: 45px;
height: 45px;
}
.nav ul li a {
text-align: center;
color: gray;
text-decoration: none;
}
/* 推荐课程去 */
h3 {
color: gray;
}
.courses {
height: 100%;
color: gray;
}
.courses ul {
margin: 0;
padding: 0;
list-style: none;
/*flex布局*/
display: flex;
}
.courses ul li {
padding: 5px;
}
.courses ul img {
width: 100%;
height: 90px;
}
.courses div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
/*flex布局*/
display: flex;
justify-content: flex-start;
}
.courses div img {
width: 100%;
height: 90px;
}
.courses div a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.courses div p {
flex: .55;
margin-left: 15px;
}
.courses div p span:first-of-type {
font-size: 0.8rem;
background-color: black;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.courses div p span:last-of-type {
font-size: 0.7rem;
}
/*底部样式*/
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 768px;
left: 50%;
border-top: 1px solid #ccc;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.footer ul li img {
width: 20px;
height: 20px;
}
.footer ul li a {
color: gray;
text-decoration: none;
}
.footer ul li {
flex: 1;
}
/* 最新更新区 */
.zuixin {
height: 100%;
color: gray;
}
.zuixin div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
/*flex布局*/
display: flex;
justify-content: flex-start;
}
.courses div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
/*flex布局*/
display: flex;
]
}
.zuixin div img {
width: 100%;
height: 90px;
}
.zuixin div a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.zuixin div p {
flex: .55;
margin-left: 15px;
}
.zuixin div p span:first-of-type {
font-size: 0.1rem;
padding: 0 2px;
}
.zuixin div p span:nth-of-type(2) {
font-size: 0.8rem;
background-color: black;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.zuixin div p span:last-of-type {
font-size: 0.7rem;
position: relative;
left: 70%;
}
/* 最新文章 */
.zxwz div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
/*flex布局*/
display: flex;
flex-flow: row-reverse;
}
.zxwz div img {
width: 100%;
height: 90px;
}
.zxwz div a {
text-decoration: none;
color: rgb: 0;
flex: 0.35;
}
.zxwz div p {
flex: .65;
margin: 0;
margin-left: 15px;
margin-top: 5px;
}
.zxwz div p a {
margin-bottom: 10px;
color: #444444;
font-size: 14px;
font-weight: bold;
}
.zxwz div p span {
color: #888;
font-size: 12px;
}
/* 更多内容区 */
.gdnr {
margin: 10px 0px;
}
.gdnr a {
color: gray;
text-decoration: none;
display: block;
margin: 0 auto;
/* line-height: 30px; */
line-height: 10px;
text-align: center;
background: #fff;
padding: 10px 0;
}
/* 最新博文区 */
.zxbw div {
width: 100;
display: flex;
justify-content: space-between;
background-color: #fff;
margin: 10px 0;
}
.zxbw div p:nth-child(1) {
height: 29px;
margin-left: 15px;
font-size: 14px;
color: gray;
font-weight: bold;
}
.zxbw div p:nth-child(2) {
height: 29px;
font-size: 12px;
color: #888;
margin-right: 15px;
}
</style>
<body>
<!-- 顶部 -->
<div class="top">
<img src="static/images/user-pic.jpeg" alt="">
<div class="logo">
<img src="//m.m.sbmmt.com/static/images/logo.png" alt="">
</div>
<img src="/static/images/user-nav.jpg" alt="">
</div>
<!-- 轮播图 -->
<div class="banner">
<img src="static/images/banner.jpg" alt="">
</div>
<!-- 导航区 -->
<div class="nav">
<ul>
<li>
<a href=""><img src="static/images/html.png" alt=""><br>HTML/CSS</a>
</li>
<li>
<a href=""><img src="static/images/JavaScript.png" alt=""><br>JavaScript</a>
</li>
<li>
<a href=""><img src="static/images/code.png" alt=""><br>服务端</a>
</li>
<li>
<a href=""><img src="static/images/sql.png" alt=""><br>数据库</a>
</li>
</ul>
<ul>
<li>
<a href=""><img src="static/images/app.png" alt=""><br>移动端</a>
</li>
<li>
<a href=""><img src="static/images/manual.png" alt=""><br>手册</a>
</li>
<li>
<a href=""><img src="static/images/tool2.png" alt=""><br>工具</a>
</li>
<li>
<a href=""><img src="static/images/live.png" alt=""><br>直播</a>
</li>
</ul>
</div>
<!--课程区-->
<h3>推荐课程</h3>
<div class="courses">
<ul>
<li>
<a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
</li>
</ul>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门</a>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<p>
<a href="">2018前端入门_HTML5</a>
<br>
<span>初级</span><span>210066次播放</span>
</p>
</div>
</div>
<!-- 最新更新区 -->
<h3>最新更新</h3>
<div class="zuixin">
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">Laravel 5.8 中文文档手册</a>
<br>
<span>《Laravel 5.1/5.8速查表：//m.sbmmt.com/phpkj/laravel/cheatsheet5</span>
<br>
<span>中级</span><span>7240次播放
</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">JavaScript极速入门</a>
<br>
<span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编</span>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">第七期_直播体验课</a>
<br>
<span>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让</span>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">CSS3 极速入门</a>
<br>
<span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，</span>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">HTML5 极速入门</a>
<br>
<span>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局</span>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">nodejs开发基础教程</a>
<br>
<span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一</span>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
</div>
<!-- 最新文章 -->
<h3>最新文章</h3>
<div class="zxwz">
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">百度站长主动推送php怎么弄</a>
<br>
<span>发布时间：2019-09-10</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">百度站长主动推送php怎么弄</a>
<br>
<span>发布时间：2019-09-10</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">百度站长主动推送php怎么弄</a>
<br>
<span>发布时间：2019-09-10</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">百度站长主动推送php怎么弄</a>
<br>
<span>发布时间：2019-09-10</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">百度站长主动推送php怎么弄</a>
<br>
<span>发布时间：2019-09-10</span>
</p>
</div>
</div>
<!-- 更多内容 -->
<div class="gdnr">
<a href="" class="more">更多内容</a>
</div>
<!-- 最新博文区 -->
<h3>最新博文</h3>
<div class="zxbw">
<div>
<p>mysql查询时间戳和日期的转换</p>
<p>2019-09-07</p>
</div>
<div>
<p>mysql查询时间戳和日期的转换</p>
<p>2019-09-07</p>
</div>
<div>
<p>mysql查询时间戳和日期的转换</p>
<p>2019-09-07</p>
</div>
<div>
<p>mysql查询时间戳和日期的转换</p>
<p>2019-09-07</p>
</div>
\
</div>
<br><br><br>
<!--底部-->
<div class="footer">
<ul>
<li>
<a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a>
</li>
<li>
<a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a>
</li>
<li>
<a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a>
</li>
<li>
<a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
看着视频挺简单，自己写写出一堆毛病。如下图其中一个毛病（高度写死值，内容不够就这样一片空白）：
flex布局一边看网上文字基础一边测试，才写出来下面的行内容反向展示啊，两端对齐啊什么的，还是得多练才行。。
