Java前端基础——CSS
Java前端基础——CSS
目录
- Java前端基础——CSS
- 1.什么是CSS？
- 2.基础语法
- 2.1CSS的引用方式
- 2.2 选择器
- 2.2.1基础选择器
- 2.2.2复杂选择器
- 2.2.3伪类选择器和伪元素选择器
- 2.2.4选择器优先级
- 2.3 常用属性
- 2.3.1字体属性
- 2.3.2文本属性
- 2.3.3背景属性
- 2.3.4列表属性
- 2.3.5表格属性
- 2.4盒子模型
- 2.5.定位方式
- 2.5.1 什么是定位方式？
- 2.5.2 相对定位
- 2.5.3 绝对定位
- 2.5.4 固定定位
- 2.5.5 z-index
- 2.6 CSS属性扩展
- 2.6.1 浮动和清除
- 2.6.2 元素的显示和隐藏
- 2.6.3 轮廓属性
- 2.6.4 其它属性
- 2.7 页面布局
- 2.7.1 常见布局
- 2.7.2 表格布局
- 2.7.3 div布局
1.什么是CSS？
CSS是一组样式设置规则，用于控制页面样式，样式复用易于维护和扩展。
<head>
<style>
/** 选择器：要修饰的对象。
属性名：修饰对象某一属性。
属性值：样式的取值
*/
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
<style>
p{
color:red;
background: #cccccc;
}
h2{
color:blue;
}
</head>
2.基础语法
2.1CSS的引用方式
有三种方式：内部样式、行内样式、外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.内部样式 */
p{
color:blue;
}
</style>
<!-- 3.1 link链接外部样式文件 -->
<link rel="stylesheet" type="text/css" href="style/hello.css">
<!-- 3.2 import导入外部样式文件 -->
<style>
/* @import "style/hello.css" */
@import url(style/hello.css);
</style>
</head>
<body>
<p>welcome to CSS!</p>
<hr>
<!-- 2.行内样式 -->
<h2 style="color:red;">WEB前段工程师</h2>
<h2>JAVA开发工程师</h2>
<hr>
<div>嘿嘿</div>
<div>哈哈</div>
</body>
</html>
2.2 选择器
2.2.1基础选择器
基础选择器又有标签选择器，类选择器，id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 标签选择器 */
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
/* 类选择器：调用时不要带'.'号,同时调用多个样式用空格隔开 */
.hello{
background: #cccccc;
}
.world{
font-weight:bold;
}
/* id选择器 */
#haha{
color:blue;
}
</style>
</head>
<body>
<p>welcome to css!</p>
<h2>WEB前端开发</h2>
<p class="hello">welcome to css!</p>
<div class="hello">主讲：Hector</div>
<div class="world">主讲：Hector</div>
<h1 id="haha">哈哈</h1>
</body>
</html>
2.2.2复杂选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.1标签选择器和类选择器合起来使用----复合选择器 */
h1.aaa{
color:red;
}
/* 1.2标签选择器和ID选择器合起来使用----复合选择器 */
p#bbb{
color:blue;
}
/* 2.组合选择器 */
h1,p,div,span,.ccc{
font-size:30px;
}
div{
background:violet;
}
.ccc{
font-weight:bold;
}
/* 3.嵌套选择器 */
div p{
color:green;
text-decoration:underline;
}
div h3.ddd{
color:red;
}
</style>
</head>
<body>
<!-- 需求：只想修饰class属性为aaa的h1标签 -->
<h1 class="aaa">welcome</h1>
<h4 class="aaa">css</h4>
<h1>hello</h1>
<hr>
<!-- 我要修饰ID属性为bbb的p标签 -->
<p id="bbb">world</p >
<p>html</p>
<h1 id="bbb">主讲：叽叽</h1>
<hr>
<!-- 给h1、p、div、span标签中的内容设置字号为30px -->
<h1>hello</h1>
<p>CSS</p>
<div>WEB开发</div>
<span class="ccc">JAVA开发</span>
<hr>
<!-- 需求：修饰div内部的p标签 -->
<div>
<p>div内部的p标签</p>
<h3>div内部的h3标签</h3>
</div>
<hr>
<div>
<h3>
<p>div内部的h3内部的p标签</p>
</h3>
</div>
<hr>
<!-- 需求：修饰div内部的class为ddd的h3标签 -->
<div>
<p>div内部的p</p>
<h3 class="ddd">div内部的h3</h3>
<p class="ddd">PPPP</p>
</div>
<h3 class="ddd">h3h3h3</h3>
</body>
</html>
2.2.3伪类选择器和伪元素选择器
1.根据不同的状态显示不同的样式，一般多用于标签。
四种状态：
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a:link,a:visited{
color:#666666;
font-size: 13px;
text-decoration: none;
}
a:hover,a:active{
color:#ff7300;
text-decoration: underline;
}
/*普通的标签也可以使用伪类选择器*/
p:hover{
color:red;
}
p:active{
color:blue;
}
</style>
</head>
<body>
<a href="复杂选择器.html">复杂选择器.html</a>
<p>CSS从入门到精通！</p>
</body>
</html>
2.伪元素选择器
:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter{
color:red;
font-size:30px;
}
p:first-line{
background:pink;
}
p:before{
content:"嘿嘿";
}
p:after{
content:"哈哈";
}
</style>
</head>
<body>
<p>hello world!</p>
<hr>
<p>
hello world! <br>
welcome to css!
</p>
</body>
</html>
2.2.4选择器优先级
1 优先级：行内样式>>ID选择器>>类选择器>>标签选择器
原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式.
2 内外部样式加载顺序：就近原则
原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先
3 !important
可以使用!important使某个样式有最高的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style/world.css">
<style>
p{
color:red !important; /* 级别最高，其它的样式不会覆盖*/
}
p{
color:blue;
}
</style>
</head>
<body>
<p>hello</p>
<p>hi</P>
</body>
</html>
2.3 常用属性
2.3.1字体属性
| 属性 | 含义 |
|---|---|
| font-size | 大小、尺寸(可以使用多种单位) |
| font-weight | 粗细 |
| font-family | 字体 |
| font-style | 样式 |
| font | 简写 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
/*font-size: 20px;*/
font-size: 80%;
}
.hello{
font-size: 2em;
}
ul li{
/*font-size: 30px;
font-weight: bold;
font-family: 华文行楷,宋体,黑体;
font-style: italic;*/
font: italic bold 30px 微软雅黑;
}
</style>
</head>
<body>
<p>
CSS从入门到精通！
<span>hello</span>
</p>
<ul>
<li>
嘿嘿
</li>
</ul>
</body>
</html>
2.3.2文本属性
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 颜色 | |
| line-height | 行高 | 行之间的高度 |
| text-align | 水平对齐方式 | 取值：left、center、right |
| vertical-align | 垂直对齐方式 | 取值：top、middle、bottom可以用于图片和文字的对齐方式 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值：underline、overline、line-through |
| text-transform | 字母大小写转换 | 取值：lowercase、uppercase、capitalize首字母大写 |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
background-color: #ccc;
line-height: 50px;
text-align: center;
}
img{
vertical-align: middle;
}
div{
text-indent: 30px;
}
span{
font-size: 30px;
text-decoration: underline;
text-transform: capitalize;
letter-spacing: 10px;
world-spacing:;
}
h3{
width: 300px;
height: 200px;
background-color:#ccc;
white-space: nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p>welcome to css!</p>
<hr>
<img src="../abc.png" alt="" width="15%">
HTML和CSS很简单吗？
<hr>
<div>他的常穿衣物袖口已磨损成布条状，冬日所穿的羽绒服布满污迹，他的背包也是如此；他在食堂的饮食习惯通常是简单的白米饭配以素菜和一些汤，早餐则是几个馒头或包子；有时候他甚至会带走几个馒头，有可能他的正餐有时仅靠馒头维持。</div>
<hr>
<span>hello world</span>
<hr>
<h3>他的常穿衣物袖口已磨损成布条状，冬日所穿的羽绒服布满污迹，他的背包也是如此；他在食堂的饮食习惯通常是简单的白米饭配以素菜和一些汤，早餐则是几个馒头或包子；有时候他甚至会带走几个馒头，有可能他的正餐有时仅靠馒头维持。 CSS</h3>
</body>
</html>
2.3.3背景属性
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景图片的重复方式 |
| background-position | 背景图片的显示位置 |
| background-attachment | 背景图片是否跟随滚动 |
| background | 简写 |
1.background-color：取值：transparent 透明
2 background-image必须使用url()方式指定图片的路径
3 background-repeat：取值：repeat(默认)，repeat-x，repeat-y,no-repeat
4 background-position：默认背景图显示在左上角
取值：关键字：top、bottom、left、right、center
坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向
5 background-attachment：取值：scroll(默认)、fixed固定不动
6 background：简写属性：background:background-color|background-image|background-repeat|background-position以空格隔开，书写顺序没有要求
2.3.4列表属性
| 属性 | 含义 | 说明 |
|---|---|---|
| list-style-type | 设置列表前的标记 | none、disc、circle、square、decimal |
| list-style-image | 将图像作为列表前的标记 | |
| list-style-position | 设置标记的位置 | 取值：outside(默认)、inside |
| list-style | 简写 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.first{
list-style-type:circle;
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.fourth{
list-style:circle url(../images/female.gif)inside;
}
.nav li{
/*list-style:list-style-type|list-style-image|list-style-position*/
list-style:none;
float:left;
width:70px;
}
</style>
</head>
<body>
<ul>
<li class="first">hello</li>
<li class="third">hello</li>
<li class="fourth">hello</li>
</ul>
<hr>
<nav>
<ul class="nav">
<li>新闻</li>
<li>小说</li>
<li>艾瑞蒂</li>
<li>政治</li>
<li>学习</li>
</ul>
</nav>
</body>
</html>
2.3.5表格属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:500px;
border:1px solid blue;
/* border-collapse:表格中相邻的边框是否合并（折叠）为单一边框 取值：
separated（默认） collapse
*/
border-collapse:collapse;
}
td{
border:1px solid blue;
}
</style>
</head>
<body>
<table cellspacing="0px"cellpadding="0px">
<tr>
<td>bbb</td>
<td>aaa</td>
<td>aaa</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>bbb</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>
</body>
</html>
2.4盒子模型
1.简介：
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：
width-宽度 height-高度 border-边框 padding-内边距 margin-外边距
2.盒子模型：
border表示盒子的边框分为四个方向：上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-left
每个边框包含三种样式：border-xx-color，border-xx-width，border-xx-style
样式style的取值：solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线
简写，三种方式：
①按方向简写：border-top、border-right、border-bottom、border-left
书写顺序：border-顺序：width style color
②按样式简写：border-color、border-width、border-style
书写顺序：border-样式：top right bottom left
必须按顺时针方向书写，同时可以缩写：
border-width:2px;--------->四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样
③终级简写：
如果四个边框样式完全相同，border:width style color;
3.padding
表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准
4 margin
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
居中对齐：
1.块级元素的水平居中: margin:0 auto;
提示：块级元素必须指定宽度
2.文本的水平居中：text-align:center;
3.垂直居中，将height和line-height设置为相同
height:100px; line-height:100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/*
border-top-color:red;
border-top-width:1px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:dotted;
border-bottom-color:green;
border-bottom-width:4px;
border-bottom-style:dashed;
border-left-color:gray;
border-left-width:6px;
border-left-style:double;
*/
/* border-top:1px solid red;
border-bottom:2px dashed blue; */
/* border-color:red yellow green;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted solid; */
border:1px solid red;
padding:20px;
margin:10px;
}
.second{
/* padding-top:5px;
padding-left:3px;
padding-bottom:10px;
padding-right:8px; */
/* padding:1px 2px 4px 6px; */
padding:5px;
}
.third{
/* margin-top:50px;
margin-left:30px; */
/* margin:10px 20px; */
/* 元素的居中 */
/* 1.块级元素水平居中 */
margin:auto;
/* 2.文本水平居中 */
text-align:center;
/* 3.文本垂直居中 将height与line-height设置为相同 */
height:100px;
line-height:100px;
}
</style>
</head>
<body>
/* 元素的水平居中 */
<p class="first">nihao</p>
<p class="second">hello</p>
<p class="third">welcome</p>
</body>
</html>
2.5.定位方式
2.5.1 什么是定位方式？
通过position属性实现对元素的定位，有四种定位方式：
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行的定位 |
| absolute | 绝对定位 | 相对于第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗品进行定位 |
设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right
2.5.2 相对定位
先设置元素的position属性为relative,然后再设置偏移量
2.5.3 绝对定位
先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量
注意：
- 一般来说都会将父标签设置为非static定位
- 如果父标签不是非static定位，则会相对于浏览器窗口进行定位
- 设置元素为绝对定位后，元素会浮到页面上方
2.5.4 固定定位
先设置元素的position属性为fixed，然后再设置偏移量
设置元素为固定定位后，元素会浮动在面面上方
2.5.5 z-index
设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序
取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)
注意：只能给非static定位的元素设置z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width:800px;
border:1px solid #000000;
position:relative;
}
.div1,.div2,.div3,.div4{
width:100px;
height:50px;
}
.div1{
background:red;
position:relative;/* 相对定位 */
top:20px;
left:50px;
z-index:-5;
}
.div2{
background:blue;
position:absolute;/* 绝对定位 */
left:100px;
bottom:50px;
z-index:-8;
}
.div3{
background:green;
position:fixed; /* 固定定位 */
bottom:50px;
left:100px;
}
.div4{
background:cyan;
}
</style>
</head>
<body>
<div id="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html>
2.6 CSS属性扩展
2.6.1 浮动和清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
border:1px solid #000000;
}
.div1,.div2,.div3,.div4{
width:100px;
height:50px;
}
.div1{
background:red;
float:left;
/*
float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，
如果一行显示不下，则会换行显示. 取值：left左浮动 right右浮动 none不浮动，默认值
*/
}
.div2{
background:blue;
float:left;
}
.div3{
background:green;
float:left;
}
.div4{
background:cyan;
float:left;
}
.clr{
clear:left;
/*
通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素
取值：left左侧不允许出现浮动元素 right右侧不允许出现浮动元素
both两侧不允许出现浮动元素 none允许两侧出现浮动元素，默值
对于非浮动元素，两边都可以设置清除（常用），对于浮动元素，向哪边浮动，就只能设置哪边的清除
*/
}
</style>
</head>
<body>
<div id="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="clr"></div>
</div>
</body>
</html>
2.6.2 元素的显示和隐藏
①display：通过display属性设置元素是否显示，以及是否独占一行
| 取值 | 含义 | 说明 |
|---|---|---|
| none | 不显示 | |
| inline | 显示为内联元素，行级元素的默认值 | 将块级元素变为行级元素，不再独占一行 |
| block | 显示为块级元素，块级元素的默认值 | 将行级元素变为块级元素，独占一行 |
| inline-block | 显示为内联元素，但是可以设置宽和高 | 在inline基础上允许设置宽度和高度 |
②visibility：也可以通过visibility属性设置元素的显示和隐藏
| 取值 | 含义 |
|---|---|
| visible | 显示 |
| hidden | 隐藏 |
display隐藏时不再占据页面中的空间，后面的元素会占用其位置
visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
background:blue;
display:inline;
}
span{
width: 100px;
height: 50px;
background:yellow;
display:inline-block;
}
i{
display:block;
width: 100px;
height: 50px;
background:red;
}
p{
width: 50px;
height: 50px;
background:red;
}
.p1{
visibility:hidden;
}
.login{
display:inline-block;
width: 100px;
text-decoration:none;
background:rgba(255, 0, 0, 0.7);
color:#fff;
padding:10px;
text-align:center;
border-radius:10px;
}
.login:hover{
background:rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="div1">div1</div>
<span>span1</span>
<i>呵呵</i>
<hr>
<p class="p1">hello</p>
<p class="p2">world</p>
<hr>
<a href="javascript:alert('欢迎光临')" class="login">登 录</a>
</body>
</html>
2.6.3 轮廓属性
1.轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素
2.基本用法
常用属性:
- outline-width:轮廓宽度
- outline-color:轮廓颜色
- outline-style:轮廓样式
- outline简写
在浏览器中，当鼠标单击或使用TAB键让一个表单或链接获得焦点时，该元素会有一个轮廓outline
优点：可以提高使用表单的用户体验
缺点：有时会影响美观
3.outline和border的区别
border可以应用于所有html元素，而outline主要用于表单元素、超链接元素
当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
outline不影响元素的尺寸和位置，而border会影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
border:2px solid red;
outline:4px dashed green;
}
.username{
border:1px solid red;
outline:none;
padding-left:3px;
width:80px;
}
.email{
border:0;
outline:0;
border-bottom:1px solid #000;
}
.btnsubmit{
border:0;
padding:5px;
width:100px;
}
.mydiv{
width:100px;
background:#ccc;
border:2px solid red;
}
</style>
</head>
<body>
<span>welcome to CSS</span>
<hr>
用户名：<input type="text" class="username">
<a href="#">CSS</a>
<hr>
邮箱：<input type="text" class="email">
<input type="submit" value="提交" class="btnsubmit">
<hr>
<div class="mydiv">div</div>
</body>
</html>
2.6.4 其它属性
1.宽高相关
- max-width:设置元素的最大宽度
- max-height:设置元素的最大高度
- min-width设置元素的最小宽度
- min-height设置元素的最小高度
2.overflow属性,当元素内容溢出时该如何处理
- visible溢出时可见，显示在元素外，默认值
- hidden溢出的部分不可见（常用）
- scroll无论是否出现溢出始终出现滚动条
- auto溢出时自动出现滚动条
3.cursor属性,用于设置光标的形状
- default默认光标，一般为箭头
- pointer手形，光标移动超链接上时一般显示为手形
- move表示可移动
- text表示文本
- wait表示程序正忙，需要等待
- help表示帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
border:1px solid red;
min-width:500px;
}
div{
border:1px solid blue;
width: 300px;
height: 100px;
overflow:auto;
}
span{
cursor:help;
}
</style>
</head>
<body>
<p>
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
</p>
<hr>
<div>
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
</div>
<hr>
<span>光标形状</span>
</body>
</html>
2.7 页面布局
2.7.1 常见布局
- 表格布局
- div布局
2.7.2 表格布局
table常用样式的属性
- border在表格外围设置边框
- border-spacing设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）
- border-collapse表格中相邻边框是否合并，取值：seprate、collapse
th/td常用样式属性：
- border为单元格设置边框
- padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）
不适用于复杂布局，仅用于简单 、有规则的结构
定位相对准确，与浏览器基本无关，适用于简单分隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hello{
width: 80%;
border:1px solid #ccc;
border-spacing:0;
border-collapse:collapse;
}
.hello th,.hello td{
border:1px solid #ccc;
padding:5px;
}
</style>
</head>
<body>
<!-- table>(thead>tr>th{th$}*4)+tbody>(tr>td{td$}*4)*6 -->
<table>
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</tr>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</tbody>
</table>
</body>
</html>
2.7.3 div布局
定位绝对精确，使用灵活，适合于复杂的布局方式
1.简单布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="main">
main
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
2.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style4.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
main
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
3.双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style5.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
<div class="main-wrapper">
main
</div>
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
注：以上是CSS主要使用部分，还有些细碎衍生部分这里不多做说明。可以从这里去学习HTML相关知识：点这里