目录
字体图标矢量图
-
阿里图标库
-
登录
-
创建项目
-
查找图标并加入购物车
-
将购物车的图标添加到项目中
-
下载并浏览效果(html)
-
引用css
-
添加图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="iconfonts/iconfont.css" />
</head>
<body>
<h1>阿里服务器字体</h1>
<ol>
<li>第1步：注册账号并登录</li>
<li>第2步：创建项目</li>
<li>第3步：查找图标并添加到购物车</li>
<li>第4步：将购物车中的图标添加到项目中</li>
<li>第5步：进入购物车下载到本地</li>
<li>第6步：解压并复制css+字体文件到项目中</li>
<li>第7步：导入css文件</li>
<li>第8步：使用i标签引入类样式</li>
</ol>
<hr />
<button><i class="iconfont icon-shouji"></i> 按钮</button>
<a href="#"> <i class="iconfont icon-shoucang"></i> 链接 </a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="awesome/css/font-awesome.min.css" />
<style>
button {
color: blue;
}
a {
color: red;
}
i {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>服务器字体图标的用法</h1>
<ol>
<li>第1步：下载图标库 (1个css文件+多个字体文件)</li>
<li>第2步：复制项目下(建个文件夹)</li>
<li>第3步：导入css文件</li>
<li>第4步：通过i标签添加类样式</li>
</ol>
<hr />
<button><i class="fa fa-address-book"></i> 按钮</button>
<a href="#"> <i class="fa fa-grav"></i> 链接</a>
</body>
</html>
四、弹性布局
-
浮动布局特点
-
优点 兼容性
-
缺点 ： 清除浮动，水平居中，元素底部对齐
-
-
弹性布局
-
flex布局，解决页面整体布局和局部布局
-
特点
-
优点，简洁方便
-
不足，部分浏览兼容性（IE）
-
-
用法
-
父元素
-
display:flex
-
flex-wrap: wrap
-
flex-direction：方向，决定主轴和辅粙
-
row : 水平方向为主轴，垂直方向为辅轴(默认)
-
column：垂直方向为主轴，水平方向为辅轴
-
-
justify-content: 主轴对齐方式,默认水平方向为主
-
align-items: 辅轴对齐方式
-
-
子元素
-
flex
-
水平或垂直平均分配
-
取值: flex:整数(份数)
-
-
width+flex
-
一边固定 ，一边自适应
-
先渲染带有width的元素，剩下给flex元素
-
-
width
-
水平排列并换行
-
-
align-self
-
子元素辅轴的对齐方式
-
覆盖父元素align-items的值
-
-
-
-
主轴与辅轴的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.panel {
width: 667px;
height: 375px;
background-color: #e0e0e0;
display: flex;
/* 水平为主，垂直为辅 */
flex-direction: row;
}
.panel-left {
flex: 1;
background-color: #369;
}
.panel-right {
width: 60px;
background-color: #963;
}
.box {
width: 375px;
height: 667px;
background-color: #e0e0e0;
display: flex;
/* 垂直为主，水平为辅 */
flex-direction: column;
}
.box-top {
flex: 1;
background-color: #369;
}
.box-bottom {
height: 60px;
background-color: #936;
}
</style>
</head>
<body>
<!-- 水平 -->
<div class="panel">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
<hr />
<!-- 垂直 -->
<div class="box">
<div class="box-top"></div>
<div class="box-bottom"></div>
</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>Document</title>
<style>
.box {
width: 400px;
height: 400px;
background-color: #e0e0e0;
margin: auto;
display: flex;
/* 水平为主，垂直为辅 */
flex-direction: row;
/* 主轴对齐方式: 水平 */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-evenly;
/* 辅轴对齐: 垂直 */
/* align-items: center; */
}
.box-a {
width: 100px;
height: 100px;
background-color: #935;
}
.box-b {
width: 100px;
height: 100px;
background-color: #395;
}
</style>
</head>
<body>
<div class="box">
<div class="box-a"></div>
<div class="box-b"></div>
</div>
</body>
</html>
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
