css学习(4)
一、css学习
1. 1 strong与b、em与i
表现形态都是 文本加粗 和 文本斜体
区别:是否具备语义化
1. 2.引用标签
blockquote : 引用大段的段落解释
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词
address : 引用文档地址信息
cite : 引用著作的标题
1. 3.iframe标签
可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
<iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe>
<iframe src="https://www.taobao.com" frameborder="0" scrolling="no"></iframe>
1. 4. br 与 wbr
1. br 就是换行、
2. wbr 就是软换行(在指定时机进行换行)
1. 5. pre 与 code
针对网页中的程序代码的显示效果。
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
</code></pre>
1. 6.map 与 area
给特殊图形添加链接,area能添加的热区的形状:矩形、圆形、多边形。
<!-- <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt=""> -->矩形
<!-- <area shape="circ" coords="300 130 50" href="" alt=""> -->圆形
<area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">多边形
1. 7. embed 与 object
给flash和一些插件进行渲染操作的标签。
1. 8. audio 与 video
引入音频与视频的标签。属于H5的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <audio src="./img/johann_sebastian_bach_air.mp3" controls loop autoplay></audio> -->
<!-- <video src="./img/Intermission-Walk-in_512kb.mp4" controls></video> -->
<video>
<source src="./img/Intermission-Walk-in.ogv"></source>
<source src="./img/Intermission-Walk-in_512kb.mp4"></source>
</video>
<div style="position: relative; height:250px; overflow: hidden;">
<video style="min-width:100%; min-height:100%;" loop="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-fullscreen="false" x5-video-player-type="h5" id="introvideo" autoplay="">
<source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4" type="video/mp4">
<source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.webm" type="video/webm">
</video>
</div>
</body>
</html>
1. 9. 文字注解
- ruby标签定义ruby注释(中文注音或字符),rt标签定义字符(中文注音或字符)的解释或发音。
- bdo标签可覆盖默认的文本方向。
<style>
span{direction: rtl;unicode-bidi: bidi-override;}
</style>
</head>
<body>
<ruby>
寒<rt>han</rt>冬
</ruby>
<p>
<bdo dir="rtl">创作中心</bdo>创作中心
</p>
<p>
<span>创作中心</span>创作中心
</p>
</body>
1. 10、扩展link标签
1、添加网址标题栏前的小图标:
<link rel="icon" type="/image/x-icon" href="">
2、加快访问速度
<link rel="dns-prefetch" href="远程IP地址">
1. 11、扩展meta标签
1、定义可描述的内容及辅助信息
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="renderer" content="webkit">
2、功能
渲染模式、刷新、缓存
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="">
二、HTML语义化
2.1 HTML5新语义化标签
header:页眉
footer:页脚
main:主体
hgroup:标题组合
nav:导航
header、footer、main在一个网页中只能出现一次
- artcle:独立的内容
- aside:辅助信息的内容
- section:区域
- figure:描述图像或视频
- figcaption:描述图像或视频的标题部分
- datalist:选项列表
- details/summary:文档细节/文档标题
- progress/meter:定义进度条/定义度量范围
- time:定义日期或时间
- mark:带有记号的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<ul>
<li>
<figure>
<img src="./img/youku.jpg" alt="">
<figcaption>
新水果篮子 高甜
<br>
十二生肖恋上美少女
</figcaption>
</figure>
</li>
</ul>
<ul>
<li>
<figure>
<img src="./img/youku.jpg" alt="">
<figcaption>
新水果篮子 高甜
<br>
十二生肖恋上美少女
</figcaption>
</figure>
</li>
</ul>
<ul>
<li>
<figure>
<img src="./img/youku.jpg" alt="">
<figcaption>
新水果篮子 高甜
<br>
十二生肖恋上美少女
</figcaption>
</figure>
</li>
</ul>
</section>
<section>
<input type="text"list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="ac"></option>
<option value="ad"></option>
<option value="ae"></option>
</datalist>
<details open>
<summary>HTML</summary>
<p>超文本标记语言</p>
</details>
<progress min="0" max="10" value="5"></progress>
<meter min="0" max="100" value="35" low="10" high="60"></meter>
<p>
今天是<time title="2-14">情人节</time>,街上人很多
</p>
<p>
今天是<mark>情人节</mark>,街上人很多
</p>
</section>
<section></section>
</article>
<aside>
</aside>
</main>
<footer></footer>
</body>
</html>
三、flex弹性盒模型
3.1 flex-direction
控制子项整体布局方向,是从左向右还是从右向左,是从上往下还是从下往上。
3.2 flex-wrap
控制子项整体单行显示还是换行显示
3.3 flex-flow
是flex-direction和flex-wrap缩写,表示flex布局的flow流动特性。
第一个值表示方向,第二个值表示换行,中间用空格隔开
#box2{ width:300px;
height:300px;
border:1px black solid;
margin:20px auto;
display: flex;
/* flex-wrap:wrap; flex-direction: column; */ flex-flow: column wrap;}
#box2 div{ width:50px;
height:50px;
color:white;
line-height: 50px;
text-align: center;
background:red;}
3.4 justify-content
决定主轴方向上子项的对齐和分布方式
#box3{ width:300px;
height:300px;
border:1px black solid;
margin:20px auto;
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;}
#box3 div{ width:50px;
height:50px;
color:white;
line-height: 50px;
text-align: center;
background:red;}
3.5 作用在flex子项上的CSS属性
3.6 order
<style>
#box{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex;}
#box div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
/* #box div:nth-child(2){ order:1;}
#box div:nth-child(3){ order:-1;} */
</style>
</head>
<body>
<!-- <div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div> -->
3.7 flex-grow
优先级低于width
<style>
#box{ width:300px;
height:300px;
border:1px black solid;
margin:20px auto;
display: flex;
}
#box div{ width:50px;
height:50px;
color:white;
line-height: 50px;
text-align: center;
background:red;
}
/* #box div:nth-child(2){ order:1;}
#box div:nth-child(3){ order:-1;} */
#box div:nth-child(2){ background:yellow;
color:black;
flex-grow: 1;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
3.8flex-shrink
#box2 div:nth-child(2){ background:yellow;
color:black;
flex-shrink:
<div id="box2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
3.9 flex-basis
相当于给定宽度,但规定的宽度不能大于父容器的最大宽度,优先级比width高
#box2 div:nth-child(2){ background:yellow; color:black;
flex:1;
flex-basis: 150px;
width:150px
}
<div id="box2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
3.10 flex
优先级高于 flex-grow
flex-grow、 flex-shrink、flex-basis 的组合
3.11 align-self
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex;}
#box div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
/* #box div:nth-child(2){ order:1;}
#box div:nth-child(3){ order:-1;} */
#box div:nth-child(2){ background:yellow; color:black; flex-grow: 1;}
#box div:nth-child(3){ background:blue; color:black; flex-grow: 2;}
#box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; align-items: flex-end;}
#box2 div{ width:50px; color:white; line-height: 50px; text-align: center; background:red;}
#box2 div:nth-child(2){ background:yellow; color:black; /* flex:1; *//* flex-basis: 250px; */ /* flex-shrink: 2; */ align-self: center;}
#box2 div:nth-child(1){ align-self: center;}
</style>
</head>
<body>
<!-- <div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div> -->
<div id="box2">
<div>1</div>
<div>测试文字</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
四、Grid网格布局
4.1布局内容
4.2grid-template-columns和grid-template-rows
对网格进行横纵划分,形成二维布局,单位可以是像素、百分比、自适应以及fr单位(网格剩余空间比例单位)
<style>
.box{ width:300px; height:300px; border:1px gray dotted; display: grid;
/* grid-template-rows: 100px auto 25%;
grid-template-columns: 100px 100px 200px 100px; */
/* grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr; */
grid-template-rows: repeat(3 , 1fr);
grid-template-columns: repeat(3 , 1fr);
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
4.2 grid-template-areas 和 grid-template
注意ax的排布,写法是否准确
grid-template-columns: repeat(3,1fr);}*/
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";}
.box2 div{ background: red; border: 1px black solid}
.box2 div:nth-child(1){ grid-area: a1;}
.box2 div:nth-child(2){ grid-area: a2;}
.box2 div:nth-child(3){ grid-area: a3;}
</style>
</head>
<body>
<div class="box2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
4.3 grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid;
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3";
/1fr 1fr 1fr;
grid-column-gap:10px;
grid-row-gap:20px;}
4.4 justify-items 和align-items
justify-items:水平拉伸、左中右对齐
align-items:垂直拉伸上中下对齐
place-items可以让 justify-items 和align-items属性写在单个声明中( 纵、横)
justify-items
.box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
justify-items: start;}
align-items
.box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
justify-items: start;
align-items: end;}
4.5 justify-content和align-content
justify-content网格元素的水平方式
align-content网格元素的垂直方式
4.6Grid案例
1)骰子的点数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
display:grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
}
.box div{ width:20px; height:20px; background:black; border-radius: 50%;}
.box div:nth-child(1){ grid-area: 2 / 2 / 3 / 3; }
.box2{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
display:grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
}
.box2 div{ width:20px; height:20px; background:black; border-radius: 50%;}
.box2 div:nth-child(2){ grid-area: 3 / 3 / 4 / 4; }
.box3{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
display:grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box3 div{ width:20px; height:20px; background:black; border-radius: 50%;}
.box3 div:nth-child(2){ grid-area: a5; }
.box3 div:nth-child(3){ grid-area: a9; }
.box4{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
display:grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box4 div{ width:20px; height:20px; background:black; border-radius: 50%;}
.box4 div:nth-child(2){ grid-area: a3; }
.box4 div:nth-child(3){ grid-area: a7; }
.box4 div:nth-child(4){ grid-area: a9; }
.box5{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
display:grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box5 div{ width:20px; height:20px; background:black; border-radius: 50%;}
.box5 div:nth-child(2){ grid-area: a3; }
.box5 div:nth-child(3){ grid-area: a7; }
.box5 div:nth-child(4){ grid-area: a9; }
.box5 div:nth-child(5){ grid-area: a5; }
.box6{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
display:grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box6 div{ width:20px; height:20px; background:black; border-radius: 50%;}
.box6 div:nth-child(2){ grid-area: a3; }
.box6 div:nth-child(3){ grid-area: a7; }
.box6 div:nth-child(4){ grid-area: a9; }
.box6 div:nth-child(5){ grid-area: a4; }
.box6 div:nth-child(6){ grid-area: a6; }
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2)百度搜索风云榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{ width: 280px; height: 352px; margin: 20px auto; display: grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(4 , 1fr);
grid-template-areas:
"a1 a2 a2"
"a3 a2 a2"
"a4 a4 a5"
"a6 a7 a7";
grid-gap: 6px 6px;}
.box div{ background: red;}
.box div:nth-child(1){ grid-area: a1;}
.box div:nth-child(2){ grid-area: a2;}
.box div:nth-child(3){ grid-area: a3;}
.box div:nth-child(4){ grid-area: a4;}
.box div:nth-child(5){ grid-area: a5;}
.box div:nth-child(6){ grid-area: a6;}
.box div:nth-child(7){ grid-area: a7;}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>