web前端之CSS
第二部分 CSS3
Cascading Style Sheet 层叠样式表CSS：负责显示逻辑
Hyper Text Marked Language 超文本标记语言HTML：负责数据逻辑
CSS主要有两大类的功能：
- 对页面的字体、颜色、外观控制的非常细腻，让网页更加有活力
- 通过CSS来控制整个网页的风格
CSS可以向HTML一样单独成文件使用，xxx.css，或者嵌入到html当中使用
2.1 CSS样式表的基本使用
2.1.1 链接外部样式文件
通过link标签将外部的css文件导入到我们当前的html文件中。
好处：将数据和显示分离，同一份css文件也可以被多个html共用。
坏处：浏览器先加载数据信息，再读取数据信息中的link标签，再加载link所导入的文件，相对而言比较慢
/*将来 在使用该css文件的html中 所有的table都是背景黄色 宽度为400px*/
table {background-color: #ff0;width: 400px;
}
td {background-color: #00f;font-family: "楷体";font-size: 20px;text-shadow: 20px 6px 2px #333;
}
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><link href="outer.css" rel="stylesheet" type="text/css"></head><body><table><tr><td>一行一列</td><td>一行二列</td></tr><tr><td>二行一列</td><td>二行二列</td></tr></table></body>
</html>
2.1.2 导入外部样式文件
通过@import导入，但是不推荐这么使用，有些浏览器不支持此操作的。
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>@import url("outer.css");</style></head><body><table><tr><td>一行一列</td><td>一行二列</td></tr><tr><td>二行一列</td><td>二行二列</td></tr></table></body>
</html>
2.1.3 使用内部样式定义
好处：统一加载，相对较快
坏处：数据和样式揉在一起，不方便管理，而且css样式也不方便变共享
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>table {background-color: #ff0;width: 400px;}td {background-color: #00f;font-family: "楷体";font-size: 20px;text-shadow: 20px 6px 2px #333;}</style></head><body><table><tr><td>一行一列</td><td>一行二列</td></tr><tr><td>二行一列</td><td>二行二列</td></tr></table></body>
</html>
2.1.4 使用内联样式
直接写在相对应的标签style属性中
坏处：冗余过大
好处：针对性最强，总有几个特别的不跟大部队走
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><link href="outer.css" rel="stylesheet" type="text/css"><style>table {background-color: rgb(255, 0, 13);width: 400px;}</style></head><body><table ><tr><td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">一行一列</td><td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">一行二列</td></tr><tr><td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">二行一列</td><td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">二行二列</td></tr></table></body>
</html>
2.2 CSS选择器
名称 {属性：属性值;...
}
选择器的作用是啥？指定符合要求的一些元素进行样式的变化
2.2.1 元素选择器
选择元素标签
标签名 {属性：属性值;...
}
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>table {background-color: #ff0;width: 400px;}td {background-color: #00f;font-family: "楷体";font-size: 20px;text-shadow: 20px 6px 2px #333;}</style></head><body><table><tr><td>一行一列</td><td>一行二列</td></tr><tr><td>二行一列</td><td>二行二列</td></tr></table></body>
</html>
2.2.2 属性选择器
根据标签中属性的特点来进行选择的
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><link href="outer.css" rel="stylesheet" type="text/css"><style>/*所有的div们*/div {width: 300px;height: 30px;background-color: #eee;border: 1px solid black;padding: 10px;}/*具有id属性的div们*/div[id] {background-color: #aaa;}/*具有id属性且id属性值中包含xx的div们*/div[id*=xx] {background-color: #999;}/*具有id属性且id属性值中以xx开头的div们*/div[id^=xx] {background-color: #555;}/*具有id属性且id属性值中以xx结尾的div们*/div[id$=xx] {background-color: #333;}/*具有id属性且id属性值等于xx的div们*/div[id=xx] {background-color: #111;color: aliceblue;}</style></head><body><div>没有任何属性的div</div><div id="a">带id属性的div 属性和xx无关</div><div id="zzxxyy">带id属性但包含xx的div</div><div id="xxyy">带id属性且以xx开头的div</div><div id="zzxx">带id属性且以xx结尾的div</div><div id = "xx">带id属性且等于xx的div</div></body>
</html>
2.2.3 id选择器
通过id值来进行选择
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>div {width: 200px;height: 30px;background-color: #ddd;padding: 10px;}/*id为xx的标签们*/#xx {border: 2px dotted lightblue;background-color: tomato;}/*id为xx的p标签*/p#xx {border: 2px dotted aqua;background-color: indigo;}/*id为yy的p标签*/p#yy {border: 2px dotted rgb(0, 255, 157);background-color: rgb(235, 252, 8);}</style></head><body><div>和我啥关系也没有</div><div id="xx">我的id是xx</div><p id="xx">我是p</p><div id="yy">我是yy的div</div><p id="yy">我是p</p></body>
</html>
2.2.4 类选择器
类选择器主要看的是class属性，基本上每个标签都有id、class、style属性
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>/*所有class属性为myclass的标签们*/.myclass {width: 240px;height: 40px;background-color: #ddd;}/*class属性为myclass的div标签*/div.myclass {border: 1px double black;background-color: #888;}</style></head><body><div class="myclass">class属性为myclass的div</div><p class="myclass">class属性为myclass的p</p></body>
</html>
2.2.5 包含选择器
指的是在某一个元素之下的所有元素的选择
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>div {width: 300px;background-color: #ddd;margin: 5px;}/*在div之下所有class为a的标签*/div .a{width: 200px;background-color: #888;border: 1px dotted lightcoral;}/*在div之下所有section标签*/div section {border: 10px solid yellow;}</style></head><body><div>没有任何元素的div</div><div><p class="a">在div中的p，class为a</p><section><div class="a">在seciton中的div class为a</div></section></div><section><div>在section中的div</div></section></body>
</html>
2.2.6 子选择器
父子关系
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>div {width: 350px;height: 60px;background-color: #ddd;margin: 5px;}/*div标签下所有class属性为a的子标签*/div>.a {width: 200px;height: 35px;border: 1px dotted black;background-color: #888;}/*div标签下所有span子标签*/div>span{font-family: "楷体";font-size: 20px;background-color: aqua;}</style></head><body><div><p class="a">我是div中的p class为a</p></div><div><section><p class="a">我是div中的seciton中的p class为a</p></section></div><div><span>我是span1</span><span>我是span2</span><p><span>我是span3</span></p></div></body>
</html>
2.2.7 兄弟选择器
同级别
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>#android ~ .long {background-color: khaki;}</style></head><body><div class="long">呵呵1</div><div id="android">呵呵2</div><div class="long">呵呵3</div><p class="long">呵呵4</p><p class="long">呵呵5</p></body>
</html>
2.2.8 选择器组合
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>div , #xx , .myclass {width: 200px;height: 20px;background-color: aquamarine;}</style></head><body><div>div</div><p id="xx">p</p><span class="myclass">span</span></body>
</html>
2.2.9 伪元素选择器
不是元素，但是也可被更改的一些内容
- :first-letter：首字母，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
- :first-line：首行，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
- :before：在元素之前
- :after：在元素之后
变首字母的
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>span {display: block;}span::first-letter {color: #f00;font-size: 50px;}p::first-letter {color: #f00;font-size: 50px;}</style></head><body><span>这是span</span><p>这是p</p></body>
</html>
变首行的
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>span {display: block;}span::first-line {color: #f00;font-size: 50px;}p::first-line {color: #f00;font-size: 50px;}</style></head><body><span>这是span第一行<br>第二行</span><p>这是p第一行<br>第二行</p></body>
</html>
before与after结合content属性来使用
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>div::before {content:"这是一个div"}div::after {content: url("logo.jpg");}div>div.no:after {content:"牛B Plus";}p {counter-increment: pcounter;}p::before {content: "第" counter(pcounter) "页";}p::after {content: counter(pcounter,lower-roman);}/*decimal lower-alpha lower-roman upper-xx*/</style></head><body><div>div01</div><div>div02</div><div>div03</div><div><div class="no">是不是我？</div></div><p>这是第1端</p><p>这是第2端</p><p>这是第3端</p><p>这是第4端</p></body>
</html>
2.2.10 伪类选择器
标签的状态！
- :link：超链接点击之前
- :visited：超链接访问之后
- :hover：鼠标悬浮的时候
- :active：当点击的时候
- :focus：当获取焦点时
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gbk"><style>a:link {color: red;font-size: 30px;}a:visited {color: gray;font-size: 30px;}a:hover {color: greenyellow;font-size: 50px;}a:active {color: yellow;font-size: 30px;}img:hover {width: 100px;}</style></head><body><a href="http://www.123.com">呵呵呵呵呵呵呵</a><div><img src="logo.jpg" width="80px"><img src="logo.jpg" width="80px"><img src="logo.jpg" width="80px"><img src="logo.jpg" width="80px"><img src="logo.jpg" width="80px"><img src="logo.jpg" width="80px"></div></body>
</html>
2.3 文字与文本相关属性
2.3.1 文字相关属性
- color：文字的颜色
- font-family：文字的字体
- font-size：文字的大小 px或pt（打印机模式下的单位）
- font-weight：文字的加粗
- lighter：细的
- normal：普通的默认的
- bold：加粗
- bolder：更粗
- 设置数值
- font-decoration：文字划线
- none无样式
- underline下划线
- line-through：中划线
- overline：上划线
- blink：闪烁（目前的浏览器不太支持了）
- font-style：文字的样式
- text-shadow：文字的阴影 复合属性
- color：阴影颜色
- xoffset：阴影横向的偏移量 正值向右
- yoffset：阴影纵向的偏移量 正值向下
- radius：阴影的模糊程度
- text-transform：文字的大小写（英文）
- none默认
- capitalize：首字母大写
- uppercase：所有字母大写
- lowercase：所有字母小写
- line-height：文字的行高
- letter-spacing：字符之间的间距
- word-spacing：单词之间的间距
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {width: 150px;height: 40px;border: 1px solid red;font-size: 20px;font-family: '隶书';}</style></head><body><span style="color: blue;">测试文字</span><br><span style="color: #FFF;">测试文字</span><br><span style="color: #123456;">测试文字</span><br><span style="color: rgb(255, 0, 0);">测试文字</span><br><span style="color: rgba(255, 0, 0, 0.5);">测试文字</span><br><span style="color: hsl(280, 100%, 50%);">测试文字</span><br><span style="color: hsla(280, 100%, 50%, 0.5);">测试文字</span><br><span style="font-family: '楷体';">测试文字</span><br><span style="font-family: '华文行楷';">测试文字</span><br><span style="font-family: '幼圆';">测试文字</span><br><span style="font-size: 20pt;">测试文字</span><br><span style="font-style:italic;">测试文字</span><br><span style="font-style: oblique;">测试文字</span><br><span style="font-weight: lighter;">测试文字</span><br><span style="font-weight: bold;">测试文字</span><br><span style="font-weight: bolder;">测试文字</span><br><span style="font-weight: 300px;">测试文字</span><br><span style="text-decoration: underline;">测试文字</span><br><span style="text-decoration: overline;">测试文字</span><br><span style="text-decoration: line-through;">测试文字</span><br><span style="text-decoration: blink;">测试文字</span><br><span style="text-transform: lowercase;">Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk</span><br><span style="text-transform: uppercase;">Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk</span><br><span style="text-transform: capitalize;">Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk</span><br><span style="line-height: 50px;">测试文字</span><br><span style="letter-spacing:10px;">Hello eveyone my name is zhangsan how are you<br>I am fine 3Q~</span><br><span style="word-spacing:10px;">Hello eveyone my name is zhangsan how are you<br>I am fine 3Q~</span><br><hr><!--x偏移量 y偏移量 阴影模糊度 颜色--><div style="text-shadow: 10px 10px 2px red;">测试文字</div><div style="text-shadow: 10px 10px 10px red;">测试文字</div><div style="text-shadow: -10px -10px 2px red;">测试文字</div><div style="text-shadow: 0px 0px 10px red;color: red;">测试文字</div><div style="text-shadow: 10px 10px 0px red , 20px 20px 0px yellow, 30px 30px 0px blue;">测试文字</div></body>
</html>
2.3.2 文本相关属性
- text-indent：文本的缩进
- text-overflow：文本溢出
- clip溢出剪裁，前提overflow：hidden
- ellipse溢出剪裁，剪裁的部分用…表示，前提overflow：hidden
- vertical-align：垂直对齐方式
- auto：自动对齐
- baseline：基线对齐
- sub：与文本下标对齐
- super：与文本上标对齐
- top：顶端对齐
- middle：中间对齐
- bottom：低端对齐
- length：偏移距离
- text-align：水平对齐方式
- left
- right
- center
- justify两端对齐
- work-break：文本换行方式
- normal：依赖于浏览器的换行行为
- keep-all：只能在半角空格或连字符地方换行
- break-all：允许在单词中间换行
- white-space：空格处理方式-什么是是否换行
- normal：默认，到达容器边界再换行
- nowrap：强制在同一行直至结束，如果遇到
<br>再换行
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {border: 1px solid red;width: 200px;height: 50px;font-size: 15px;}</style></head><body><div>测试文字，测试文字，测试文字，测试文字</div><div style="text-indent: 20px;">测试文字，测试文字，测试文字，测试文字</div><div style="text-align: left;">测试文字，测试文字，测试文字，测试文字</div><div style="text-align: center;">测试文字，测试文字，测试文字，测试文字</div><div style="text-align: right;">测试文字，测试文字，测试文字，测试文字</div><div style="white-space: normal;">测试文字，测试文字，测试文字，测试文字</div><div style="white-space: nowrap;">测试文字，测试文字，测试文字，测试文字</div><div style="white-space: nowrap;overflow:hidden;text-overflow: clip;">测试文字，测试文字，测试文字，测试文字</div><div style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">测试文字，测试文字，测试文字，测试文字</div><div style="word-break: keep-all;">Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.</div><div style="word-break: break-all;margin-top: 50px;">Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.</div></body>
</html>
2.4 背景与边框相关属性
2.4.1 背景相关属性
- background：是一种复合属性，可以设置背景色，也可以设置背景图，还可以设置背景图重复模式
- background-color：背景色
- background-image：背景图
- background-attachment：背景图是否可以滚动
- scroll：滚动
- fixed：固定
- background-position：背景图的位置
- background-repeat：平铺
- repeat横纵平铺
- no-repeat不平铺
- repeat-x：横向平铺
- repeat-y：纵向平铺
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {border: 1px solid red;height: 200px;width: 200px;color: aqua;}</style></head><body style="background-image: url(bg.jpg);background-attachment: fixed;"><div style="background-color: beige;">测试图片</div><div style="background-image: url(logo.jpg);">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: repeat;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: repeat-x;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: repeat-y;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 50% 50%;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 10% 10%;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 50px 50px;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: right center;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: right bottom;">测试图片</div></body>
</html>
新增的几个属性
- background-clip：背景的覆盖范围
- border-box：覆盖有边框 内边距 内容
- no-clip：同上
- padding-box：内边距 内容
- content-box：内容
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {border: 10px dotted red;padding: 20px;height: 200px;width: 200px;}</style></head><body><div style="background-image: url(logo.jpg);">测试图片</div><div style="background-image: url(logo.jpg);background-clip: border-box;">测试图片</div><div style="background-image: url(logo.jpg);background-clip: padding-box;">测试图片</div><div style="background-image: url(logo.jpg);background-clip: content-box;">测试图片</div></body>
</html>
- background-origin：背景覆盖的开始
- border：从边框开始
- padding：从内边距开始
- content：从内容开始
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {border: 10px dotted red;padding: 20px;height: 200px;width: 200px;}</style></head><body><div style="background-image: url(logo.jpg);">测试图片</div><div style="background-image: url(logo.jpg);-webkit-background-origin: border;background-repeat: no-repeat;">测试图片</div><div style="background-image: url(logo.jpg);-webkit-background-origin: padding;background-repeat: no-repeat;">测试图片</div><div style="background-image: url(logo.jpg);-webkit-background-origin: content;background-repeat: no-repeat;">测试图片</div></body>
</html>
- background-size：背景图片的大小
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {border: 10px dotted red;padding: 20px;height: 200px;width: 200px;}</style></head><body><div style="background-image: url(logo.jpg);">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size:50% 50%;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: auto;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: 80% auto;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: auto 30%;">测试图片</div><div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: 100% 100%;">测试图片</div></body>
</html>
多背景的设置
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {border: 1px solid red;height: 200px;width: 200px;background-image: url(logo.jpg),url(bg.jpg);background-repeat: no-repeat,no-repeat;background-position: center center,left center;background-size: 50% 50%, 80% 80%;}</style></head><body><div>测试图片</div></body>
</html>
2.4.2 边框相关属性
- border：复合属性 可以设置边框粗细、线型、颜色
- border-width
- border-style
- none
- hidden
- dotted 点
- dashed 虚线
- soild 实线
- double 双实线
- groove：3D凹槽
- ridge：3D凸槽
- inset：3D凹入
- outset：3D凸出
- border-color
- border-top|right|left|bottom-width|style|color
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {margin-top: 20px;height: 100px;width: 100px;background-color: aquamarine;}</style></head><body><div style="border: 5px solid #666;">测试文字</div><div style="border: 5px dashed #666;">测试文字</div><div style="border: 5px double #666;">测试文字</div><div style="border: 5px groove #666;">测试文字</div><div style="border: 5px ridge #666;">测试文字</div><div style="border: 5px inset #666;">测试文字</div><div style="border: 5px outset #666;">测试文字</div><div style="border-width: 5px;border-color: chartreuse;border-style: solid;">测试文字</div><!--5px 上下 10px左右--><div style="border-width: 5px 10px;border-color: chartreuse;border-style: solid;">测试文字</div><!--5px上 10px左右 15px下--><div style="border-width: 5px 10px 15px;border-color: chartreuse;border-style: solid;">测试文字</div><!--5px上 10px右 15px下 20px左--><div style="border-width: 5px 10px 15px 20px;border-color: chartreuse;border-style: solid;">测试文字</div><div style="border-width: 5px 10px 15px 20px;
border-color: #111 #555 #999#CCC;
border-style: solid dashed dotted double;">测试文字</div><div style="border: 2px solid red;border-radius: 5px;">测试文字</div><div style="border: 2px solid red;border-radius: 10px;">测试文字</div><div style="border: 2px solid red;border-radius: 15px;">测试文字</div><div style="border: 2px solid red;border-radius: 5px 10px 15px 20px;">测试文字</div><div style="border: 2px solid red;
border-top-left-radius: 5px;border-top-right-radius: 10px;
border-bottom-right-radius: 15px;border-bottom-left-radius: 20px;">测试文字</div></body>
</html>
2.5 表格与列表相关属性
2.5.1 表格相关属性
- border-collapse：行货单元格边框的显示方式
- seperate分开
- collapse合并
- border-spacing：单元格与单元格之间的距离 前提是分开的
- caption-side：表标题的位置 top bottom
- empty-cells：单元格如果没有内容时是否显示
- show
- hide
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>table {width: 400px;border: 1px solid black;}td {background-color: #ccc;border: 1px solid black;}</style></head><body><table style="border-collapse: collapse;caption-side: bottom;"><caption>表的标题</caption><tr><td>哈哈哈哈哈哈哈</td><td>呵呵呵呵呵呵呵</td></tr><tr><td>嘻嘻嘻嘻嘻嘻嘻</td><td>嘿嘿嘿嘿嘿嘿嘿</td></tr></table><table style="border-collapse: separate;empty-cells: hide;"><caption>表的标题</caption><tr><td>哈哈哈哈哈哈哈</td><td>呵呵呵呵呵呵呵</td></tr><tr><td>嘻嘻嘻嘻嘻嘻嘻</td><td></td></tr></table><table style="border-collapse: separate;empty-cells: hide;border-spacing: 10px;"><caption>表的标题</caption><tr><td>哈哈哈哈哈哈哈</td><td>呵呵呵呵呵呵呵</td></tr><tr><td>嘻嘻嘻嘻嘻嘻嘻</td><td></td></tr></table></body>
</html>
- table-layout：表格宽度的布局 auto自动 fixed固定
在fixed情况下：
- 通过col或colgroup设置宽度，表的宽度就是所有列宽度的总和
- 第一行所有单元格设置宽度，标的宽度就是第一行单元格宽度的总和
- 直接平均分配，忽略实际宽度
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>table {width: 400px;border: 1px solid black;table-layout: fixed;}td {background-color: #ccc;border: 1px solid black;}</style></head><body><table><tr><td>哈哈哈哈哈哈哈</td><td>呵呵呵</td></tr><tr><td>嘻嘻嘻嘻嘻嘻嘻</td><td>嘿嘿嘿</td></tr></table><table><col style="width:250px"><col style="width: 50px;"><tr><td>哈哈哈哈哈哈哈</td><td>呵呵呵</td></tr><tr><td>嘻嘻嘻嘻嘻嘻嘻</td><td>嘿嘿嘿</td></tr></table><table><tr><td style="width: 250px;">哈哈哈哈哈哈哈</td><td style="width: 50px;">呵呵呵</td></tr><tr><td>嘻嘻嘻嘻嘻嘻嘻</td><td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td></tr></table></body>
</html>
2.5.2 列表相关属性
- list-style：符合属性
- list-style-image：让列表编号以图片显示
- list-style-position：编号的位置 是在元素之前 outside 在元素之内inside
- list-style-type：列表编号文字样式
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>li {background-color: crimson;margin: 5px;}</style></head><body><ul style="list-style-image: url(logo.jpg);"><li>来了</li><li>嗯 来了</li><li>来不</li><li>来</li></ul><ul style="list-style-image: url(logo.jpg);list-style-position: inside;"><li>来了</li><li>嗯 来了</li><li>来不</li><li>来</li></ul><ol style="list-style-type:cjk-ideographic"><li>来了</li><li>嗯 来了</li><li>来不</li><li>来</li></ol></body>
</html>
2.5.3 控制光标相关属性
- cursor：用户控制鼠标的样式
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {display: inline-block;border: 1px solid black;width: 100px;height: 50px;}</style></head><body><div style="cursor: all-scroll;">十字箭头</div><div style="cursor: col-resize;">列拉伸</div><div style="cursor: crosshair;">十字</div><div style="cursor: move;">移动箭头</div><div style="cursor: help;">求助问号</div><div style="cursor:no-drop">禁止拖拽</div><div style="cursor:not-allowed">不允许-禁止</div><div style="cursor:pointer">手指</div><div style="cursor:progress">圆圈进度</div><div style="cursor:row-resize">水平拉伸</div><div style="cursor:text">插入文本</div><div style="cursor:vertical-text">垂直插入文本</div><div style="cursor:wait">圆圈进度</div><div style="cursor:n-resize">南北拉伸</div><div style="cursor:ne-resize">东北拉伸</div><div style="cursor:se-resize">东南拉伸</div></body>
</html>
2.6 变形与动画相关属性
2.6.1 变形相关属性
主要用于控制组件的旋转、位移、倾斜、缩放，也可以使用矩阵来进行变形处理
- transform：设置变形
- translate(tx,ty)：设置位移，组件从当前位置 横向移动tx 纵向移动ty，ty值可以忽略，横纵移动都是tx
- translateX(tx)
- translateY(ty)
- scale(sx,sy)：设置缩放，sy可以忽略，默认都是sx
- scaleX(sx)
- scaleY(sy)
- skew(sx,sy)：设置倾斜，sx和sy都是角度值，sy可以忽略默认是sx
- skewX(sx)
- skewY(sy)
- rotate(angle)：旋转angle角度
- transform-origin：变形的基点
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {width: 60px;height: 60px;background-color: aqua;margin: 5px;border: 1px solid black;}</style></head><body><div>测试变形</div><div style="transform: rotate(30deg);">测试变形</div><div style="transform: translate(10px,10px)">测试变形</div><div style="transform: scale(1.2);">测试变形</div><div style="transform: scale(1.5,0.5);">测试变形</div><div style="transform: skew(30deg);">测试变形</div><div style="transform: rotate(60deg) skew(45deg) scale(1.2,0.8) translate(10px,10px);">测试变形</div><div style="transform: skew(45deg) scale(1.2,0.8) translate(10px,10px) rotate(60deg);">测试变形</div><!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {width: 60px;height: 60px;background-color: aqua;margin: 5px;border: 1px solid black;}</style></head><body><div>测试变形</div><div style="transform: rotate(30deg);">测试变形</div><div style="transform: translate(10px,10px)">测试变形</div><div style="transform: scale(1.2);">测试变形</div><div style="transform: scale(1.5,0.5);">测试变形</div><div style="transform: skew(30deg);">测试变形</div><div style="transform: rotate(60deg) skew(45deg) scale(1.2,0.8) translate(10px,10px);">测试变形</div><hr><hr><hr><hr><hr><hr><div>测试变形</div><div style="transform: rotate(45deg);">测试变形</div><div>测试变形</div><div style="transform-origin: left center; transform: rotate(45deg);">测试变形</div><div>测试变形</div><div style="transform-origin: right center; transform: rotate(45deg);">测试变形</div><div>测试变形</div><div style="transform-origin: left bottom; transform: rotate(30deg);">测试变形</div></body>
</html></body>
</html>
2.6.2 Transition动画属性
控制组件的某个属性发生改变时，会经历一段时间来进行变化，这个过程Transition动画-补间动画
- transition-property：针对的属性
- transition-duration：变化的时长
- transition-timing-function：渐变速度
- ease：慢-快-慢
- linear：匀速
- ease-in：慢-快
- ease-out：快-慢
- cubic-bezier(x1,y1,x2,y2)：贝奇挨曲线控制
- transition-delay：延迟时间
<演示代码中包含JS代码>
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>div {width: 100px;height: 100px;border: 1px solid red;background-color: green;margin: 10px;transition: background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1);}div:hover {background-color: yellow;}img {position: absolute;transition: left 3s linear , top 3s linear;}p {width: 300px;height: 100px;background-color: red;transition: background-color 2s ease,width 2s ease,height 2s ease;}</style></head><body><div>测试背景颜色的动画</div><img id="aim" src = "logo.jpg"><script>//先找到图片标签这个对象var aim = document.getElementById("aim");aim.style.left = "0px";aim.style.top = "0px";//设置全局的点击事件document.onmousedown = function(evt) {aim.style.left = evt.pageX + "px";aim.style.top = evt.pageY + "px";}</script><p id = "lala">测试三个属性的动画效果</p><script>var originWidth = 300;var originHeight = 100;var lala = document.getElementById("lala");var zoom = function(scale,bgColor) {lala.style.width = originWidth * scale + "px";lala.style.height = originHeight * scale + "px";lala.style.backgroundColor = bgColor;}</script><button onclick="zoom(1.5,'blue')">放大</button><button onclick="zoom(0.5,'yellow')">缩小</button><button onclick="zoom(1.0,'red')">恢复</button></body>
</html>
2.6.3 Animation动画属性
<html><head><meta http-equiv="Content-type" content="text/html;charset=gbk"><style>@keyframes animation01 {0% {left: 100px;}10% {left: 150px;}20% {left: 75px;}30% {left: 150px;}40% {left: 75px;}50% {left: 150px;}60% {left: 75px;}70% {left: 150px;}80% {left: 75px;}100% {left:100px;}}div {background-color: gray;border: 1px solid red;position: absolute;left: 100px;width: 200px;height: 60px;}div:hover {animation-name: animation01;animation-duration: 3s;animation-iteration-count: infinite;}@keyframes animation02 {0% {transform: rotate(0deg) scale(1);background-color: #f00;}40% {transform: rotate(720deg) scale(0.1);background-color: #ff0;}60% {transform: rotate(1080deg) scale(4);background-color: #f0f;}100% {transform: rotate(0deg) scale(1);background-color: #f00;}}p {background-color: #f00;border: 1px solid black;width: 60px;height:60px;}p:hover {animation-name: animation02;animation-duration: 8s;animation-iteration-count: 1;}</style></head><body><div>Animation01</div><p>Animation02</p></body>
</html>
2.7 盒子模型与布局相关属性
2.7.1 布局相关属性
- float：控制目标组件是否浮动以及如何浮动，如果某一个组件被设置为浮动，则该组件当做块级元素处理。
- left：左浮动
- right：右浮动
- clear：设置组件的左右是否允许出现其他浮动的对象
- none两边都允许
- left左边不允许出现
- right右边不允许出现
- bot两边都不允许出现
- overflow：组件内容不够容纳时，剩下的内容如何处理
- visible默认 不剪裁 也不添加滚动条
- auto如果容纳不下自动添加滚动条
- hidden剪裁超出的部分
- scoll：总是显示出滚动条
- overflow-x：控制水平方向上overflow
- overflow-y：控制垂直方向上overflow
- visibility：组件是否显示，若不显示时，其所占用的空间依旧存在
- display：设置组件如何显示
浮动的问题
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div {border: 1px solid black;width: 300px;height: 80px;padding: 5px;}</style></head><body><div style="float: left;">div元素1</div><div style="float: left;">div元素2</div><div style="float: right;">div元素3</div><div style="float: right;">div元素4</div></body>
</html>
用float属性实现多栏布局
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>body {margin: 0;}div#container {width: 1080px;margin: auto;}div>div {border: 1px solid #aaf;box-sizing: border-box;border-radius: 15px 15px 0px 0px;background-color: #ffc;padding: 5px;margin: 10px;}</style></head><body><div id="container"><div style="float: left;width: 220px;"><h2>第一栏</h2><p>北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。</p></div><div style="float: left;width: 500px;"><h2>第二栏</h2><ul><li><a href="#">最热新闻</a></li><li><a href="#">国内新闻</a></li><li><a href="#">国际新闻</a></li><li><a href="#">娱乐新闻</a></li></ul></div><div style="float: left;width: 240px;"><h2>第三栏</h3><figure><figcaption>美女图片</figcaption><img src="img/mv1.jpg" width="100px"><img src="img/mv2.jpg" width="100px"><img src="img/mv3.jpg" width="100px"></figure></div></div></body>
</html>
clear属性实现换行
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div>div {width: 220px;padding: 5px;margin: 2px;float: left;background-color: #ddd;}</style></head><body><div><div>div元素1</div><div>div元素2</div><div style="clear: both;">div元素3</div><div>div元素4</div></div></body>
</html>
滚动条的问题
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div>div {white-space: nowrap;width: 200px;height: 50px;padding: 5px;margin: 50px;background-color: #ddd;}</style></head><body><div><div>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br></div><div style="overflow: hidden;">div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br></div><div style="overflow: auto;">div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br></div><div style="overflow-x: hidden;">div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br></div><div style="overflow-y: hidden;">div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br></div></div></body>
</html>
2.7.2 盒子模型与display属性
两种最基本的盒子模型：
- block：块级元素，占据一行，可以设置宽高 div p
- inline：内联元素，不占据一行，多个内联元素在同一行，放不下则换行，不可以设置宽高 span a img
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"></head><body><div style="display: inline;">div元素</div><div style="display: inline;">div元素</div><span style="display: block;">span元素</span><span style="display: block;">span元素</span></body>
</html>
- none值 隐藏的
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div {width: 300px;height: 40px;background-color: #ddd;border:1px solid black;}</style></head><body><div id="test1">div01</div><input type="button" value="显示"onclick="document.getElementById('test1').style.display=''"><input type="button" value="隐藏"onclick="document.getElementById('test1').style.display='none'"><div id="test2">div02</div><input type="button" value="显示"onclick="document.getElementById('test2').style.visibility='visible'"><input type="button" value="隐藏"onclick="document.getElementById('test2').style.visibility='hidden'"></body>
</html>
- inline-block：不占据一行，但也可以设置宽高
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>body {margin: 0;}div#container {width: 1080px;margin: auto;}div>div {border: 1px solid #aaf;box-sizing: border-box;border-radius: 15px 15px 0px 0px;background-color: #ffc;padding: 5px;margin: 10px;display: inline-block;vertical-align: top;}</style></head><body><div id="container"><div style="width: 220px;"><h2>第一栏</h2><p>北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。</p></div><div style="width: 500px;"><h2>第二栏</h2><ul><li><a href="#">最热新闻</a></li><li><a href="#">国内新闻</a></li><li><a href="#">国际新闻</a></li><li><a href="#">娱乐新闻</a></li></ul></div><div style="width: 240px;"><h2>第三栏</h3><figure><figcaption>美女图片</figcaption><img src="img/mv1.jpg" width="100px"><img src="img/mv2.jpg" width="100px"><img src="img/mv3.jpg" width="100px"></figure></div></div></body>
</html>
导航样式
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>body>div {text-align: center;margin: auto;}div>div {display: inline-block;border:1px solid black;width: 100px;height: 50px;}a {text-decoration: none;/**/display: block;width: 100px;height: 50px;background-color: #eee;}a:hover {background-color: #aaa;font-weight: bold;}</style></head><body><div><div><a href="#">百度</a></div><div><a href="#">百度</a></div><div><a href="#">百度</a></div><div><a href="#">百度</a></div></div></body>
</html>
- inline-table盒子模型
将表格变为内联元素
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>table {border: 1px solid black;display: inline-table;}td {border: 1px solid black;}</style></head><body>前面的内容<table><tr><td>呵呵呵呵</td><td>呵呵呵呵</td></tr><tr><td>呵呵呵呵</td><td>呵呵呵呵</td></tr></table>后面的内容</body>
</html>
表格相关的盒子模型
- table：将组件显示为表格样式
- table-caption：将组件显示为表标题样式
- table-cell：将组件显示为单元格样式
- table-row：将组件显示为行的样式
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div>div>div{display: table-cell;border: 1px solid black;}</style></head><body>前面的内容<div style="display: table;border: 1px solid black;width: 400px;"><div style="display: table-caption;">表格的标题</div><div><div>呵呵呵呵</div><div>呵呵呵呵</div></div><div><div>呵呵呵呵</div><div>呵呵呵呵</div></div></div>后面的内容</body>
</html>
2.7.3 给盒子模型加阴影
- box-shadow属性
- hOffset：水平偏移
- vOffset：垂直偏移
- blurlength：阴影的模糊程度
- scaleLength：阴影的缩放程度
- color：阴影的颜色
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div {width: 300px;height: 50px;border: 1px solid black;margin-top: 30px;}</style></head><body><div style="box-shadow: 10px 10px 5px #ddd;"></div><div style="box-shadow: -10px -10px 5px #ddd;"></div><div style="box-shadow: 10px 10px 5px 10px #ddd;"></div><div style="box-shadow: 10px 10px 5px 20px #ddd;"></div></body>
</html>
2.7.4 多栏布局
CSS新增的分栏布局
将一个组件的内容分成若干个部分
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>div {/*将组件内容分成3部分 横向分*/column-count:3;/*分开的部分之间的间距*/column-gap: 50px;/*分开的部分之间的分隔条 宽度 样式 颜色*/column-rule: 10px inset #aaa;}</style></head><body><div>呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br></div></body>
</html>
使用盒子模型来实现多栏布局
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>body {margin: 0;}div#container {width: 1200px;border: 1px solid black;/*设置容器组件为box样式*/display: -webkit-box;}div>div {border: 1px solid #aaf;box-sizing: border-box;border-radius: 15px 15px 0px 0px;background-color: #ffc;padding: 5px;margin: 10px;}</style></head><body><div id="container"><div style="width: 220px;"><h2>第一栏</h2><p>北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。</p></div><div style="width: 500px;"><h2>第二栏</h2><ul><li><a href="#">最热新闻</a></li><li><a href="#">国内新闻</a></li><li><a href="#">国际新闻</a></li><li><a href="#">娱乐新闻</a></li></ul></div><div style="width: 240px;"><h2>第三栏</h3><figure><figcaption>美女图片</figcaption><img src="img/mv1.jpg" width="100px"><img src="img/mv2.jpg" width="100px"><img src="img/mv3.jpg" width="100px"></figure></div></div></body>
</html>
2.7.5弹性盒子和栅格布局
弹性盒子
是一种完全根据屏幕尺寸需求来实现自适应动态布局的样式
需要两种东西：弹性容器+弹性子元素
弹性容器默认有一行
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>.flex-container {/*将div设置为弹性的容器*/display: flex;width: 400px;height: 250px;background-color: lightblue;/*弹性子元素在弹性容器中的排列方式 row column -reverse*/flex-direction: row;/*水平对齐方式flex-start 从左到右紧凑flex-endcenter 紧凑居中spacing-bewteen 平均分布*/justify-content: space-between;/*垂直对齐*/align-items:center;}.flex-item {background-color: red;width: 50px;height: 100px;margin: 10px;}</style></head><body><div class="flex-container"><div class="flex-item">item01</div><div class="flex-item">item02</div><div class="flex-item">item03</div><div class="flex-item">item04</div></div></body>
</html>
栅格布局
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>.box {border: 1px solid black;/*使用栅格样式布局*/display: grid;/*设置栅格中列的宽度*/grid-template-columns: 20% 20% 20% 20%;grid-template-columns: 200px 200px 200px 200px;/*也可以在确定栅格宽度的情况下 利用百分比来设定宽度*/width: 500px;grid-template-columns: repeat(5,1fr);height: 400px;grid-template-rows: repeat(3,1fr);/*单元格之间的间距*/grid-gap: 10px;}.box>div {border: 1px solid red;}.test {/*grid-column-start: 2;grid-column-end: 5;grid-row-start: 2;grid-row-end: 3;*//*一笔带过*/grid-area: 2/2/3/5;}</style></head><body><div class="box"><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div><div class="test">07</div><div>08</div><div>09</div><div>10</div><div>11</div><div>12</div></div></body>
</html>
官方推荐的一种栅格布局案例
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset='gbk'"><style>#content {display: grid;grid-template-columns: repeat(4,1fr);grid-template-rows: minmax(100px,auto);max-width: 960px;margin: 0px auto;grid-gap:10px;grid-template-areas: "header header header header""aside . main main""nav . main main""section section section section""section section section section""footer footer footer footer";}#content>* {background-color: #3bbced;padding: 30px;}header {grid-area: header;}main {grid-area: main;}section {grid-area: section;}aside {grid-area: aside;}nav {grid-area: nav;}footer {grid-area: footer;}</style></head><body><div id="content"><header>Header</header><main>Main</main><section>Section</section><aside>Aside</aside><nav>Nav</nav><footer>Footer</footer></div></body>
</html>