新增语义化标签
- 着重'语义',着重'颜值'
- section: 一个内容区块
- article: 与上下文无关的独立内容
- aside: 与 article 搭配使用,与 article 内容相关的辅助信息
- header: 头部标题
- footer: 尾部标题
- nav: 导航链接
- figure: 一段独立流内容
- main: 主要内容
- demo演示: 先搭好基本的骨架(利用计算宽度/高度,完成布局[而不是使用position])
<!--
- 头部
- 中部
- 左边小块导航
- 中间主内容
- 上,下 两小块内容
- 上
- 头部
- 中间内容
- 尾部
- 下
- 头部
- 中间内容
- 尾部
- 右边小块说明文字
- 尾部
-->
<!DOCTYPE html>
<html>
<head>
......
<style>
* {
padding: 0;
margin: 0;
}
html,body {
height: 100%;
}
header,footer {
height: 50px;
line-height: 50px;
text-align: center;
background-color: orange;
}
section {
height: calc(100% - 100px); /*计算高度*/
}
nav,aside {
width: 200px;
height: 100%;
background-color: royalblue;
float: left;
}
main {
width: calc(100% - 400px); /*计算宽度*/
height: 100%;
float: left;
}
</style>
</head>
<body>
<header>
头部
</header>
<section>
<nav></nav> <!--导航-->
<main></main> <!--主内容-->
<aside></aside> <!--右边内容-->
</section>
<footer>
尾部
</footer>
<script></script>
</body>
</html>
- 完整演示
<!DOCTYPE html>
<html>
<head>
......
<style>
* {
padding: 0;
margin: 0;
}
html,body {
height: 100%;
}
header,footer {
height: 50px;
line-height: 50px;
text-align: center;
background-color: orange;
}
section {
height: calc(100% - 100px);
}
nav,aside {
width: 200px;
height: 100%;
background-color: royalblue;
float: left;
}
main {
width: calc(100% - 400px);
height: 100%;
float: left;
}
article header{
background-color: blueviolet;
}
article footer {
background-color: blueviolet;
}
.first,.second { /*上,下块内容空间*/
height: 40%;
}
.middle {
height: 20%; /*上,下块内容之间空出的空间*/
}
</style>
</head>
<body>
<header>
头部
</header>
<section>
<nav>
<figure>导航内容</figure>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</nav>
<main>
<article class="first">
<header>主内容头部</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam perferendis laborum eum rem error facere accusantium ab odio quae laudantium porro quam repudiandae sunt eveniet sint debitis cupiditate magnam eius.</section>
<footer>主内容尾部</footer>
</article>
<article class="middle"></article>
<article class="second">
<header>主内容头部</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam perferendis laborum eum rem error facere accusantium ab odio quae laudantium porro quam repudiandae sunt eveniet sint debitis cupiditate magnam eius.</section>
<footer>主内容尾部</footer>
</article>
</main>
<aside>
<figure>说明文字</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ut eveniet fugiat delectus voluptate dolorum molestiae beatae dolor eligendi provident omnis corporis architecto asperiores praesentium est magnam esse error nostrum!</p>
</aside>
</section>
<footer>
尾部
</footer>
<script></script>
</body>
</html>
属性选择器
<head>
......
<style>
[class] { /*选择所有具有class属性的元素*/
background-color: aquamarine;
}
</style>
</head>
<body>
<!--所有class属性元素都有样式-->
<div class="box1">1111111</div>
<div class="box2">33333333</div>
<div class="box2">44444444</div>
<div class="box1">2222222</div>
</body>
- tag[class=xxx]:选择对应 class=xxx 的tag元素(注意:这里表示'完全匹配')
<head>
......
<style>
div[class=box1] { /*运用*/
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1">1111111</div> <!--样式-->
<div class="box2">33333333</div>
<div class="box2">44444444</div>
<div class="box1">2222222</div> <!--样式-->
......
</body>
- 综合示例
<head>
......
<style>
input[name] { /*所有name属性的运用背景色样式*/
background-color: blueviolet;
}
input[type=email] {
color: coral;
}
</style>
</head>
<body>
<div>
<h1>XX页面</h1>
用户名: <input type="text" name="" id="" value="" /><br>
密码: <input type="password" name="" id="" value="" /><br>
年龄: <input type="number" name="" id="" value="" /><br>
邮箱: <input type="email" name="" id="" value="" /> <!--样式-->
</div>
</body>
- "~": 表示包含
......
<style>
......
div[class~=box3] { /*只要属性包含box3,就应用样式*/
border: 1px solid red;
}
</style>
.......
<div class="box1 box3">1111111</div>
-
模糊匹配(了解)
-
class^=b: 以'b'开头
-
class$=b: 以'b'结尾
-
class*=b: 包含'b'字符
-
伪类选择器
- x:first-child 匹配子集的第一个元素
- x:last-child
- x:nth-child(n) 匹配索引值为n的子元素
- x:only-child 匹配独生子女(唯一的子元素,多个孩子就无效,这个属性用得比较少)
- x:root 匹配文档的根元素,一般指'html'
- x:empyt 匹配没有任何子元素的元素(孤独终老)
- 示例1: 删除最后一个子元素的外边距,使其和旁边两个子元素 保持在同一位置(不至于被'挤下来')
......
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
<style>
* {
padding: 0;
margin: 0;
}
.container {
height: 100px;
width: 940px; /*容器总的宽度*/
}
.container div {
height: 100px;
width: 300px;
background-color: red;
float: left;
margin-right: 20px; /*子元素总共占据宽度320*/
}
.container div:last-child {
margin-right: 0; /*删除边距,避免被挤下来*/
}
</style>
</head>
<body>
<div></div>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
......
- list示例
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul li:first-child {
background-color: red;
}
ul li:last-child {
background-color: greenyellow;
}
ul li:nth-child(2) {
background-color: #31B0D5;
}
/* li:nth-child(2) { 这里省略父元素也是OK的
background-color: #1B6D85;
} */
/* ul li:nth-child(2n+1) { 选择偶数项/奇数项
background-color: #31B0D5;
} */
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script type="text/javascript" src="js/jquery-3.4.1.min.js">
</script>
</body>
- 示例: 独生子女才生效
<head>
<style>
* {
padding: 0;
margin: 0;
}
div p:only-child {
background-color: #255625;
}
</style>
</head>
<body>
<div>
<p>1111111</p> <!--有两孩子,不生效-->
<p>22222222</p>
</div>
<div>
<p>111111111</p> <!--有效果-->
</div>
</body>
- 示例:无依无靠才生效(注意:若包含回车,空格,也不会生效)
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 100px;
}
div:empty {
background-color: darkcyan;
}
</style>
......
<body>
<div>
<!--无效果-->
</div>
<div></div> <!--有效果-->
<script type="text/javascript" src="js/jquery-3.4.1.min.js">
</script>
</body>
- 示例: root
......
<style>
* {
padding: 0;
margin: 0;
}
/* :root,body {
height: 100%;
background-color: yellow;
} */
html,body { /*一样的效果*/
height: 100%;
background-color: yellow;
}
</style>
......
目标伪类选择器 tag:target
-
选择匹配tag的所有元素,且匹配元素被相关URL指向
-
固定位置菜单示例
<!DOCTYPE html>
<html>
<head>
......
<style>
* {
padding: 0;
margin: 0;
}
.container {
position: fixed;
right: 0;
top: 300px;
}
ul {
list-style: none;
}
li {
height: 40px;
line-height: 40px;
border: 1px solid black;
text-align: center;
}
.content {
height: 1000px;
}
div.content:target { /*当class=content被选中时,应用样式*/
background-color: green; /*当元素没有被选中时,是不会运用这个样式的*/
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#d1">秒杀</a></li>
<li><a href="#d2">给力促销</a></li>
<li><a href="#d3">特殊商品</a></li>
<li><a href="#d4">倒计时即将开始</a></li>
</ul>
</div>
<div class="content" id="d1">秒杀</div>
<div class="content" id="d2">给力促销</div>
<div class="content" id="d3">特殊商品</div>
<div class="content" id="d4">倒计时即将开始</div>
......
</body>
</html>
- "手风琴"示例
<!DOCTYPE html>
<html>
<head>
......
* {
padding: 0;
margin: 0;
}
.content { /*平常看不见,隐藏起来*/
display: none;
}
.content:target { /*等被选中的时候,就显示内容*/
display: block;
}
</style>
</head>
<body>
<div>
<a href="#aaa">aaa</a>
<div id="aaa" class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod saepe dolores iusto dignissimos suscipit esse veritatis tempora fugiat expedita veniam sunt magni eligendi deserunt voluptas illo blanditiis vero vitae fuga!
</div>
</div>
<div>
<a href="#bbb">bbb</a>
<div id="bbb" class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod saepe dolores iusto dignissimos suscipit esse veritatis tempora fugiat expedita veniam sunt magni eligendi deserunt voluptas illo blanditiis vero vitae fuga!
</div>
</div>
<div>
<a href="#ccc">ccc</a>
<div id="ccc" class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod saepe dolores iusto dignissimos suscipit esse veritatis tempora fugiat expedita veniam sunt magni eligendi deserunt voluptas illo blanditiis vero vitae fuga!
</div>
</div>
......
</body>
</html>
UI元素状态伪类选择器(针对表单元素的处理)
-
tag:enabled 匹配所有用户界面(form表单)中处于可用状态的tag元素
-
tag:disabled 匹配所有用户界面(form表单)中处于不可用状态的tag元素
-
tag:focus 匹配所有用户界面(form表单)中处于"鼠标焦点"的tag元素
-
tag:checkd 匹配所有用户界面(form表单)中处于选中状态的tag元素
-
tag:selection 匹配tag元素中被用户选中或处于高亮状态的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
......
<style>
* {
padding: 0;
margin: 0;
}
input:enabled { /*可用元素,运用样式*/
background-color: green;
}
input:disabled { /*不可用元素,运用样式*/
background-color: red;
}
input:focus { /*当鼠标焦点作用于该元素时,运用样式*/
background-color: yellow;
}
input[type=checkbox] {
appearance: none; /*首先删除checkbox原有的样式,才可以运用样式*/
height: 15px; /*给checkbox添加样式*/
width: 15px;
border: 1px solid black;
}
input:checked {
background-color: purple; /*当checkbox被选中时,运用样式(必须先删除默认样式)*/
}
div::selection { /*当div容器被选中的时候(与表单元素无关),运用样式 (注意格式两个"::")*/
background-color: #5BC0DE;
color: #CE8483;
}
</style>
</head>
<body>
<form action="">
用户名:<input type="text" name="" id="" value="" /><br>
密码:<input type="password" name="" id="" value="" /><br>
记住我:<input type="checkbox" name="" id="" value="" /><br>
<input type="submit" name="" id="" value="提交" disabled/>
</form>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit......
</div>
......
</body>
</html>
否定伪类选择器: not
-
在原有的基础上,加上not
-
语法看上去有点别扭...
......
<style>
ul li:not(:first-child) { /*注意not的格式*/
background-color: green;
}
ul li:first-child {
background-color: red;
}
</style>
......
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
......
</body>