试着自己先模仿一些现成网站首页或某个页面(选做)（补充昨天的作业，只写了一部分，写的很糙，模仿PHP官网写的）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
/*height: 100vh;*/
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
background-color: #f4f5f7;
}
div {
display: flex;
border-radius: 5px;
}
.div1 {
display: flex;
height: 60px;
background-color: #000;
}
.div3 {
display: flex;
height: 250px;
background-color: #393D49;
}
.div2 {
flex: 1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.div2 > div {
margin-top: 20px;
width: 1200px;
}
.div01 ,.div03,.div04,.div06,.div07,.div09,.div10,.div11{
height: 516px;
box-sizing: border-box;
display: flex;
/*flex-flow: column;*/
}
.div02,.div05,.div08 {
height: 80px;
}
.div12 {
height: 120px;
}
img {
border-radius: 10px;
}
.div001 {
flex: 2;
box-sizing: border-box;
background-color: #2d333a;
}
.div001 > ul
{
list-style:none;
color: white;
font-size: 18px;
}
.div001 > ul >li {
padding: 18px 30px;
}
.div002 {
flex: 8;
display: flex;
flex-flow: column nowrap;
}
.div002>div:first-of-type {
flex: 1;
display: flex;
}
.div002>div:nth-of-type(2) {
flex: 6;
}
.div002>div:last-of-type {
flex: 3;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.div002>div:first-of-type>div:first-of-type
{
flex: 6;
display: flex;
/*justify-content: center;*/
align-items: center;
}
.div002>div:first-of-type>div:first-of-type>a {
padding: 10px;
font-size: 14px;
color: lightslategray;
}
.div002>div:first-of-type>div:last-of-type {
flex: 4;
display: flex;
justify-content: center;
align-items: center;
}
.div002>div:first-of-type>div:last-of-type > input {
width: 200px;
height: 30px;
}
a {
text-decoration: none;
color: #f4f5f7;
}
nav {
margin-left: 20px;
display: flex;
justify-content: center;
align-items: center;
}
nav > a {
padding: 15px;
/*line-height: 60px;*/
}
.logo {
width: 160px;
background: url("https://www.php.cn/static/images/logo.png") no-repeat center center;
background-size: cover;
}
.login {
width: 300px;
margin-left: 170px;
justify-content: flex-end;
}
.login > a {
line-height: 60px;
padding: 20px;
}
.div01 {
background-color: white;
}
.div03 {
display: flex;
}
.div03>div:first-of-type {
flex: 2;
display: flex;
flex-flow: column nowrap;
}
.div03>div:first-of-type>ul {
list-style: none;
margin-top: 20px;
margin-left: 10px;
display: flex;
flex-flow: column nowrap;
}
.div03>div:first-of-type>ul>li{
font-size: 15px;
padding: 8px;
}
h4 {
margin-top: 15px;
margin-left: 30px;
}
.div03>div:nth-of-type(2) {
flex: 6;
display: flex;
flex-flow: column nowrap;
}
.div03>div:nth-of-type(2)>div {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.div03>div:nth-of-type(2)>div>div {
display: flex;
flex-flow: column nowrap;
}
.div03>div:nth-of-type(2)>div>div >a{
width: 200px;
height: 200px;
text-align: center;
}
.div03>div:nth-of-type(2)>div>div >a > img
{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.div03>div:last-of-type {
flex: 2;
display: flex;
flex-flow: column nowrap;
}
.div03>div:last-of-type>div {
display: flex;
flex-flow: column nowrap;
margin-left: 20px;
}
.div03>div:last-of-type>div>ul {
list-style: none;
margin-left: 10px;
display: flex;
flex-flow: column nowrap;
}
.div03>div:last-of-type>div>ul>li {
padding: 25px;
}
.div03>div:last-of-type>div>ul>li>a{
width: 100px;
height: 100px;
background-color: red;
}
/*.div03>div:last-of-type>div>ul>li>a > img*/
/*{*/
/* width: auto;*/
/* height: auto;*/
/* max-width: 100%;*/
/* max-height: 100%;*/
/*}*/
</style>
</head>
<body>
<div class="div1">
<div class="logo">
<a href="https://www.php.cn/"></a>
</div>
<nav>
<a href="">首页</a>
<a href="">视频教程</a>
<a href="">入门教程</a>
<a href="">社区问答</a>
<a href="">技术文章</a>
<a href="">编程词典</a>
<a href="">资源下载</a>
<a href="">工具下载</a>
<div class="login">
<a href="">登陆</a>
<a href="">注册</a>
</div>
</nav>
</div>
<div class="div2">
<div class="div01">
<div class="div001">
<ul>
<li><a href="">php开发</a></li>
<li><a href="">前端开发</a></li>
<li><a href="">服务端开发</a></li>
<li><a href="">移动开发</a></li>
<li><a href="">数据库开发</a></li>
<li><a href="">服务器运维&下载</a></li>
<li><a href="">在线工具箱</a></li>
<li><a href="">常用类库</a></li>
</ul>
</div>
<div class="div002">
<div>
<div>
<a href="">PHP头条</a>
<a href="">独孤九贱</a>
<a href="">学习路线</a>
<a href="">在线工具</a>
<a href="">趣味课堂</a>
<a href="">社区问答</a>
<a href="">课程直播</a>
</div>
<div>
<input type="text" placeholder="请输入关键词">
</div>
</div>
<div>
<a href="">
<img src="https://www.php.cn/static/images/index_banner9.jpg" alt="">
</a>
</div>
<div>
<a href="">
<img src="https://www.php.cn/static/images/index_yunv.jpg" alt="">
</a>
<a href="">
<img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt="">
</a>
<a href="">
<img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="">
</a>
<a href="">
<img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt="">
</a>
</div>
</div>
</div>
<div class="div02">
<a href="">
<img src="https://www.php.cn/static/images/index_ad222.jpg" alt="">
</a>
</div>
<div class="div03">
<div>
<h4>头条</h4>
<hr>
<ul>
<li>php中文网原创视频</li>
<li>php中文网《玉女心经》</li>
<li>同为动态语言</li>
<li>2019年最新最全面的</li>
<li>ThinkPHP6.0</li>
<li>预警！！！</li>
<li>优化CSS</li>
<li>Web 性能优化</li>
<li>四大常见PHP</li>
<li>金九银十，学习正当时！</li>
<li>php中文网</li>
<li>2019国庆节：</li>
</ul>
</div>
<div>
<h4>最新课程</h4>
<hr>
<div>
<div>
<a href="">
<img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
<p>1</p>
</a>
</div>
<div>
<a href="">
<img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
<p>2019</p>
</a>
</div>
<div>
<a href="">
<img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
<p>2019</p>
</a>
</div>
<div>
<a href="">
<img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
<p>2019</p>
</a>
</div>
<div>
<a href="">
<img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
<p>2019</p>
</a>
</div>
<div>
<a href="">
<img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
<p>2019</p>
</a>
</div>
</div>
</div>
<div>
<!-- <h4>常用手册</h4>-->
<!-- <hr>-->
<!-- <div>-->
<!-- <ul>-->
<!-- <li>-->
<!-- <a href="">-->
<!--<!– <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">–>-->
<!-- <p>手册</p>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>2</li>-->
<!-- <li>3</li>-->
<!-- <li>4</li>-->
<!-- <li>5</li>-->
<!-- <li>6</li>-->
<!-- </ul>-->
<!-- </div>-->
</div>
</div>
<div class="div04">4</div>
<div class="div05">
<a href="">
<img src="https://www.php.cn/static/images/index_banner8.jpg" alt="">
</a>
</div>
<div class="div06">6</div>
<div class="div07">7</div>
<div class="div08">
<a href="">
<img src="https://img.php.cn/upload/article/000/000/003/5b35fe49bfd77495.png" alt="">
</a>
</div>
<div class="div09">9</div>
<div class="div10">10</div>
<div class="div11">11</div>
<div class="div12">12</div>
</div>
<div class="div3">底部</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
将课堂介绍了三个小案例, 自己动手写一遍, 再抄一遍
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机端通用布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
header , footer {
display: flex;
height: 50px;
background-color: lightslategray;
color: white;
justify-content: center;
align-items: center;
}
main {
flex: 1;
}
a {
text-decoration: none;
margin: 10px;
font-size: 16px;
color: white;
border-right: 1px solid white;
flex: 1;
text-align: center;
}
a:last-of-type {
border-right: none;
}
</style>
</head>
<body>
<header>PHP中文网</header>
<main>主体</main>
<footer>
<a href="">官网首页</a>
<a href="">教学视频</a>
<a href="">工具手册</a>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex实现圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
main {
flex: 1;
display: flex;
}
aside {
background-color: lightcoral;
flex: 2;
}
article {
background-color: lightslategray;
flex: 6;
}
header , footer {
height: 50px;
background-color: lightgoldenrodyellow;
}
aside:first-of-type {
order: -1;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局实现登陆表单</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-weight:lighter;
background: linear-gradient(lightblue,white,lightblue);
}
.container {
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
width: 300px;
padding: 20px;
position: relative;
top: -60px;
}
h3 {
text-align: center;
margin-bottom: 15px;
font-weight: lighter;
color: lightslategray;
}
.container > form {
display: flex;
flex-flow: column nowrap;
box-sizing: border-box;
border: 1px solid gray;
padding: 15px;
border-radius: 10px;
background: linear-gradient(to right bottom,lightblue,white);
}
form > div {
display: flex;
margin: 10px 0;
}
input ,button{
flex: 1;
border-radius: 8px;
}
input {
margin-left: 10px;
padding-left: 6px;
border: 1px solid #888;
}
button {
background-color: lightseagreen;
height: 24px;
letter-spacing: 15px;
color: white;
border: none;
}
.container>form:hover,button:hover {
background: linear-gradient(to left top,lightblue,white);
box-shadow: 0 0 5px #888;
}
</style>
</head>
<body>
<div class="container">
<h3>管理员登陆</h3>
<form action="">
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="example@email.com">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="不能少于6位">
</div>
<div>
<button>登陆</button>
</div>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页...
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站后台首页</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
header {
height: 60px;
background-color: lightslategray;
display: flex;
align-items: center;
}
a {
text-decoration: none;
color: white;
padding: 20px;
}
nav {
flex: 6;
display: flex;
justify-content: center;
align-items: center;
}
header > div {
flex: 4;
display: flex;
justify-content: center;
align-items: center;
}
a:hover {
background: linear-gradient(lightslategray,white);
border-bottom: 1px solid black;
}
main {
margin-top: 20px;
display: flex;
background-color: #f8f9fd;
flex: 1;
}
article {
flex: 6;
display: flex;
flex-flow: column nowrap;
}
aside {
flex: 2;
display: flex;
flex-flow: column nowrap;
}
article>div:first-of-type {
flex: 2;
}
article>div:nth-of-type(2) {
flex: 1.5;
}
article>div:last-of-type {
flex: 6.5;
}
main>aside:first-of-type>div:first-of-type {
flex: 3.7;
}
main>aside:first-of-type>div:last-of-type {
flex: 6.3;
}
main>aside:last-of-type>div:first-of-type {
flex: 2;
}
main>aside:last-of-type>div:last-of-type {
flex: 8;
}
div {
box-sizing: border-box;
border: 1px solid lightslategray;
margin: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<header>
<nav>
<a href="">首页</a>
<a href="">流程</a>
<a href="">报表</a>
</nav>
<div>
<a href="">管理员</a>
</div>
</header>
<main>
<article>
<div>我的待办</div>
<div>系统</div>
<div>流程</div>
</article>
<aside>
<div>今日安排</div>
<div>日志</div>
</aside>
<aside>
<div>系统公告</div>
<div>报表</div>
</aside>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
开始的时候脑子有点乱，有点绕，逻辑有时候不清晰，缕清楚逻辑之后，更加快捷，减少代码量
笔记
