HTML+CSS-学习笔记源码：
链接：
https://pan.baidu.com/s/1PRorRSlAW0PSHM4grOoapg
提取码：fnr2
四、浮动(float)
1、浮动的简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 400px;
height: 200px;
background-color: #bfa;
float: left;
}
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
通过 float 属性来设置元素的浮动
可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意，元素设置浮动以后，水平布局的等式便不需要轻质成立。
元素设置浮动之后，会从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1. 浮动元素会完全脱离文档流，不再占用文档流中的位置
2. 设置浮动以后，元素会向父元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，不会超过他前边的浮动元素
5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6. 浮动元素不会超过它上边的浮动的兄弟元素，最多就是就是和它一样高
简单总结：
浮动目前来讲他的主要作用就是让页面中的元素可以水平排列
通过浮动可以制作一些水平方向的布局。
*/
.box2{
width: 400px;
height: 200px;
background-color: orange;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2、浮动的其他特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
/*
浮动元素不会盖住文字，文字会自动环绕在元素周围，
所以可以利用浮动来设置文字环绕图片的效果
*/
}
.box2 {
/*width: 200px;*/
/*height: 200px;*/
background-color: orange;
float: left;
/*
元素设置浮动之后，元素从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流的特点
块元素：
1. 块元素不再独占页面一行
2. 脱离文档流之后，块元素的宽度和高度默认都被内容撑开
行内元素：
1. 行内元素脱离文档流之后会变成块元素，特点和块元素一样
脱离文档流以后，就不需要在区分块和行内了
*/
}
.box3{
background-color: yellow;
}
.s1{
width: 100px;
height: 100px;
background-color: #c81623;
float: left;
}
</style>
</head>
<body>
<!--<div class="box1"></div>-->
<!--<div class="box2">Hello</div>-->
<!--<div class="box3">Hello</div>-->
<span class="s1">我是一个SPAN</span>
<!--<p>-->
<!-- 鲁迅-->
<!-- 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地眨着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。-->
<!-- 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。-->
<!-- 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了，他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼-->
<!-- 眼；直刺着天空中圆满的月亮，使月亮窘得发白。-->
<!-- 鬼眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地-->
<!-- 着许多蛊惑的眼睛。-->
<!-- 哇的一声，夜游的恶鸟飞过了。-->
<!-- 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也立即被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。-->
<!-- 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得了丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。-->
<!-- 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……。我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。-->
<!-- 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。-->
<!-- 一九二四年九月十五日-->
<!--</p>-->
</body>
</html>
3、网页的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header, main, footer {
width: 1000px;
margin: 0 auto;
}
/* 设置头部 */
header {
height: 150px;
background-color: silver;
}
/* 设置主体 */
main {
height: 600px;
background-color: #bfa;
margin: 10px auto;
}
/*设置浮动*/
nav,article,aside{
float: left;
height: 100%;
}
/*设置左侧导航*/
nav{
width: 200px;
background-color: yellow;
}
/*设置中间的内容*/
article{
width: 580px;
background-color: orange;
margin: 0 10px;
}
/*设置右侧的内容*/
aside{
width: 200px;
background-color: pink;
}
/* 设置底部 */
footer {
height: 150px;
background-color: tomato;
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header class=""></header>
<!--创建网页的主体 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间的内容 -->
<article></article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!--创建网页的底部-->
<footer></footer>
</body>
</html>
4、高度塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
border: 10px red solid;
/*height: 100px;*/
/*
BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中隐含的属性，可以为一个元素开启BFC，
开启BFC之后，该元素会变成一个独立的布局区域
- 元素开启BFC的特点：
1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素子元素和父元素的外边距不会重叠
3. 开启BFC的元素可以包含浮动的子元素
4.
- 可以通过一些特殊方式开启元素的BFC：
1. 设置元素的浮动(不推荐）
2. 将元素设置为行内块元素（不推荐）
3. 将元素的overflow设置为一个非visible的值
- 常用方式 为元素设置 overflow：hidden 开启BFC以使其可以包含浮动元素
*/
/*float: left;*/
/*display: inline-block;*/
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
background-color: #bfa;
/*
高度塌陷
在浮动布局中，父元素的高度默认是被主要是撑开的，当子元素浮动后，其会完全脱离文档流
子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素高度丢失。
父元素高度丢失之后，其下的元素会自动上移，导致页面混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
*/
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div style="width: 200px;height: 200px;background-color: orange;"></div>
</body>
</html>
5、BFC演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: hidden;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
/*overflow: hidden;*/
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<!--<div class="box2"></div>-->
</body>
</html>
6、clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
font-size: 50px;
float: left;
}
/*
由于box1的浮动，导致box3的上移，也就是box3受到了浮动的影响，位置发生了改变
不希望某个元素因为其他元素浮动的影响而改变位置，则可以使用clear属性来清除浮动元素对当前元素的
影响。
clear：
- 作用，清除浮动元素的对当前元素的影响
- 可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
- 原理：
设置清除浮动以后，浏览器会自动添加一个外边距，以使其位置不受其他元素的影响
*/
.box2{
width: 100px;
height: 100px;
background-color: tomato;
font-size: 50px;
float: right;
}
.box3{
width: 200px;
height: 200px;
font-size: 50px;
background-color: orange;
clear: both;
}
</style>
</head>
<body>
<div class="box1">BOX1</div>
<div class="box2">BOX2</div>
<div class="box3">BOX3</div>
</body>
</html>
7、高度塌陷的最终解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
border: 10px red solid;
/*overflow: hidden;*/
}
.box2{
width: 200px;
height: 300px;
background-color: #bfa;
float: left;
}
/**/
.box1::after{
/*contenxt必须要写，内容可以为空*/
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3"></div>-->
</div>
</body>
</html>
8、clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/*overflow: hidden;*/
}
/*.box1::before {*/
/* content: '';*/
/* display: table;*/
/*}*/
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
/*
clearfix可以同时解决高度塌陷和外边距重叠的问题，当你遇到这些问题是可以直接使用
clearfix这个类即可
*/
.clearfix::before,
.clearfix::after {
content: '';
/*解决外边距重叠问题*/
display: table;
/*解决高度塌陷问题*/
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
五、位置（postion）
1、定位的简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1, .box2, .box3 {
font-size: 50px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
/*
定位（postion）
- 定位是一种更加高级的布局手段
- 通过定位可以将元素放到页面的任意位置
- 使用postion属性来设置定位
可选值：
static 默认值 元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
stick 开启元素的粘滞定位
- 相对定位
- 当元素的postion属性值设置为relative时则开启了相对定位
- 相对定位的特点：
1. 元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化
2. 相对定位是参照与元素在文档流中的位置进行定位的
3. 相对定位会提升元素的层级
4. 相对定位不会时元素脱离文档流
5. 相对定位不会改变元素的性质，块还是块，行内还是行内
- 偏移量（offset）
- 当元素开启定位以后，可以通过偏移量来设置元素的位置
top
- 定位元素和定位位置上边的距离
bottom
- 定位元素和定位位置下边的距离
- 定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中之一
- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
left
- 定位元素和定位位置左边的距离
right
- 定位元素和定位位置和右边的距离
- 定位元素水平方向的位置由left和right两个属性来控制
通常情况下我们只会使用其中之一
- left值越大，定位元素越靠右
- right值越大，定位元素越靠左
*/
position: relative;
left: 200px;
top: -200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
/*margin-top: 200px;*/
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
2、绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-size: 50px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
/*
绝对定位
- 当元素的postion属性设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点
1. 开启绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2. 开启绝对定位以后，元素从文档流中脱离
3. 绝对定位会改变元素的性质，脱离文档流。行内变成块，块的高度被内容撑开
4. 绝对定位会使元素提升一个层级
5. 绝对定位元素是相对于其包含块进行定位的
6.
包含块（container block）：
- 正常情况下
包含块就是离当前元素最近的祖先块元素
<div> <div></div> </div>
<div> <span><em>hello</em></span> </div>
- 绝对定位的包含块：
包含块就是理他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则相对于根元素进行定位，则根元素就是它的包含块
- html（根元素，初始包含块）
-
*/
position: absolute;
/*left: 0px;*/
/*top: 0px;*/
bottom: 0;
right: 0;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
/*margin-top: 200px;*/
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color: white;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
3、固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-size: 50px;
height: 2000px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
/*
固定定位
- 将元素的postion属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分定位都喝绝对定位一样
唯一不同的是固定定位永远参考于浏览器的视口进行定位
固定定位的元素不会随网页的滚动而滚动
*/
position: fixed;
left: 0;
top: 0;
/*bottom: 0;*/
/*right: 0;*/
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
/*margin-top: 200px;*/
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
/*position: relative;*/
}
.box5{
width: 300px;
height: 300px;
background-color: white;
/*position: relative;*/
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
4、粘滞定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
body {
background-color: #bfa;
height: 3000px;
}
/*设置nav的大小*/
.nav {
/*设置宽度高度*/
width: 1210px;
height: 48px;
/*设置背景颜色*/
background-color: #E8E7E3;
margin: 100px auto;
position: sticky;
top: 10px;
/*
粘滞定位
- 当元素的postion属性设置为sticky时，则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致，不同的是，粘滞定位在元素到达某个位置时将其固定住
*/
}
/* 设置nav中的li */
.nav li {
/*设置li向左浮动，以使菜单横向移动*/
float: left;
/*设置li的高度*/
/*height: 48px;*/
/*将文字在父元素中垂直居中*/
line-height: 48px;
/*background-color: red;*/
}
/* 设置a标签*/
.nav a{
/*将a转换为块元素*/
display: block;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
color: #777;
/*字体大小*/
font-size: 18px;
padding: 0 39px;
}
.nav li:last-child a{
padding: 0 46px 0 46px;
}
/*设置鼠标移入的效果*/
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
</style>
</head>
<body>
<!--创建导航条的结构-->
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Brower Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
5、京东轮播图练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图练习</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
/*
设置图片的容器
*/
.img-list {
width: 590px;
height: 470px;
margin: 100px auto;
/*为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位，而不是相对于初始包含块（html）去定位*/
position: relative;
}
/*设置li*/
.img-list li {
position: absolute;
}
/* 修改元素的层级来显示指定的图片 */
.img-list li:nth-child(1) {
z-index: 1;
}
.pointer{
position: absolute;
z-index: 9999;
bottom: 20px;
left: 40px;
}
/* 设置导航点的样式 */
.pointer a{
/*设置元素向左浮动*/
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 2px;
background-color: rgba(255,255,255,.3);
/*将背景颜色设置到内容区，边框和内边距不再显示背景颜色*/
background-clip: content-box;
border: 2px solid transparent;
}
.pointer a.active,
.pointer a:hover{
background-color: #FFF;
border: 2px solid rgba(255,255,255,.3);
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="javascript:"><img src="../img/05/1.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/2.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/3.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/4.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/5.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/6.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/7.jpg" alt=""></a></li>
<li><a href="javascript:"><img src="../img/05/8.jpg" alt=""></a></li>
<div class="pointer">
<a class="active" href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
</div>
</ul>
</body>
</html>
6、绝对定位元素的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
/*margin-left: auto;*/
/*margin-right: auto;*/
/*margin-top: auto;*/
/*margin-bottom: auto;*/
margin: auto;
/*
水平布局：
left + margin-left + border-left + padding-left + width + padding-right +
border-eight + margin-right + right = 包含块内容区的宽度
- 当我们开启绝对定位以后：
水平方向的布局等式就需要添加left 和 right 两个值
此时规则和之前一样，只是多添加了两个值
当发生过度约束值
如果 9 个值当中没有 auto 则自动调整right值，以使等式满足
如果有auto则自动调整auto的值以使等式满足
- 可以设置auto的值
margin width left right
- 因为left 和 right 的值是auto，所以如果不知道left 和 right ，则等式不满足时，会自动调整这两个值
垂直方向布局的等式也必须要满足
top/bottom + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
*/
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<!--<div class="box4">4-->
<!-- <div class="box5">-->
<!-- 5-->
<!-- </div>-->
<!--</div>-->
<!--<div class="box3">3</div>-->
</body>
</html>
7、元素的层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1, .box2, .box3 {
font-size: 50px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
position: absolute;
z-index: 1;
}
/*
对于开启了定位的元素，可以通过z-index来指定元素的层级
z-index需要一个证书作为参数，值越大层级越高，
元素的层级越高，越优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先元素的层级再高也不会盖住后代元素
*/
.box2 {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,.3);
/*
*/
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
/*z-index: 1;*/
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">
3
<div class="box4">4</div>
</div>
</body>
</html>
六、font&backgroud
1、字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
font-face 可以将服务器的字体，直接提供给用户去使用
问题：
1. 加载速度
2. 版权问题
3. 字体格式
*/
@font-face {
/*指定字体的名字*/
font-family: myfont;
/*
服务器上字体的路径
*/
src: url("../css/font/ZCOOLKuaiLe-Regular.ttf") format("truetype");
}
p {
/*
字体相关的样式
color 字体颜色
font-size 字体大小
font-size相关的单位
em 相当于当前元素的一个font-size
rem 相当于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：
serif 表示的衬线字体
sans-serif 非chenxianzit
monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
fantasy 虚幻字体
cursize 草书字体
- font-family 可以同时指定多个字体，多给字体用逗号（,）隔开，
字体生效时优先使用第一个，第一个无法使用，则使用第二个，以此类推
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
*/
color: blueviolet;
font-size: 30px;
font-family: myfont, Courier, monospace;
}
</style>
</head>
<body>
<p>
今天天气真不错，Hello Hello How are you！！！
</p>
</body>
</html>
2、图标字体简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fontawesome/css/all.css">
<style>
.fa-bell {
font-size: 50px;
color: red;
}
.fa-frog{
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<!--
图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入
但是图片本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
图标字体库
https://www.iconfont.cn/
fontawesome使用步骤：
1. 下载 https://fontawesome.com/download
2. 解压缩
3. 将css和webfonts移动到项目中
4. 将all.css引入到网页中
5. 使用图标字体
- 直接使用类名来使用图标字体
class="fas fa-bell
class="fab fa-accessible-icon
-->
<i class="fas fa-bell"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-frog"></i>
</body>
</html>
3、图标字体的其他使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fontawesome/css/all.css">
<style>
ul li::before {
/*content: '\f005';*/
content: '\f368';
font-family: 'Font Awesome 6 Brands',sans-serif;
/*font-family: 'Font Awesome 6 Free', serif;*/
/*font-weight: 900;*/
color: red;
margin-right: 10px;
}
/*
通过伪元素来设置图标
1. 找到要设置图标的元素，通过before或after选中
2. 在context中设置字体的编码
3. 设置字体的样式
fab
font-family: 'Font Awesome 6 Brands';
fas
font-family: 'Font Awesome 6 Free', serif;
font-weight: 900;
*/
</style>
</head>
<body>
<!--<i class="fas fa-cat"></i>-->
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
通过实体来使用图标字体
&#x图标编码;
-->
<span class="fas"></span>
</body>
</html>
4、阿里的iconfont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/iconfont/iconfont.css">
<style>
i.iconfont{
font-size: 100px;
}
p::before{
content: '\e625';
font-family: iconfont,serif;
font-size: 50px;
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont icon-a-xiala2"></i>
<p>Hello</p>
</body>
</html>
5、行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-size: 50px;
/*可以将行高设置为何高度一样的值，使单行文字在元素中垂直居中*/
line-height: 200px;
/*height: 200px;*/
/*
行高（line-height）
- 行高指的是文字占有的实际高度
- 可以通过line-height来设置行高
行高可以直接指定一个大小（px，em）
也可以直接对行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
- 行高经常还用来设置文字的行间距
行间距 = 行高 -字体大小
字体框
- 设置字体框就是字体存在的格子，设置font-size实际就是在设置字体框的高度
行高会在字体框的上下自动分配
*/
border: 1px red solid;
}
</style>
</head>
<body>
<div>
今天天气真不错！！！Hello Hello
今天天气真不错！！！Hello Hello
今天天气真不错！！！Hello Hello
</div>
</body>
</html>
6、字体的简写属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px red solid;
/*font-size: 50px;*/
/*font-family: "Times New Roman",Times,serif;*/
/*font: bold italic 50px/2 "Times New Roman", Times, serif;*/
font: normal normal bold italic 50px/2 "Times New Roman", Times, serif;
/*line-height: 2;*/
/*
font 可以设置字体相关的所有属性
语法
font: 字体大小/行高 字体族
行高省略不写 如果不写会使用默认值
*/
/*font-size: 50px;*/
/*
font-weight 字重 字体的加粗
可选值：
normal 默认值 不加粗
bold 加粗
100-900 九个级别（没什么用）
font-style
可选值：
normal 正常的
italic 斜体
*/
/*font-weight: bold;*/
/*font-weight: 900;*/
/*font-style: italic;*/
}
</style>
</head>
<body>
<div>
今天天气真不错！！！Hello Hello
<!-- 今天天气真不错！！！Hello Hello-->
<!-- 今天天气真不错！！！Hello Hello-->
</div>
</body>
</html>
7、文本的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
border: 1PX red solid;
/*
text-aligin 文本的水平对齐
可选值：
left 左侧对齐
right 右侧对齐
center 居中对齐
justify 两端对齐
*/
text-align: justify;
font-size: 50px;
}
span {
font-size: 20px;
border: 1px blue solid;
/*
vertical-aligin 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
*/
vertical-align: 100px;
}
p{
border: 1px red solid;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>今天天气 Hellox<span>真不错 Hello</span>！</div>
<!--<div>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur eos excepturi facilis illum iure-->
<!-- laudantium maiores quasi sapiente soluta! Aperiam blanditiis distinctio ex odit placeat, sint tempora totam veniam?-->
<!--</div>-->
<p><img src="../img/1.jpg" alt=""></p>
</body>
</html>
8、文本的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
font-size: 50px;
/*
text-decoration 设置文本样式
可选值：
none 默认值
underline 下划线
line-through 删除线
overline 上划线
*/
/*text-decoration: line-through;*/
/*text-decoration: underline red dotted;*/
}
.box2{
/*
white-space 设置网页如何处理空白
可选值：
normal 正常
nowarp 不换行
pre 保留空白
*/
/*设置宽度*/
width: 200px;
/*设置宽度*/
white-space: nowrap;
/*溢出隐藏*/
overflow: hidden;
/*文本溢出*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">
今天天气真不错！
</div>
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque aut blanditiis commodi dolores eum illo
impedit ipsa ipsam magnam maiores perspiciatis placeat quisquam rerum sed, sit temporibus totam veniam!
aaa
ddd
eee
</div>
</body>
</html>
练习-06_京东顶部导航条-结构-样式-下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="../css/reset.css">
<!-- 引用图标字体 -->
<link rel="stylesheet" href="../css/fontawesome/css/all.css">
<style>
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
body {
/*设置字体*/
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
/* 设置外部容器的样式 */
.top-bar-wapper {
/*设置宽度*/
width: 100%;
/*设置行高，没有设置高度，是文字垂直居中*/
line-height: 30px;
height: 30px;
/*设置下边框*/
border-bottom: 1px #DDD solid;
/*设置背景颜色*/
background-color: #E3E4E5;
}
/* 设置内部容器 */
.top-bar {
/*固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
position: relative;
}
/* 设置字体颜色 */
.shortcut a,
.shortcut span,
.shortcut i {
color: #999;
text-decoration: none;
}
.top-bar a:hover,
.top-bar a.highlight {
color: #F10125;
}
/* 设置location的 */
.location {
font-size: 14px;
float: left;
color: #999;
/*position: relative;*/
}
/* 设置city-list效果 */
.location .city-list {
width: 320px;
height: 436px;
background-color: white;
display: none;
border: 1px rgba(204, 204, 204) solid;
/*设置绝对定位，使其不占据父元素位置*/
position: absolute;
top: 31px;
/* 设置阴影 */
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
/* */
z-index: 999;
}
.current-city {
padding: 0 10px;
border: 1px transparent solid;
border-bottom: none;
position: relative;
z-index: 1000;
}
/* 当鼠标移入到location时，让city-list显示 */
.location:hover .city-list {
display: block;
}
/*设置current-city的移入效果*/
.location:hover .current-city {
background-color: white;
border: 1px rgba(204, 204, 204) solid;
border-bottom: none;
padding-bottom: 1px;
}
.location .region {
}
/*设置location下的小图标*/
.location .fas {
color: #f10215;
}
/* 设置location的字体颜色 */
.location a {
color: #999;
text-decoration: none;
}
/* 设置shortcut */
.shortcut {
float: right;
}
/*设置a-myjd的效果*/
.a-myjd {
position: relative;
border: 1px transparent solid;
z-index: 9999;
}
/*设置我的京东下拉框*/
.shortcut .myjd {
width: 280px;
height: 200px;
background-color: white;
border: 1px rgba(204, 204, 204) solid;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
display: none;
position: absolute;
top: 31px;
z-index: 999;
}
/*鼠标移入我的京东显示下拉框*/
.li-myjd:hover .myjd {
display: block;
}
/*.li-myjd:hover .myjd,*/
.li-myjd:hover .a-myjd {
border: 1px solid rgba(204, 204, 204);
background-color: white;
border-bottom: none;
padding-bottom: 1px;
}
/* 设置分隔的线 */
.shortcut .line {
width: 1px;
height: 10px;
background-color: #999;
margin: 10px 12px 0;
}
/*设置企业采购下拉框*/
.shortcut .qycg-list {
/*设置宽度*/
width: 140px;
/*设置高度*/
height: 200px;
/*设置背景颜色*/
background-color: white;
/*设置边框*/
border: 1px rgb(204, 204, 204) solid;
/*设置阴影*/
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
/*设置默认隐藏*/
display: none;
/*设置绝对位置*/
position: absolute;
/*设置上距离*/
top: 31px;
/*设置层级*/
z-index: 999;
}
/*鼠标移入显示下拉框*/
.li-qycg:hover .qycg-list {
display: block;
}
/*设置a标签的样式*/
.shortcut .a-qycg {
/*设置透明边框*/
border: 1px transparent solid;
/*设置位置*/
position: relative;
/*设置层级*/
z-index: 9999;
}
/*设置鼠标移入，显示企业采购下拉列表*/
.li-qycg:hover .a-qycg {
background-color: white;
border: 1px rgba(204, 204, 204) solid;
border-bottom: none;
padding-bottom: 1px;
}
/* 设置ul的li */
.shortcut li {
float: left;
}
/* 设置突变的距离 */
.shortcut li i {
margin: 2px 0;
}
.shortcut .li-sjfw {
position: relative;
}
/* 设置商家服务下拉框 */
.shortcut .sjfw-list {
width: 260px;
height: 140px;
background-color: white;
display: none;
border: 1px rgba(204, 204, 204) solid;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
position: absolute;
top: 31px;
right: 0;
z-index: 999;
}
/* 设置商家服务鼠标移入显示下拉框 */
.li-sjfw:hover .sjfw-list {
display: block;
}
/* 设置商家服务样式 */
.shortcut .a-sjfw {
position: relative;
z-index: 9999;
}
/* 设置鼠标移入商家服务的样式 */
.li-sjfw:hover .a-sjfw {
background-color: white;
border: 1px rgba(204, 204, 204) solid;
border-bottom: none;
padding-bottom: 1px;
}
/* 设置网页导航 */
.shortcut .wydh-list {
width: 1190px;
height: 240px;
display: none;
border: 1px rgba(204, 204, 204) solid;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
background-color: white;
position: absolute;
top: 31px;
right: 0;
z-index: 999;
}
/* 设置鼠标移入显示下拉框 */
.li-wydh:hover .wydh-list {
display: block;
}
/*设置a-wydh样式*/
.shortcut .a-wydh {
border-bottom: 1px transparent solid;
position: relative;
z-index: 9999;
}
/*设置鼠标移入网页样式*/
.li-wydh:hover .a-wydh {
background-color: white;
border: 1px rgba(204, 204, 204) solid;
border-bottom: none;
padding-bottom: 1px;
}
</style>
</head>
<body>
<!--创建外围容器-->
<div class="top-bar-wapper">
<!-- 创建内部容器 -->
<div class="top-bar clearfix">
<!-- 左侧的地址菜单 -->
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:">北京</a>
</div>
<!-- 放置城市列表的div -->
<div class="city-list">
</div>
<!-- 右侧菜单 -->
<ul class="shortcut">
<!-- -->
<li>
<a href="javascript:">你好，请登录</a>
<a class="highlight" href="javascript:">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li>
<a href="javascript:">我的订单</a>
</li>
<li class="line"></li>
<li class="li-myjd">
<div class="a-myjd">
<a href="javascript:">我的京东</a>
<i class="fas"></i>
</div>
<div class="myjd">
</div>
</li>
<li class="line"></li>
<li class="li-qycg">
<div class="a-qycg">
<a class="highlight" href="javascript:">企业采购</a>
<i class="fas fa-angle-down"></i>
</div>
<div class="qycg-list">
</div>
</li>
<li class="line"></li>
<li class="li-sjfw">
<div class="a-sjfw">
<span class="highlight">商家服务</span>
<i class="fas"></i>
</div>
<div class="sjfw-list">
</div>
</li>
<li class="line"></li>
<li class="li-wydh">
<div class="a-wydh">
<span class="highlight">网站导航</span>
<i class="fas fa-angle-down"></i>
</div>
<div class="wydh-list">
</div>
</li>
<li class="line"></li>
<li>
<span class="highlight">手机京东</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
9、背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 500px;
height: 500px;
/*
background-color: 设置背景颜色
background-image: 设置背景图片
- 可以同时设置背景颜色和背景图片，这样背景颜色将会称为图片的背景色
- 如果背景图片小于元素，则背景图片会在元素中平铺
- 如果背景图片大于元素，则背景图片一部分无法显示
- 如果背景图片和元素一样大，则背景图片正常显示
background-repeat: 用来设置背景的重复方式
可选值：
repeat 默认值，背景会沿着X轴 Y轴双方向重复
repeat-x: 沿x轴方向重复
repeat-y: 沿y轴方向重复
no-repeat： 背景图片不重复
background-postion: 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 几个表示方位的值来设置背景图片的位置
使用方位词是，必须同时指定两个值，如果只写一个，则第二个默认是center
通过偏移量来指定背景图片的位置
水平方向的偏移量
垂直方向的偏移量
*/
background-color: #bfa;
background-image: url("../img/2-min.jpg");
background-repeat: no-repeat;
/*background-position: center center;*/
background-position: 100px 100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
10、背景2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 500px;
height: 500px;
padding: 10px;
overflow: auto;
background-color: #bfa;
background-image: url("../img/2.jpg");
background-repeat: no-repeat;
/*background-position: center center;*/
/*background-position: 100px 100px;*/
/*
设置背景的范围
background-clip
可选值:
border-box 默认值 背景会出现在边框的下边
padding-box 背景不会出现在边框 只出现在内容区和内边距
context-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值 backgroud-postion从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的偏移量从边框处开始计算
background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
- 如果只写一个值，则第二个值默认值auto
cover 图片的比例不变，将图片铺满
container 图片的比例不变，将图片在元素中完整显示
*/
/*border: 10px red double;*/
/*background-origin: border-box;*/
/*background-clip: content-box;*/
background-size: contain;
/*
background-color
background-image
background-repeat
background-postion
background-size
background-origin
background-clip
background-attachment
- background 背景相关的简写属性，所有背景相关的样式，都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的
注意点：
background-size必须写在backgroud-postion的后边，并且使用 / 隔开
backgroud-postion/backgroud-size
backgroud-origin backgroud-clip 两个样式，origin要在clip前面
*/
}
.box2{
width: 200px;
height: 1000px;
/*background-color: orange;*/
background-image: url("../img/2-min.jpg");
background-repeat: no-repeat;
background-position: 100px 100px ;
/*
background-attachment
- 背景图片是否跟随元素移动
- 可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景图片会固定在页面中,不会随元素移动
*/
background-attachment: fixed;
}
.box3{
width: 500px;
height: 500px;
padding: 20px;
border: 10px red double;
background: #bfa url("../img/2-min.jpg") center center border-box content-box no-repeat;
}
</style>
</head>
<body>
<div class="box3">
</div>
<!--<div class="box1">-->
<!-- <div class="box2"></div>-->
<!--</div>-->
</body>
</html>
练习-07-背景重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 990px;
height: 48px;
background-color: red;
margin: 0 auto;
background-image: url("../img/07/bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
练习-08-按钮练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
display: block;
width: 65px;
height: 50px;
background-image: url("../img/08/emoji1.png");
/*background-repeat: no-repeat;*/
}
a:hover {
background-image: url("../img/08/emoji2.png");
}
a:active {
background-image: url("../img/08/emoji3.png");
}
/*
图片属于网页的外部资源，外部资源都需要浏览器单独发送请求加载
浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
像我们上边的练习，link会首先加载，而hover和active会在指定状态触发时才会加载
*/
</style>
</head>
<body>
<a href="javascript:"></a>
</body>
</html>
练习-09-按钮练习-雪碧图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
display: block;
width: 65px;
height: 50px;
background-image: url("../img/08/emoji.png");
/*background-repeat: no-repeat;*/
}
a:hover {
background-position: -65px 0;
}
a:active {
background-position: -135px 0;
}
/*
解决图片闪烁的问题
可以将多个小图片保存到一个大图片中，然后通过backgroud-postion来显示相应的图片
这样图片就会同时加载到网页中，就可以有效避免出现闪烁的问题
这个技术在网页中应用十分广泛，被称为CSS-sprite 这种图成为雪碧图
雪碧图的使用步骤：
1. 先确定要使用的图片
2. 测量图标的大小
3. 根据测量结果，创建一个元素
4. 将雪碧图设置为元素的背景图片
5. 设置偏移量以显示正确的图片
雪碧图的特点：
一次性将多个图片加载到页面，降低请求的次数，加快访问的速度提升用户体验
*/
.box1 {
width: 75px;
height: 75px;
background-image: url("../img/09/sprite-1.png");
background-position: 0 0;
}
.box2 {
width: 75px;
height: 75px;
background-image: url("../img/09/sprite-1.png");
background-position: -80px -80px;
}
.box3 {
width: 75px;
height: 75px;
background-image: url("../img/09/sprite-1.png");
background-position: -0px -160px;
}
</style>
</head>
<body>
<a href="javascript:"></a>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
练习-10-电影卡片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fontawesome/css/all.css">
<style>
/* 设置外部容器 */
.outter {
width: 270px;
margin: 100px auto;
/* 设置阴影 */
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/*.img-wrapper {*/
/* border: 1px red solid;*/
/*}*/
/* 设置图片 */
.img-wrapper img {
width: 100%;
vertical-align: bottom;
}
.info {
padding: 0 18px;
color: #acaaaa;
font-size: 14px;
}
/* 设置标题 */
.info .title {
font-size: 18px;
color: #717171;
margin: 13px 0 15px 0;
}
.info .category i {
margin-left: 4px;
margin-right: 7px;
}
/* 设置简介的样式 */
.info .intro {;
margin: 18px 4px;
line-height: 20px;
}
/* 设置下边的内容 */
.star-wrapper {
height: 46px;
line-height: 46px;
border-top: 1px #e9e9e9 solid;
color: #bbb;
padding: 0 16px;
}
/* 设置星星的样式 */
.star-wrapper .star {
float: left;
}
.star-wrapper .weibo {
float: right;
}
.light{
color: #b9cb41;
}
</style>
</head>
<body>
<!--创建外部容器-->
<div class="outter">
<!-- 创建图片容器 -->
<div class="img-wrapper">
<!-- 设置图片 -->
<img src="../img/10/10.png" alt="">
</div>
<!-- 创建内容去容器 -->
<div class="info">
<h2 class="title">
动作电影
</h2>
<h3 class="category">
<i class="fas fa-map-marker-alt"></i>
爱国
</h3>
<p class="intro">
这是一部爱国主义的电影，非常的激情！！！
</p>
</div>
<!-- 创建评分容器 -->
<div class="star-wrapper">
<!-- 创建星星 -->
<ul class="star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
</ul>
<!-- 创建 -->
<ul class="weibo">
<li class="fab fa-weibo"></li>
</ul>
</div>
</div>
</body>
</html>
11、渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
/*background: #bfa;*/
/*
通过渐变可以设置一些复杂的背景颜色，可以从一个颜色向其他颜色过渡的效果
！！渐变是图片，需要通过background-image来设置
线性渐变: 沿着一条直线发生变化
linear-gradient()
linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
- 线性渐变的开头，我们可以设置一个渐变的方向
to left
to right
to bottom
to top
xxxdeg deg表示度数
xxturn turn 表示圈
- 渐变可以设置多种颜色，多个颜色默认情况下，平均分配
也可以设置指定渐变的情况
repeating-linear-gradient() 可以平铺的线性渐变
*/
/*background-image: linear-gradient(red,yellow,#bfa,orange);*/
/*background-image: linear-gradient(red 50px,yellow 100px, green 120px,orange 175px);*/
background-image: repeating-linear-gradient(to right, red 50px, yellow 100px);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
12、径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 400px;
height: 300px;
/*
radial-gradient() 径向渐变（放射性的效果）
默认情况下，径向渐变的的形状根据圆的形状来计算的
正方形-->圆形
长方形-->椭圆形
- 也可以指定径向渐变的大小
circle 正圆
ellipse 椭圆
- 也可以指定渐变的位置
- 语法
radial-gradient(大小 at 位置, 颜色 位置, 颜色 位置)
大小：
circle 圆形
ellipse 椭圆
farthest-corner 远角
farthest-side 远边
closest-corner 近角
closest-side 近边
位置：
top
right
bottom
left
*/
background-image: radial-gradient(farthest-corner at 100px 100px,red, #bfa);
/*background-image: repeating-radial-gradient(100px 100px, red, yellow);*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
七、HTML-表格-表单
1、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
在我们现实生活中，需要使用表格来表示一些格式化数据，
课程表、人名单、成绩单……
同样在网页中也需要使用表格，我们通过table标签来创建表格
-->
<table border="1" width="50%" align="center">
<!-- 在table中使用tr表示一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示单元格，有几个td就表示有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!-- rowspan 纵向的合并单元格-->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<!-- <td>D3</td>-->
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!-- colspan 横向合并单元格 -->
<td colspan="2">C4</td>
<!-- <td>D4</td>-->
</tr>
</table>
</body>
</html>
2、长表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="50%" align="center">
<!--
可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot
th表示头部的单元格
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>20001.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>20001.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>20001.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>20001.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
3、表格的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 50%;
border: 1px black solid;
margin: 0 auto;
/*border-spacing: 指定边框之间的距离*/
/*border-spacing: 2px;*/
/*border-collapse: collapse; collapse 设置边框合并 */
border-collapse: collapse;
}
td {
border: 1px black solid;
height: 50px;
/*
默认情况下元素在td中是垂直居中的
可以通过vertical-align: center;来设置
*/
vertical-align: middle;
text-align: center;
}
/*
如果表格中没有使用tbody而是直接使用tr
浏览器会自动创建一个tbody，并且将tr全部放入tbody中
tr不是table的子元素
*/
tbody > tr:nth-child(2n+1) {
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙悟净</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐三藏</td>
<td>男</td>
<td>16</td>
<td>大唐</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙悟净</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐三藏</td>
<td>男</td>
<td>16</td>
<td>大唐</td>
</tr>
</table>
</body>
</html>
4、表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
表单
- 在现实生活中，用于提交数据
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form创建表单
-->
<!--
form的属性
action 表单提交服务器的地址
-->
<form action="target.html">
<!--
文本框
注意：数据要提交到服务器必须要指定一个name属性值
-->
文本框<input type="text" name="uname">
<br>
<br>
密码框<input type="password" name="pwd">
<!--
单选框
- 像这种选择框，必须指定一个value属性，value属性最终胡作为用户填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
-->
<br>
<br>
单选按钮
<input type="radio" name="hello" value="A">
<input type="radio" name="hello" value="B" checked>
<br>
<br>
<!--
多选框
-->
多选框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2" checked>
<input type="checkbox" name="test" value="3">
<!--
xiallieb
-->
<br>
<br>
下拉列表
<select name="haha" id="">
<option value="i" selected>选项一</option>
<option value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<!--
提交按钮
-->
<br>
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
5、表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="target.html">
<!--
autocomplete="off" 关闭自动补全
readonly 将表单设置为只读，数据会提交
disabled 将表单设置为禁用，数据不会提交
required 将表单设置为必填项
autofocus 设置表单项自动获取焦点
-->
用户名1：<input type="text" name="username" value="hello" readonly>
<br><br>
用户名2：<input type="text" name="username" autofocus>
<br><br>
用户名3：<input type="text" name="b">
<br><br>
<!-- <input type="color">-->
<br><br>
<!-- <input type="email">-->
<br><br>
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
target.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>您的数据已经收到！！</h1>
</body>
</html>
八、animation
1、过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- -->
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div {
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box2 {
background-color: #bfa;
margin-left: 0;
transition: margin-left 2s 1s cubic-bezier(.14,.81,1,-0.94);
/*transition-property: all;*/
/*transition-property: width, height;*/
/*transition-duration: 2s;*/
/*transition-duration: 1s,2s;*/
/*transition-timing-function: cubic-bezier(.14,.81,1,-0.94);*/
/*transition-timing-function: steps(2,start);*/
/*transition-delay: 2s;*/
/*
过渡（transition）
- 通过过渡可以指定一个属性发生变化是的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
*/
/*
transition-property:
- 指定要执行过渡的属性
- 多个属性使用逗号隔开，如果所有属性都需要过渡，则使用all字样
- 大部分属性都支持过渡
- 注意，过渡时，必须从一个有效数值，向另外一个有效数值进行过渡
transition-duration:
- 指定过渡效果持续的时间
- 时间单位： s 和 ms 1s = 1000ms
transition-timing-function:
- 过渡的时序函数
- 指定过渡执行的方式
- 可选值：
- ease 默认值，慢速开始，先加速，再减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier() 来指定时序函数
- https://cubic-bezier.com/#.17,.67,.83,.67
- steps(); 分步过渡执行
- 可以设置第二个值
- end 在时间结束时执行过渡（默认值）
- start 在时间开始时执行过渡
transition-delay: 过渡效果延时，等待一段时间后再执行过渡
*/
/*
transition 可以同时设置过渡的所有属性，只一个要求，如果写延时，则两个时间中的第一个是持续时间
*/
}
.box1:hover div {
/*width: 200px;*/
/*height: 200px;*/
/*background-color: orange;*/
margin-left: 700px;
}
.box3 {
background-color: orange;
transition-property: all;
transition-duration: 2s;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
2、动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- -->
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div {
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box2 {
background-color: #bfa;
margin-left: 10px;
/*
设置box2的动画
animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间
animation-delay: 动画的延时
animation-timing-function:
*/
animation-name: test;
animation-duration: 3s;
animation-delay: 2s;
/*animation-timing-function: ease-in-out;*/
/*
animation-iteration-count: 动画执行的次数
可选值：
次数
infinite 无限次数
animation-direction: 动画执行的方向
可选值：
nomal 默认值 从 form 向 to 运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 form 向 to 运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
animation-play-state 设置动画的执行状态
可选值：
running 默认值 动画执行
paused 动画暂停
animation-fill-mode: 动画执行的填充效果
可选值
none 默认值 动画执行完毕元素回到原来的位置
forwards 动画执行完毕，元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards
*/
animation-iteration-count: 1;
/*animation-direction: alternate-reverse;*/
/*animation-play-state: paused;*/
/*animation-fill-mode: both;*/
animation: test 2s 2 1s alternate;
}
.box1:hover div {
/*animation-play-state: paused;*/
}
/*
动画
动画和过渡类似，都可以实现一些动态的效果
不同的是过渡是需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须要设置一个关键帧，关键帧设置了动画执行每一个步骤
*/
@keyframes test {
/*动画的开始位置 也可以使用 0%*/
from {
margin-left: 0;
background-color: orange;
}
/*动画的结束位置 也可以使用 100%*/
to {
margin-left: 700px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!--<div class="box3"></div>-->
</div>
</body>
</html>
3、关键帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
height: 500px;
border-bottom: 10px black solid;
margin: 50px auto;
overflow: hidden;
}
.outer div {
float: left;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #bfa;
animation: ball 1s forwards ease-in infinite alternate;
}
div.box2{
background-color: orange;
animation-delay: 0.1s;
}
div.box3{
background-color: red;
animation-delay: 0.2s;
}
div.box4{
background-color: yellow;
animation-delay: 0.3s;
}
div.box5{
background-color: green;
animation-delay: 0.4s;
}
div.box6{
background-color: blue;
animation-delay: 0.5s;
}
div.box7{
background-color: purple;
animation-delay: 0.6s;
}
/* 创建小球下落的动画 */
@keyframes ball {
from{
margin-top: 0;
}
to{
margin-top: 400px;
}
/*20%, 60%, to{*/
/* margin-top: 400px;*/
/* animation-timing-function: ease-out;*/
/*}*/
/*40% {*/
/* margin-top: 100px;*/
/*}*/
/*80%{*/
/* margin-top: 200px;*/
/*}*/
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
</div>
</body>
</html>
练习-11-米兔动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
height: 271px;
width: 132px;
background-image: url("../img/11/mitu.png");
margin: 0 auto;
background-position: 0 0;
transition: 1s steps(3);
}
.box1:hover{
background-position: -396px 0;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
练习-12-奔跑的少年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 70px;
height: 70px;
margin: 0 auto;
background-image: url("../img/12/running.jpeg");
animation: run 1s steps(8) infinite;
}
/*创建关键帧*/
@keyframes run {
from{
background-position: 0 0;
}
to{
background-position: -474px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
4、变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: rgb(236,236,236);
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto auto auto;
/*transform: translateY(-100px);*/
transform: translateX(50%);
}
/*
变形就是通过CSS来改变元素的形状或者位置
- 变形不会影响到页面的效果
- transform 用来设置元素的变形效果
平移：
translateX() 沿着x轴方向平移
translateY() 沿着轴方向平移
translateZ() 沿着z轴方向平移
- 平移元素，百分比是相对于自身计算的
*/
/*.box2{*/
/* width: 200px;*/
/* height: 200px;*/
/* background-color: orange;*/
/* margin: 0 auto;*/
/*}*/
.box3{
/*width: 100px;*/
/*height: 100px;*/
background-color: orange;
position: absolute;
/*
这种居中方式只适用于元素大小确定的时候
top: 0;
right: 0;
bottom: 0;
left: 0;
*/
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box4, .box5{
width: 220px;
height: 300px;
background-color: white;
float: left;
margin: 0 10px;
transition: all .5s;
}
.box4:hover,
.box5:hover{
transform: translateY(-4px);
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!--<div class="box3">qqqq</div>-->
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
5、Z轴平移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
/* 设置当前网页的视距为800px，人眼距网页的距离 */
perspective: 800px;
}
body{
border: 1px red solid;
background-color: silver;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
transition: 2s;
/*transform: translateZ(100px);*/
/*
z轴平移，调整元素在z轴的位置，正常情况下就是调整元素和人眼之间的距离
距离越大，元素离人约进
z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到这个效果，必须要设置网页的视距
*/
}
body:hover{
transform: translateZ(700px);
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
6、旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
/* 设置当前网页的视距为800px，人眼距网页的距离 */
perspective: 800px;
}
body {
border: 1px red solid;
background-color: silver;
}
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
margin: 200px auto;
transition: 2s;
}
body:hover .box1 {
/*transform: rotateZ(.1turn);*/
/*transform: rotateY(45deg) translateZ(400px);*/
/*transform: translateZ(400px) rotateY(45deg) ;*/
transform: rotateY(180deg);
/*设置元素的背面是否显示*/
backface-visibility: hidden;
/*
通过旋转可以使元素沿着x y或 z轴旋转指定的角度
rotateX() 沿x轴旋转
rotateY() 沿y轴旋转
rotateZ() 沿z轴旋转
*/
}
</style>
</head>
<body>
<div class="box1">
<img src="../img/2-min.jpg" alt="">
</div>
</body>
</html>
7、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
perspective: 800px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
margin: 100px auto;
transition: 2s;
}
.box1:hover{
/*
对元素进行缩放
scaleX() 水平方向的缩放
scaleY() 垂直方向的缩放
scaleZ()
scale() 双方向的缩放
变形的原点,默认值为center
transform-origin:center;
*/
transform: scale(2);
transform-origin: 20px 20px;
}
.img-wrapper{
width: 200px;
height: 200px;
border: 1px red solid;
overflow: hidden;
}
img{
transition: 1s;
}
.img-wrapper:hover img{
transform: scale(2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="img-wrapper">
<img src="../img/2.jpg" width="100%" alt="">
</div>
</body>
</html>
练习-13-钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*.sec-wrapper{*/
/* width: 500px;*/
/* height: 500px;*/
/* !*background-color: #bfa;*!*/
/* animation: run 60s;*/
/*}*/
/*.sec {*/
/* height: 250px;*/
/* width: 4px;*/
/* background-color: red;*/
/* margin: 0 auto;*/
/* !*animation: run 60s;*!*/
/* !*transform: rotateZ(45deg);*!*/
/*}*/
/*设置表的样式*/
.clock {
width: 500px;
height: 500px;
/*background-color: #bfa;*/
margin: 100px auto auto auto;
border-radius: 50%;
/*border: 10px black solid;*/
background-image: url("../img/13/clock.png");
background-size: cover;
position: relative;
}
.clock > div {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
}
/*设置时针*/
.hour-wrapper {
height: 70%;
width: 70%;
/*background-color: #bfa;*/
animation: run 43200s linear infinite;
}
.hour {
height: 50%;
width: 6px;
background-color: #000;
margin: 0 auto;
}
/*设置分针*/
.min-wrapper {
height: 80%;
width: 80%;
/*background-color: #bfa;*/
animation: run 3600s steps(60) infinite;
}
.min {
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto;
}
/*设置分针*/
.sec-wrapper {
height: 95%;
width: 95%;
/*background-color: #bfa;*/
animation: run 60s steps(60) infinite;
}
.sec {
height: 50%;
width: 2px;
background-color: #F00;
margin: 0 auto;
}
/*旋转的关键帧*/
@keyframes run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<!--创建表的容器-->
<div class="clock">
<!-- 创建时针 -->
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<!-- 创建分针 -->
<div class="min-wrapper">
<div class="min"></div>
</div>
<!--创建秒针-->
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
<!--<div class="sec-wrapper">-->
<!-- <div class="sec">-->
<!-- </div>-->
<!--</div>-->
</body>
</html>
练习-14-复仇者联盟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
perspective: 800px;
}
.cube {
width: 200px;
height: 200px;
/*background-color: #bfa;*/
margin: 100px auto;
/*设置3d变形效果*/
transform-style: preserve-3d;
/*transform: rotateX(45deg) rotateZ(45deg);*/
animation: rotate 30s infinite linear;
/*transform: rotateY(45deg) scaleZ(2);*/
}
.cube > div {
width: 200px;
height: 200px;
/* 为元素设置透明效果 */
opacity: 0.7;
position: absolute;
}
img {
vertical-align: top;
}
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
transform: rotateY(0deg) translateZ(100px);
}
.box6 {
transform: rotateY(180deg) translateZ(100px);
}
@keyframes rotate {
from{
transform: rotateX(0) rotateZ(0);
}
to{
transform: rotateX(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<!--创建外部的容器-->
<div class="cube">
<!-- 引入图片 -->
<div class="box1">
<img src="../img/14/1.jpg" alt="">
</div>
<div class="box2">
<img src="../img/14/2.jpg" alt="">
</div>
<div class="box3">
<img src="../img/14/3.jpg" alt="">
</div>
<div class="box4">
<img src="../img/14/4.jpg" alt="">
</div>
<div class="box5">
<img src="../img/14/5.jpg" alt="">
</div>
<div class="box6">
<img src="../img/14/6.jpg" alt="">
</div>
</div>
</body>
</html>
九、Less
1、less的简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
/* CSS原生也支支持变量的设置 */
--color: yellow;
--length: 200px;
}
.box1 {
/* calc() 计算函数 */
width: var(--length);
/*width: calc(200px/2);*/
height: var(--length);
background-color: var(--color);
}
.box2 {
width: var(--length);
height: var(--length);
color: var(--color);
}
.box3 {
width: var(--length);
height: var(--length);
border: 10px var(--color) solid;
}
</style>
</head>
<body>
<!--
less是一门css的预处理语言
- less 是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性，对变量的支持，对mixin的支持
- less 的语法大体上和css语法一致，但是less中添加了许多对css的拓展
所以浏览器无法执行less中的代码，要执行必须先讲less转换为css 然后再由浏览器执行
CSS的缺点：
-->
<div class="box1">aaaa</div>
<div class="box2">aaaa</div>
<div class="box3">aaaa</div>
</body>
</html>
2、less的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/other.css">
</head>
<body>
<div class="box1"></div>
</body>
</html>
style.less
body{
width: 100px;
height: 100px;
div{
color: red;
}
}
style.css
body {
width: 100px;
height: 100px;
}
body div {
color: red;
}
/*# sourceMappingURL=style.css.map */
syntax.less
//less 中的单行注释。注释中的内容不会被解析到css中
/*
css中的注释。多行注释,内容会被解析到css文件中
*/
.box1 {
background-color: #bfa;
.box2 {
background-color: #FF0000;
.box4 {
color: red;
}
}
.box3 {
background-color: orange;
}
}
//变量，在变量中可以存储一个任意的值
//并且可以在需要时，任意的修改变量中的值
//变量的语法 @变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
//使用变量时，如果是直接使用，则以@变量名的形式使用即可
width: @a;
color: @b;
}
// 作为类名使用，或者一部分值使用时，必须以@{变量名}的形式使用
.@{c}{
width: @a;
background-image: url("@{c}/1.jpg");
}
@d:200px;
@d:300px;
div{
@d:115px;
//b变量重名时，变量值就进原则使用变量
width: @d;
height: @e;
}
//变量在声明前就可以使用变量，
@e:335px;
div{
width: 300px;
//$width新版本的语法
height: $width;
}
syntax.css
/*
css中的注释。多行注释,内容会被解析到css文件中
*/
.box1 {
background-color: #bfa;
}
.box1 .box2 {
background-color: #FF0000;
}
.box1 .box2 .box4 {
color: red;
}
.box1 .box3 {
background-color: orange;
}
.box5 {
width: 100px;
color: #bfa;
}
.box6 {
width: 100px;
background-image: url("box6/1.jpg");
}
div {
width: 115px;
height: 335px;
}
div {
width: 300px;
height: 300px;
}
/*# sourceMappingURL=syntax.css.map */
syntax2.less
.box1 {
.box2 {
color: red;
}
> .box3 {
color: red;
&:hover {
color: blue;
}
}
//为box1设置一个hover
//&表示外层的父元素
&:hover {
color: orange;
}
div & {
width: 100px;
height: 100px;
}
}
.p1 {
width: 100px;
height: 200px;
}
//extend() 对当前选择器进行拓展指定选择器的样式（选择器分组）
.p2:extend(.p1) {
color: red;
}
.p3 {
//直接对指定的样式进行引用，这里就相当于讲p1的样式在这里进行了复制
//mixin 混合
.p1();
}
//在使用类选择器可以在选择器后面添加一个括号，这是我们实际上就创建了一个mixins
.p4() {
width: 100px;
height: 200px;
background-color: #bfa;
}
.p5 {
.p4;
}
//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red) {
width: @w;
height: @h;
border: 1px @bg-color solid;
}
div {
//调用混合函数，按顺序传递参数
.test(300px)
//.test(200px,300px,#bfa);
//.test(@bg-color: red;@w: 100px;@h: 200px)
}
span {
font-size: average(red, blue);
}
html {
width: 100%;
height: 100%;
}
body:extend(html) {
background-color: #bfa;
&:hover {
background-color: darken(#bfa, 50%);
}
}
syntax.css
.box1 .box2 {
color: red;
}
.box1 > .box3 {
color: red;
}
.box1 > .box3:hover {
color: blue;
}
.box1:hover {
color: orange;
}
div .box1 {
width: 100px;
height: 100px;
}
.p1,
.p2 {
width: 100px;
height: 200px;
}
.p2 {
color: red;
}
.p3 {
width: 100px;
height: 200px;
}
.p5 {
width: 100px;
height: 200px;
background-color: #bfa;
}
div {
width: 300px;
height: 200px;
border: 1px red solid;
}
span {
font-size: #800080;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #bfa;
}
body:hover {
background-color: #22aa00;
}
/*# sourceMappingURL=syntax2.css.map */
other.less
//import 用来将其他的less引入到当前的less中
//可以通过import来将其他的less引入到当前的less中
//@import url(syntax2);
@import "syntax2.less";
//
.box1{
//在less中所有的数值都可以直接进行运算
// + - * /
width: 100px + 100px;
height: 100px*2;
background-color: #bfa;
}
other.css
.box1 .box2 {
color: red;
}
.box1 > .box3 {
color: red;
}
.box1 > .box3:hover {
color: blue;
}
.box1:hover {
color: orange;
}
div .box1 {
width: 100px;
height: 100px;
}
.p1,
.p2 {
width: 100px;
height: 200px;
}
.p2 {
color: red;
}
.p3 {
width: 100px;
height: 200px;
}
.p5 {
width: 100px;
height: 200px;
background-color: #bfa;
}
div {
width: 300px;
height: 200px;
border: 1px red solid;
}
span {
font-size: #800080;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #bfa;
}
body:hover {
background-color: #22aa00;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
/*# sourceMappingURL=other.css.map */
十、Flex
1、弹性盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 500px;
border: 10px red solid;
/*将ul设置为弹性容器*/
display: flex;
/*
flex-direction 指定容器中元素的排列方式
可选值：
row： 默认值，弹性元素在容器中水平排列（左向右排列）
- 主轴 自左向右
row-reverse： 弹性元素在容器中水平排列（右向左）
- 主轴 自右向左
column: 弹性元素在容器中垂直排列（自上向下）
- 主轴 自上向下
column-reverse：弹性元素在容器中反向垂直排列（自下向上）
- 主轴 自下向上
主轴：
弹性元素的排列方向称为主轴
侧轴：
与主轴垂直方向的称为侧轴
*/
flex-direction: row;
}
ul li {
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex-grow 设置弹性元素的伸展的系数
- 当父元素有多余的空间时，子元素如何伸展
0 默认值，不伸展
- 父元素的剩余空间，会按照比例进行分配
*/
/*flex-grow: 1;*/
/*
flex-shrink 指定弹性元素的收缩系数
- 当父元素的空间不足以容纳所有的子元素时，如何对子元素进行收缩
默认值 1
*/
flex-shrink: 1;
}
li:nth-child(1){
/*flex-grow: 1;*/
flex-shrink: 1;
}
li:nth-child(2) {
background-color: pink;
/*flex-grow: 2;*/
flex-shrink: 2;
}
li:nth-child(3) {
background-color: orange;
/*flex-grow: 3;*/
flex-shrink: 3;
}
</style>
</head>
<body>
<!--
flex(弹性盒、伸缩盒）
- 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
- flex可以使元素具有弹性，让元素可以跟随页面的大小改变而改变
- 弹性容器：
- 要是用弹性盒，必须先将一个元素设置为弹性容器
- 通过display来设置弹性容器
display：flex 设置为块级弹性元素
display： inline-flex 设置为行内弹性容器
- 弹性元素
- 弹性容器的子元素是弹性元素（弹性项）
- 一个元素可以同时时弹性容器和弹性元素
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2、弹性容器的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
flex-direction: row;
/*
flwx-wrap：
设置弹性元素是否在弹性容器内自动换行
可选值：
nowrap 默认值 元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
*/
/*flex-wrap: wrap-reverse;*/
/*flex-flow: wrap 和 direction 的简写属性 */
/*flex-flow: row wrap;*/
/*
flex-content
- 如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布在元素两侧
space-evenly 空白分配到元素的单侧
space-between 空白均匀分配到元素中间
*/
justify-content: space-between;
}
ul li {
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-grow: 0;
flex-shrink: 0;
}
li:nth-child(1) {
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: orange;
}
</style>
</head>
<body>
<!--
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
3、弹性容器的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 600px;
height: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
flex-direction: row;
/*
flwx-wrap：
设置弹性元素是否在弹性容器内自动换行
可选值：
nowrap 默认值 元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
*/
/*flex-wrap: wrap-reverse;*/
/*flex-flow: wrap 和 direction 的简写属性 */
flex-flow: row wrap;
/*
flex-content
- 如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布在元素两侧
space-between 空白均匀分配到元素中间
space-evenly 空白分配到元素的单侧
*/
/*justify-content: center;*/
/*
align-items：
- 元素在辅轴上如何对齐
- 元素之间的关系
可选值：
stretch: 默认值， 将元素的长度设置为相同的值
flex-start: 元素不会拉伸，沿着辅轴起边对齐
flex-end： 元素不会拉伸，沿着辅轴的终边对齐
center： 居中对齐
baseline: 基线对齐
*/
/*justify-content: center;*/
align-items: flex-start;
/*
align-content: 辅轴的空白空间的分步
*/
align-content: flex-start;
}
ul li {
width: 200px;
/*height: 100px;*/
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-grow: 0;
flex-shrink: 0;
}
li:nth-child(1) {
/* align-self: 用来覆盖当前弹性元素上的align-items */
align-self: stretch;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: orange;
}
li:nth-child(4) {
background-color: yellow;
}
li:nth-child(5) {
background-color: chocolate;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>1</li>
<li>
2
<div>2</div>
</li>
</ul>
</body>
</html>
4、弹性元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 900px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
flex-direction: column;
}
ul li {
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex-grow:
弹性的增长系数
*/
/*flex-grow: 1;*/
/*
弹性元素的缩减系数
- 缩减系数的计算方式比较复杂
- 缩减多少，是根据 缩减系数 和 元素大小 来计算的
*/
/*flex-shrink: 1;*/
/*
元素的基础长度
flex-basis： 指定的是元素在主轴上的基础长度
如果主轴是横向的，该值指定的是元素的宽度
如果主轴是纵向的，该值指定的是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了具体数值，则以该值为主
*/
/*flex-basis: auto;*/
/*
flex 可以设置弹性元素所有的三个值
flex 增长 缩减 基础值
inital "flex: 0 1 auto;"
auto "flex: 1 1 auto"
none "flex: 0 0 auto" 弹性元素没有弹性
*/
/*flex: 1 1 auto;*/
/*flex: initial;*/
}
li:nth-child(1) {
/*
order 决定弹性元素的排列顺序
*/
order: 3;
}
li:nth-child(2) {
background-color: pink;
order: 2;
}
li:nth-child(3) {
background-color: orange;
order: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
5、像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--
像素
- 屏幕是由一个个发光的小点构成，只一个个的小点就是像素
- 分辨率： 1920 * 1080 谁的就是屏幕中小点的数量
- 在前端开发中，像素要分成两种情况讨论，css像素 和 物理像素
- 物理像素 上述所说的小点点就属于物理像素
- css像素 编写网页时所用的像素就是CSS像素
- 浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
- 一个css像素最终由几个物理像素显示，有浏览器决定
- 默认情况下在PC端，一个css像素 = 一个物理像素
视口（viewport）
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口大小，来观察css像素和物理像素的比值
- 默认情况下
视口的宽度 1920px （CSS像素）
1920px 物理像素
- 此时，css像素和物理像素比值为1:1
- 放大两倍的情况：
视口宽度 960px （CSS像素）
1920px （物理像素）
- 此时 css像素和物理像素比值是1:2
- 我们可以通过改变视口的大小，来改变css像素和物理像素的比值
-->
<div class="box1"></div>
</body>
</html>
6、移动端像素
<!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>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<title>Title</title>
<style>
.box1{
width: 900px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
电脑屏幕 24寸 1920x1080
iphone 4.7寸 750 x 1334
智能手机中的像素要 远远小于 计算机的像素
问题：
一个宽度为900px的网页如何在iphone6中显示？
默认情况下，移动端的网页视口都会将视口设置为980px(css像素)
以确保pc端网页可以在移动端正常访问
但是网页宽度超过了980px，移动端的浏览器会自动对网页缩放，以显示完整的网页
所以基本大部分的PC端网页都可以在移动端中正常浏览，但是往往都不会有一个好的体验
为了解决这个问题，大部分网站都会专门为移动端设计网页
https://m3.material.io/
-->
<div class="box1">
</div>
</body>
</html>
7、移动端的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--device-width设置视口大小，表示设备的宽度（完美视口）-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--
移动端默认的视口是980px（CSS像素）
默认情况下，移动端的像素比就是 980/移动端宽度 (980/750)
如果直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好的，
会导致网页中的内容非常的小
在编写移动端的页面时，唏嘘要确保有一个比较合理的像素比
lcss像素 对应2个物理像素
lcss像素 对应3个物理像素
- 可以通过meta标签设置视口大小
- 每一款移动设备设计时，都会有一个最佳的像素比
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小，我们将其称为完美视口
将网页的视口设置为完美视口
<meta name="viewport" content="width=device-width, initial-scale=1" >
结论：以后再写移动端的页面，就把上面的先写上
-->
<div class="box1"></div>
</body>
</html>
8、视口
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 6.4vw;
height: 4.667vw;
background-color: red;
}
</style>
</head>
<body>
<!--
不同设备的完美视口是不一样的
iPhone6 --375px
iPhone6plus --414px
由于不同设备视口和像素比不同，所以同样的375px在不同设备下，意义是不一样de
比如在iPhone6中 375px 就是全屏的
在iPhone6plus中 375px 就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了
vm 表示的是视口的宽度（viewport width）
- 100vw = 一个视口的宽度
- 1vw = 1% 视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度
750px 1125px
设计图
750px
使用vw作为单位
100vw
创建一个48px x 35px
100vm = 750px （设计图的像素） 0.133333333vm = 1px
6.4vm = 48px （设计图的像素）
4.667vm = 35px
-->
<div class="box1">
</div>
</body>
</html>
9、vm的适配
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
/*
网页中字体大小最小是12px，不能设置一个比12还小的字体
如果设置了一个小于12px像素的字体，则字体自动设置为12px
*/
font-size: 5.33333333vm;
}
.box1{
/*
rem
- 1rem = 1 html 的字体大小
- 1rem = 40px(设计图像素）
*/
width: 1.2rem;
height: 0.875rem;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
创建一个48px x 35px
100vm = 750px （设计图的像素） 0.133333333vm = 1px
6.4vm = 48px （设计图的像素）
4.667vm = 35px
-->
<div class="box1"></div>
</body>
</html>
10、响应式布局
<!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>Document</title>
<style>
/*
使用媒体查询
语法：@media 查询规则{}
媒体类型-media type
all 表示所哟设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
- 可以使用逗号，连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有
- only 的使用主要是为了兼容一些老版本的浏览器
*/
/*@media print, screen{*/
/* body{*/
/* background-color: #bfa;*/
/* }*/
/*}*/
@media only screen {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
<!--
响应式布局
- 网页可以根据不同的设备和窗口大小呈现不同的效果
- 使用响应式布局，可以使一个网页适用于不同的设备
- 相应布局的关键就是 媒体查询
- 通过媒体查询，可以为不同的设置，或设备不同状态分别设置样式
-
-->
</body>
</html>
11、媒体查询
<!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>Document</title>
<style>
/*
媒体特性
width: 视口的宽度
height： 视口的高度
min-width: 视口的最小宽度(视口大小大于指定宽度时生效）
max-width: 视口的最大宽度（视口大小小于指定宽度时生效）
*/
/*@media (max-width:600px) {*/
/* body{*/
/* background-color: #bfa;*/
/* }*/
/*}*/
/*
样式切换的分界点，我们称其为断点，也就是网页的样式在这个断点发生变化
一般比较常用的断点
小于768px 超小屏幕 max-width=768px
大于768px 小屏幕 min-width=768px
大于992px 中型屏幕 min-width=992px
大于1200px 大屏幕 min-width=1200px
*/
@media not screen and (min-width:500px)and (max-width:900px) {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
</body>
</html>
练习-15-再做导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.nav {
width: 1210px;
height: 48px;
line-height: 48px;
margin: 50px auto;
background-color: #E8E7E3;
/*将nav设置为弹性容器*/
display: flex;
flex-direction: row;
}
.nav li {
/* 设置增长系数 */
flex-grow: 1;
}
.nav a {
display: block;
color: #808080;
text-decoration: none;
font-size: 16px;
text-align: center;
}
.nav a:hover {
background-color: #636363;
color: white;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Brower Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
</body>
</html>
练习-16-淘宝的导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*设置外层的容器*/
.nav{
width: 100%;
}
/*设置每一行的容器*/
.nav-inner{
/* 设置为弹性容器 */
display: flex;
}
.item{
width: 20%;
/*background-color: #bfa;*/
/*flex: auto;*/
/*主轴上空白的分布*/
justify-content: space-around;
text-align: center;
}
.item img{
/*设置图片的宽度和父元素一样*/
width: 100%;
}
.item a{
color: #333;
font-size: 16px;
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<!--创建一个外层的容器-->
<nav class="nav">
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="../img/16/1.png" alt="">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/2.png" alt="">
<span>好吃</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/3.png" alt="">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/4.png" alt="">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/5.png" alt="">
<span>外卖</span>
</a>
</div>
</div>
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="../img/16/6.png" alt="">
<span>天猫超市</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/7.png" alt="">
<span>重置中心</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/8.png" alt="">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/9.png" alt="">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/10.png" alt="">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
</html>
练习-17-移动端的页面
<!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>爱学习</title>
<link rel="stylesheet" href="../css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<!--创建头部容器-->
<header class="top-bar w">
<div class="meau-btn ">
<a href="#"><i class="fas fa-stream"></i></a>
</div>
<h1 class="logo"><a href="#">爱学习</a></h1>
<div class="search-btn">
<a href="#"> <i class="fas fa-search"></i> </a>
</div>
</header>
<!--banner-->
<div class="banner">
<a href="#"> <img src="../img/2-min.jpg" alt=""> </a>
</div>
<nav class="menu">
<a class="course" href="#"> <i class="fas fa-book"></i> 我的课程 </a> <a class="star" href="#"> <i
class="fas fa-chalkboard-teacher"></i> 明星讲师 </a> <a class="sub" href="#"> <i
class="fas fa-subscript"></i> 我的订阅 </a> <a class="download" href="#"> <i
class="fas fa-cloud-download"></i> 我的下载 </a>
</nav>
<!--课程列表-->
<div class="course-list">
<!--课程的标题-->
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<!--列表容器-->
<div class="item-list">
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<!--课程的标题-->
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<!--列表容器-->
<div class="item-list">
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<!--课程的标题-->
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<!--列表容器-->
<div class="item-list">
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
</body>
</html>
练习-18-美图响应式页面
<!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>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
<!--
https://www.meitu.com/
响应式设计的网页
1. 移动端优先
2. 渐进增强
-->
<div class="top-bar-wrapper">
<!-- 外部容器 -->
<div class="top-bar">
<!--左侧菜单-->
<div class="left-meau">
<!-- 创建菜单的图标 -->
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 创建一个菜单 -->
<ul class="nav">
<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="#"> <i class="fas fa-search"></i> </a> <span>搜索Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!--用户信息-->
<div class="user-info">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</body>
</html>
十一、小米商城首页练习
见源码地址如下：
=“avatar”>
令狐冲
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
最新课程
更多+ <div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!--封面-->
<div class="cover">
<img src="../img/2-min.jpg" alt="">
</div>
<!--小标题-->
<h3 class="coures-title">
摄影课程
</h3>
<!--用户信息-->
<div class="user-info">
<div class="avatar">
<img src="../img/17/2.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
练习-18-美图响应式页面
<!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>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
<!--
https://www.meitu.com/
响应式设计的网页
1. 移动端优先
2. 渐进增强
-->
<div class="top-bar-wrapper">
<!-- 外部容器 -->
<div class="top-bar">
<!--左侧菜单-->
<div class="left-meau">
<!-- 创建菜单的图标 -->
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 创建一个菜单 -->
<ul class="nav">
<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="#"> <i class="fas fa-search"></i> </a> <span>搜索Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!--用户信息-->
<div class="user-info">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</body>
</html>
十一、小米商城首页练习
见源码
扫一扫
7211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
