flex布局
相关学习网站：http://c.biancheng.net/css3/flex.html
1.flex是当前最主流的布局方式：用它布局起来更方便，取代了浮动的作用。
2.浮动布局有缺陷，会脱离文档流，可能会导致布局崩塌
注：用flex布局的元素成为flex容器，它里面的子元素为容器项目或flex项目
父级：容器
子级：项目
flex布局原理
就是通过两个轴，把网页分割成一行行，一列列
flex主轴：从左往右
flex副轴：从上往下
flex使用三要素
1.主轴的方向（左右水平布局/上下垂直布局）
2.主轴的对齐方式
3.副轴的对齐方式
flex使用：
display: flex;
flex-wrap: wrap;/*多行显示*/
display样式说明：
设置主轴方向（决定左右/上下）：flex-direction
row;默认属性 行 从左往右
column; 列 从上往下
row-reverse;行反转，从右往左
column-reverse;列反转，从下往上
设置主轴对齐方式：justify-content
flex-start;默认值 按照起点对齐
flex-end; 终点对齐
space-around;均分布局
space-between;两端对齐
center;居中
设置副轴对齐方向：align-items
center;居中
flex-end;靠终点
flex-start;靠起点
align-content: space-around; 副轴均分布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background-color: pink;
display: flex; /*设置弹性盒模型*/
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(28, 8, 8);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background-color: pink;
display: flex; /*设置弹性盒模型*/
/* flex-direction: column; 主轴从上往下 */
/* flex-direction: row;主轴从左往右 */
/* flex-direction: row-reverse;主轴从右往左 */
/* flex-direction: column-reverse;主轴从下往上 */
/* justify-content: flex-end;偏向箭头方向 */
/* justify-content: flex-start;偏向剑尾方向 */
/* justify-content: space-around;均匀分布 */
/* justify-content: space-between;两端对齐 */
/* align-items: center;副轴居中 */
/* align-items: flex-end;偏向副轴箭头方向 */
/* align-items: flex-start;偏向副轴剑尾方向 */
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(28, 8, 8);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
阿里图标（字体）
原理：将小图标定义成为字体，通过引入字体来展示这些小图标。因为此时的小图标相当于文字，所以支持文字对应的所有样式。（字体大小，颜色等等）
类似于我们的颜表情，它不是图片而是特殊字体。
免费将图标以字体的形式加载页面
使用步骤：
1.打开阿里图标官网：https://www.iconfont.cn/
2.注册，登录
3.选择需要的图标加入购物车
4.下载代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./Ali_icon/download/font_8k7a6w8dx2i/iconfont.css">
</head>
<body>
<span class="iconfont icon-huafei"></span>
</body>
</html>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_1</title>
<style>
.contain {
display: flex;
border: 1px solid blue;
border-radius: 5px;
width: 800px;
}
.input {
width: 630px;
border: none;
padding: 10px;
font-size: 16px;
}
.btn {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.input:focus {
outline: none;
}
.btn:hover {
background-color: darkblue;
}
.img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="contain">
<input type="text" class="input">
<img src="img/6.jpg" class="img" style="height: 40px; cursor: pointer">
<button class="btn">百度一下</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_2</title>
<style>
.main {
display: flex;
flex-direction: column;
align-items: center;
border: 2px dashed #bdbdbd;
border-radius: 8px;
width: 1000px;
}
.span {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
cursor: pointer;
position: relative;
}
.cross {
position: relative;
width: 150px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.cross:before {
content: '';
position: absolute;
background-color: #ccc;
top: 50%;
left: 0;
width: 100%;
height: 1px;
}
.cross:after {
content: '';
position: absolute;
background-color: #ccc;
top: 0;
left: 50%;
width: 1px;
height: 100%;
}
.btn {
background-color: blue;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
position: relative;
top: 70px;
}
.btn:hover {
background-color: #0000bb;
}
</style>
</head>
<body>
<div class="main">
<input type="file" id="file-upload" class="input" hidden>
<span for="file-upload" class="span">
<div class="cross"></div>
</span>
<button class="btn">选择文件</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_3</title>
<style>
.search {
width: 800px;
display: flex;
align-items: center;
border: 2px solid orange;
border-radius: 4px;
background-color: #fff;
}
.drop-btn {
background-color: #ffffff;
color: #919191;
font-size: 16px;
border: none;
cursor: pointer;
}
.content {
display: none;
position: absolute;
background-color: #f9f9f9;
}
.content a {
color: #7c7c7c;
padding: 12px 16px;
display: block;
}
.dropdown:hover .content {
display: block;
}
.input {
flex-grow: 1;
border: none;
padding: 10px;
}
.btn {
background-color: orange;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
padding: 10px 20px;
cursor: pointer;
}
.input:focus {
outline: none;
}
.btn:hover {
background-color: darkorange;
}
</style>
</head>
<body>
<div class="search">
<div class="dropdown">
<button class="drop-btn">宝贝</button>
<div class="content">
<a href="#" style="text-decoration:none">图片</a>
<a href="#" style="text-decoration:none">视频</a>
</div>
</div>
<input type="text" class="input" placeholder="手机壳">
<button class="btn">搜索</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_4</title>
<style>
.fixed {
position: fixed;
top: 0;
left: 0;
width: 85px;
background-color: #f6f8f9;
color: black;
border-right: 2px solid gray;
border-radius: 10px;
text-align: center;
}
.menu {
padding: 10px;
display: block;
}
.icon {
width: 40px;
display: flex;
position: relative;
left: 10px;
}
</style>
</head>
<body>
<div class="fixed">
<div class="menu"><img src="img/5.jpg" class="icon">联系客服</div>
<div class="menu"><img src="img/5.jpg" class="icon">购物车</div>
<div class="menu"><img src="img/5.jpg" class="icon">官方客服</div>
<div class="menu"><img src="img/5.jpg" class="icon">反馈</div>
<div class="menu"><img src="img/5.jpg" class="icon">举报</div>
<div class="menu"><img src="img/5.jpg" class="icon">回顶部</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_5</title>
<style>
.image-slider {
position: relative;
width: 300px;
height: 500px;
margin: 50px auto;
border-radius: 10px;
overflow: hidden;
}
.image-container img {
width: 300px;
height: 500px;
display: block;
}
.indicators {
position: absolute;
bottom: 15px;
left: 40%;
display: flex;
}
.indicator {
height: 10px;
width: 10px;
background: #ddd;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.indicator.active {
background: orange;
}
</style>
</head>
<body>
<div class="image-slider">
<div class="image-container">
<img src="./img/7.jpg" alt="image"/>
</div>
<div class="indicators">
<span class="indicator active"></span>
<span class="indicator"></span>
<span class="indicator"></span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_6</title>
<style>
.element {
border-radius: 10px;
padding: 20px;
}
.product-list {
padding: 0;
margin: 0;
display: flex;
gap: 100px;
}
.product {
display: flex;
width: 300px;
}
.image {
width: 120px;
height: 120px;
margin-bottom: 8px;
background: url("./img/4.jpg");
}
.name {
display: flex;
position: relative;
left: 30px;
top: 15px;
font-size: 20px;
}
.price {
display: flex;
position: relative;
left: -60px;
top: 80px;
font-size: 20px;
position: relative;
color: #FF6200;
font-size: 25px;
}
h3 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="display: flex">
<div class="element" style="background-color: #FDEEE9;">
<h3>淘工厂 · 良心工厂货</h3>
<ul class="product-list">
<li class="product">
<div class="image"></div>
<div class="name">商品名称1</div>
<div class="price"><b>¥ 6.05</b></div>
</li>
<li class="product">
<div class="image"></div>
<div class="name">商品名称2</div>
<div class="price"><b>¥ 13.5</b></div>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_7</title>
<style>
.poster {
width: 450px;
height: 600px;
margin: 0 auto;
background-image: url('./img/2.png');
}
.header-cell {
width: 150px;
background-color: #dc1d1d;
color: #FFF;
text-align: center;
font-size: 20px;
padding: 10px;
border: 0px;
border-radius: 30px;
position: relative;
top: -20px;
}
td {
width: 200px;
text-align: center;
}
.link {
width: 100px;
height: 30px;
display: inline-block;
padding: 10px 20px;
background-color: #FFF;
border: 1px solid #ff7d7d;
color: #ff4a4a;
border-radius: 4px;
text-decoration: none;
}
.link:hover {
background: #bdbdbd;
}
.content {
position: relative;
top: -50px;
}
.content-left {
position: relative;
left: 30px;
}
.content-right {
position: relative;
left: -30px;
}
</style>
</head>
<body>
<table class="poster">
<tr>
<td colspan="2"><button class="header-cell">精选热点</button></td>
</tr>
<tr class="content">
<td class="content-left"><a href="#link1" class="link">热点商品1</a></td>
<td class="content-right"><a href="#link2" class="link">热点商品2</a></td>
</tr>
<tr class="content">
<td class="content-left"><a href="#link3" class="link">热点商品3</a></td>
<td class="content-right"><a href="#link4" class="link">热点商品4</a></td>
</tr>
<tr class="content">
<td class="content-left"><a href="#link5" class="link">热点商品5</a></td>
<td class="content-right"><a href="#link6" class="link">热点商品6</a></td>
</tr>
<tr class="content">
<td class="content-left"><a href="#link7" class="link">热点商品7</a></td>
<td class="content-right"><a href="#link8" class="link">热点商品8</a></td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_8</title>
<style>
a {
text-decoration: none;
}
#background {
width: 650px;
height: 830px;
background-color: #f1f1f1;
}
.element {
width: 630px;
height: 180px;
margin: 10px;
background-color: white;
border-radius: 6px;
position: relative;
top: 10px;
}
.acount {
width: 200px;
height: 180px;
display: inline-block;
}
#img {
width: 70px;
height: 70px;
border-radius: 100%;
align-items: center;
}
.plus {
width: 200px;
height: 160px;
display: inline-block;
background-color: #fede8b;
border-radius: 8px;
border: 1px solid gold;
position: relative;
top: -10px;
}
.vip {
width: 200px;
height: 160px;
display: inline-block;
background-color: #cddcfe;
border-radius: 8px;
border: 1px solid #79c9ff;
position: relative;
top: -10px;
}
.kill {
width: 150px;
height: 160px;
display: inline-block;
background-color: #fef0f0;
border-radius: 8px;
border: 1px solid #ffe0e0;
position: relative;
left: 10px;
}
.shop {
width: 110px;
height: 110px;
display: inline-block;
position: relative;
top: 10px;
padding: 0px 20px;
}
.price {
font-size: 20px;
color: #f92a45;
}
.icon {
width: 80px;
height: 80px;
display: inline-block;
}
#end {
height: 240px;
}
</style>
</head>
<body>
<div id="background">
<div class="element">
<div class="acount">
<table style="text-align: center; width: 180px; height: 150px">
<tr>
<td><img src="img/1.jpg" id="img"></td>
</tr>
<tr>
<td>Hi, <span style="color: brown">xxx的号</span></td>
</tr>
<tr>
<td><a href="#">退出</a></td>
</tr>
</table>
</div>
<div class="plus">
<table style="text-align: left; width: 180px; height: 150px">
<tr>
<td style="color: #663323; font-size: 25px"><b>Plus会员</b></td>
</tr>
<tr>
<td style="color: #be9656; font-size: 22px">专享立减</td>
</tr>
<tr>
<td><a href="#" style="color: #663323; font-size: 18px">立即开通 ></a></td>
</tr>
</table>
</div>
<div class="vip">
<table style="text-align: left; width: 180px; height: 150px">
<tr>
<td style="color: #05417f; font-size: 25px"><b>企业会员</b></td>
</tr>
<tr>
<td style="color: #3d72ac; font-size: 22px">新客补贴3000元</td>
</tr>
<tr>
<td><a href="#" style="color: #05417f; font-size: 18px">立即开通 ></a></td>
</tr>
</table>
</div>
</div>
<div class="element">
<div class="kill"><img src="img/8.jpg" style="width: 150px;"></div>
<table style="display: inline-block">
<tr>
<td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
<td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
<td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
</tr>
<tr style="position: relative; top: 20px; text-align: center">
<td class="price"><b>￥25.5</b></td>
<td class="price"><b>￥884</b></td>
<td class="price"><b>￥1999</b></td>
</tr>
</table>
</div>
<div class="element">
<div class="kill"><img src="img/10.jpg" style="width: 150px;"></div>
<table style="display: inline-block">
<tr>
<td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
<td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
<td><a href="#"><img src="img/9.jpg" class="shop"></a></td>
</tr>
<tr style="position: relative; top: 20px; text-align: center">
<td class="price"><b>￥25.5</b></td>
<td class="price"><b>￥884</b></td>
<td class="price"><b>￥1999</b></td>
</tr>
</table>
</div>
<div class="element" id="end">
<table style="width: 650px;">
<tr style="text-align: center">
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td><a href="#"><img src="./img/11.jpg"></a></td>
</tr>
<tr style="text-align: center">
<td><a href="#">礼品卡</a></td>
<td><a href="#">加油卡</a></td>
<td><a href="#">话费</a></td>
<td><a href="#">游戏</a></td>
<td><a href="#">酒店</a></td>
</tr>
<tr style="text-align: center">
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td><a href="#"><img src="./img/11.jpg"></a></td>
<td></td>
<td></td>
</tr>
<tr style="text-align: center">
<td><a href="#">云建站</a></td>
<td><a href="#">五金城</a></td>
<td><a href="#">plus会员</a></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css1</title>
<style>
@keyframes roll {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body {
background-color: #999;
}
.box {
width: 0px;
height: 300px;
border-left: 150px solid black;
border-right: 150px solid white;
border-radius: 50%;
position: relative;
animation: roll 4s linear infinite;
box-shadow: 0 0 8px 2px rgba(0, 255, 255, 0.8),
0 0 10px 6px rgba(255, 0, 255, 0.8),
0 0 12px 8px rgba(0, 255, 0, 0.8);
}
.box::before {
content: "";
display: block;
width: 50px;
height: 50px;
border: 50px solid black;
background-color: white;
border-radius: 50%;
position: absolute;
left: -75px;
}
.box::after {
content: "";
display: block;
width: 50px;
height: 50px;
border: 50px solid white;
background-color: black;
border-radius: 50%;
position: absolute;
left: -75px;
top: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css2</title>
<style>
body {
background-color: black;
height: 100px;
margin: 100px;
}
.button {
position: relative;
padding: 12px 36px;
margin: 10px;
color: #5dec98;
text-decoration: none;
transition: 0.25s;
overflow: hidden;
}
.button:hover {
background-color: #2ecc71;
box-shadow: 0 0 15px #2ecc71, 0 0 20px #4dec91;
border-color: #2ecc71;
}
.button::before, .button::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background: #fff;
transition: 0.5s;
}
.button::before {
top: 0;
left: -2px;
}
.button::after {
bottom: 0;
right: -2px;
}
.button span::before, .button span::after {
content: '';
position: absolute;
width: 2px;
height: 20px;
background: #fff;
transition: 0.25s;
}
.button span::before {
top: -2px;
right: 0;
}
.button span::after {
bottom: -2px;
left: 0;
}
.button:hover::before, .button:hover::after {
width: 100%;
transition-delay: 0.25s;
}
.button:hover::after{
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 30px;
background: linear-gradient(rgba(55, 218, 31, 0.68), transparent);
opacity: 0.5;
}
.button:hover span::before, .button:hover span::after {
height: 100%;
}
</style>
</head>
<body>
<a class="button" href="#">点赞<span></span></a>
</body>
</html>
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
