设置弹性元素的增长因子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置弹性元素的增长因子</title> <link rel="stylesheet" href="css/style1.css"> </head> <body> <h1>flex-grow: 设置弹性元素增长因子</h1> <h3>(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(2): 将全部剩余空间分配给指定弹性元素,例如: 第2个</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(3): 全部剩余空间按增长因子在不同弹性元素间分配</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(4): 增长因子支持小数, 因为是按增长比例分配</h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(5): 每个弹性元素宽度不同时, 同样适用以上分配规律</h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
设置弹性元素的伸缩因子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置弹性元素的缩减因子</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <h1>flex-shrink: 设置弹性元素缩减因子</h1> <h3>(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(3): 三个元素的缩减因子不相等时</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(4): 三个元素的缩减因子不相等时,同时是小数还必须大于0</h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(5): 当每个弹性元素宽度不一样时, 完全是另一道风景线</h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
设置弹性元素的基准尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置弹性元素的基准尺寸</title> <link rel="stylesheet" href="css/style3.css"> </head> <body> <h1>flex-basis: 设置弹性元素的基准尺寸</h1> <h3>(1): 在未设置弹性元素宽度时, 以内容宽度显示</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(2): 存在自定义元素宽度时,则以该宽度显示</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(3): 自动状态下, 由浏览器根据预设值自行判定</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(4): 当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(5): 元素基准宽度支持百分比设置 </h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
设置弹性元素的基准尺寸
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简化弹性元素的基本设置</title> <link rel="stylesheet" href="css/style4.css" </head> <body> <h3>(1): 根据宽度计算,允许缩减适应容器</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(2): 根据宽度计算,元素完全弹性以适应容器</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(3): 元素完全失去弹性, 以原始大小呈现</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(4): 一个数值表示增长因子,其它值默认: flex: 1 1 auto</h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(5): 第三个有具体数值时, 以它为计算标准</h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>(6): 单独设置某一个元素弹性大小 </h3> <div class="container flex demo6"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
试着自己先模仿一些现成网站首页或某个页面(选做)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php中文网</title>
<style>
body{
background-color: whitesmoke;
}
nav>a{
text-decoration-line: none;
color: #9f9f9f;
padding: 0 20px;
}
nav{
display: flex;
height: 60px;
background-color: black;
justify-content: center;
align-items: center;
}
nav>a:hover{
color: white;
}
footer{
text-align: center;
height: 100px;
background-color: #cdd4e4;
}
aside{
margin: 15px 0 0 10px;
display: flex;
flex-flow: column;
width: 200px;
height: 500px;
text-align: center;
background-color: #2b333b;
border-radius: 6px 0 0 6px;
justify-content: space-between;
}
aside>a{
text-decoration-line: none;
color: #9f9f9f;
font-size: 20px;
}
main{
display: flex;
}
article{
width: 80%;
}
.section1{
display: flex;
margin: 20px;
justify-content: space-between;
}
.section1>a{
text-decoration-line: none;
color: black;
}
.section1>input{
background-color: #e3e3e3;
border: none;
border-radius: 3px;
height: 30px;
}
</style>
</head>
<body>
<header>
<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>
</nav>
</header>
<main>
<aside>
<a href="">PHP开发</a>
<a href="">前端开发</a>
<a href="">服务器开发</a>
<a href="">移动开发</a>
<a href="">数据库</a>
<a href="">服务器运维</a>
<a href="">在线工具箱</a>
<a href="">常用类库</a>
</aside>
<article>
<section class="section1">
<a href="">PHP头条</a>
<a href="">独孤九剑</a>
<a href="">学习路线</a>
<a href="">在线工具</a>
<a href="">趣味课堂</a>
<a href="">社区问答</a>
<a href="">课程直播</a>
<input type="text" placeholder="输入关键字搜索" >
</section>
<img src="1.jpg">
<img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
</article>
</main>
<footer >
<p >Copyright © 2018-2021 公司所有权利</p>
</footer>
</body>
</html>
手写作业
