前端主要负责两个事:
- 负责用户数据的输入
- 负责向用户展示数据
前端主要的知识点
- HTML
- CSS
- JavaScript
第一部分 HTML5
HTML:超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版
1.1 HTML5常见元素与属性
1.1.1 基本元素
- html:HTML文档的根标签
- head:页面的头部,存放的是一些关于页面的设置等信息,不会当成正文显示在网页里
- body:页面的主体,正文,其内容都会呈现在网页中
- title:网页的标题
- meta:主要用于设置网页内容
- style:用于使用CSS样式表
- h1-h6:标题1-标题6,块级元素
- p:段落,块级元素,段前段后间距
- span:一段文字,内联元素,不换行
- font:字体标签,内联
- hr:一条水平线,块级
- div:盒子,容器,文档的节,主要用于页面布局,块级,它可以容纳很多其他元素
<!--声明为HTML5文档-->
<!DOCTYPE html>
<!--HTML的根标签-->
<html>
<!--页面头部信息-->
<head>
<title>01基本元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<!--页面主体信息-->
<body>
<h1>这是h1</h1>
<h6>这是h6</h6>
<!-- #RGB #RRGGBB 0~F -->
<span>
<font color="#FF1188">
这是一句孤立的话
</font>
</span> <br>
<span>
<font color="#00f">
这也是一句孤立的话
</font>
</span>
<p align="center">
这是一段话
</p>
<hr>
<p align="right">
这又是一段话
<span>
<font color="#00f">
这也是一句孤立的话
</font>
</span>
</p>
<div style="background-color: aqua; width: 50%;height: 200px;">
<p align="center">
这是div1中的一段话
</p>
</div>
<div style="background-color: brown;">
<p align="center" style="color:aliceblue">
这是div2中的一段话
</p>
</div>
</body>
</html>
1.1.2 文本格式化元素
- b/strong:加粗
- i/em:斜体
- sup:上标文本
- sub:下标文本
- small:小号文本
- big:大号文本
- bdo:文本方向 dir属性来标记文本方向 ltr rtl
<!DOCTYPE html>
<html>
<head>
<title>02文本格式化元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<span>
<b><i>加粗斜体文本</i></b>
</span>
<br>
<span>
<small>小号文本</small><br>
<big>大号文本</big><br>
</span>
<!--An=A1+(n-1)*d-->
<p>
A<sub>n</sub>=A<sub>1</sub>+(n-1)*d<br>
</p>
<!-- 2^x=n 推出 x=log2n-->
<p>
2<sup>x</sup>=n 推出 x=log<sub>2</sub>n<br>
</p>
<bdo dir="ltr">
JavaPythonC++
</bdo>
<br>
<bdo dir="rtl">
JavaPythonC++
</bdo>
</body>
</html>
常见的转义字符
<
:<>
:>
:空格¥
:¥"
:"÷
:֩
:©®
: ®
1.1.3 语义相关元素
- abbr:缩写,用title属性来标记全称
- address:地址,块级元素
- blockquote:长段引用,用cite属性标记引用的出处 块级元素
- q:短引用,用cite属性标记引用的出处,默认加双引号
- cite:表示作品的名称
- code:表示一段代码 块级
- pre:预格式化 块级
- kbd:键盘录入标记
- dfn:专业术语
- var:变量标签
- del:删除文本
- ins:插入文本
1.1.4 超链接和锚点
只有一个标签<a>
,有如下几个重要的属性:
- href:所链接到的资源,可以是本地的,也可以是互联网上的
- target:新链接的打开方式,
_self
,_blank
- media:媒体类型
<!DOCTYPE html>
<html>
<head>
<title>04超链接与锚点</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<a href="04超链接与锚点.html#end">点击此处到达文章末尾</a>
<a href="http://www.baidu.com" target="_self">点击打开百度</a><br>
<a href="http://www.baidu.com" target="_blank">点击打开百度</a><br>
<a href="C:\Users\HENG\Desktop\WebDay01\01基本元素.html" target="_blank">打开01基本元素.html</a><br>
<a href="http://www.baidu.com">
<img src="logo.jpg" width="100px">
</a><br>
<!--做一个锚点-->
<a name="end">这是一个页面的结尾锚点</a>
</body>
</html>
1.1.5 列表相关元素
- ul:无序列表
- type属性:circle、disc、square
- ol:有序列表
- type属性:1,A,I
- start:起始编号
- li:有序和无序列表的子选项
- dl:自定列表
- dt:自定义分类
- dd:自定义的选项
<!DOCTYPE html>
<html>
<head>
<title>05列表相关</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<ul type="square">
<li>java</li>
<li>C++</li>
<li>Python</li>
</ul>
<ol type="I" start="2">
<li>java</li>
<li>C++</li>
<li>Python</li>
<li>java</li>
<li>C++</li>
<li>Python</li>
</ol>
<dl>
<dt>宇智波家族有谁:</dt>
<dd>啥是gay</dd>
<dd>一打七</dd>
<dd>马达拉</dd>
<dt>千手家族有谁:</dt>
<dd>大奶牛</dd>
<dd>哈希他妈</dd>
</dl>
</body>
</html>
1.1.6 图形图形相关元素
img标签主要用于表示一个图像,有这么几个重要的属性:
- src:图片的路径 可以是本地的 可以是网络上的
- width:宽度
- height:高度
- alt:如果图片加载不出来,则用alt文本表示
- title:图片的文字说明
- bodder:边框
<!DOCTYPE html>
<html>
<head>
<title>06图形图像</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<img src="logo.jpg" width="400px" title="迪丽热巴我爱你"/><br>
<img src="logo.jpg" height="200px" border=10/><br>
<img src="https://bkimg.cdn.bcebos.com/pic/37d3d539b6003af33a87a65fc160d15c1038534318f3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5" height="100px"/>
<br>
<img src="" alt="图片正在加载"/>
<p>
这位是我<img src="logo.jpg" height="200px"><br>
这位是我<img src="logo.jpg" height="200px" align="center"><br>
这位是我<img src="logo.jpg" height="200px" align="top"><br>
这位是我<img src="logo.jpg" height="200px" align="bottom"><br>
这位是我<img src="logo.jpg" height="200px" align="middle"><br>
这位是我<img src="logo.jpg" height="200px" align="left"><br>
这位是我<img src="logo.jpg" height="200px" align="right"><br>
</p>
<hr>
<br>
<img src="logo.jpg" usemap="#Map"/>
<map name="Map">
<area shape="circle" coords="402,299,23" href="http://www.newcoder.com" target="_blank">
<area shape="rect" coords="456,251,485,319" href="http://www.newcoder.com" target="_blank">
<area shape="poly" coords="400,365,446,268,446,381" href="http://www.newcoder.com" target="_blank">
</map>
</body>
</html>
1.1.7 表格相关元素
- table:表示表格的标签,最多有一个caption表格标题,最多有一个theader表头,最多有一个tfoot表尾,多个tr行,多个td单元格,多个th加粗的tr
- cellspacing:单元格与单元格之间的间距
- cellpadding:单元格内的内边距
- width:表格的宽度
- align:表格内容的对齐方式
- bgcolor:表格的背景颜色
- background:表格的背景图片
- caption:表格的标题
- tr:表格的行
- td:表格的单元格
- rowspan:跨行
- colspan:跨列
- height:高度
- width:宽度
- th:页眉单元格
- tbody:表格的主体部分
- thead:表头
- tfoot:表尾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table border="1" cellspacing="0" cellpadding=""width="800px">
<colgroup >
<col style="font-weight: bold; width: 30px;"/>
<col style="font-weight: bold;"
</colgroup>
<tr>
<td colspan="2" style="font-weight: bold;">回单类型</td>
<td>网上转账汇款</td>
<td colspan="2" style="font-weight: bold">指令序号</td>
<td>Hoh0000000000000000000</td>
</tr>
<tr>
<td rowspan="4" style="font-weight: bold">收款人</td>
<td>户名</td>
<td>老牟</td>
<td rowspan="4" style="font-weight: bold">付款人</td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td style="font-weight: bold">卡号</td>
<td>0000000000001</td>
<td style="font-weight: bold">卡号</td>
<td>0000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td style="font-weight: bold">网点</td>
<td>工商江苏南京业务处理中心</td>
<td style="font-weight: bold">网点</td>
<td colspan="2">江苏徐州业务处理中心</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold">币种</td>
<td >人民币</td>
<td colspan="2" style="font-weight: bold">钞汇标志</td>
<td colspan="2" style="text-decoration: under;">钞票</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold">金额</td>
<td>1.00元</td>
<td colspan="2"style="font-weight: bold">手续费</td>
<td colspan="2">.0.57元</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold">合计</td>
<td colspan="4">人民币(大写):壹元整</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold"style="font-weight: bold">交易时间</td>
<td >2017年6月1日</td>
<td colspan="2"style="font-weight: bold">时间戳</td>
<td colspan="2">2017-06-01-13:00:00</td>
</tr>
</table>
<h4>票据打印时间</h4>
<h4 style="text-decoration: line-through;">票据打印单位:江苏徐州业务中心</h4>
<h4>操作员:大曾</h4>
</body>
</html>
1.1.8 表单相关元素
之前所说的标签元素,都是以展示数据为主,为了增强网页的交互效果,让用户从网页上提交一些数据给服务器,就需要表单相关的元素
- form标签:表单标签,form当中的其他控件当做整体去提交给我们的服务器的。
对于form的属性而言:
- action属性:我们将表单的数据提交到哪里去?一般会去提交到服务器上的一个专门处理数据提交的文件。
- method属性:数据的提交方式,post和get。get提交的数据是明文的,post提交的数据经过封装的。
常见的一些控件
- input:其中有type属性,type属性的不同,则会导致input表现的形式也会不同
- text:文本框
- password:密码框
- radio:单选框
- checkbox:复选框
- submit:提交按钮
- reset:重置按钮
- button:按钮
- image:图像
- file:文件上传
- select
- textarea
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>01表单相关元素</title>
</head>
<body>
<!--定义表单-->
<form action="#" method="get">
单行文本框:<input type="text" placeholder="请输入XXX"><br>
不可编辑的文本框:<input type="text" readonly><br>
密码框:<input type="password"><br>
隐藏文本框:<input type="hidden"><br>
第一组单选框:<br>
<input type="radio" name="wife">迪丽热巴<br>
<input type="radio" name="wife">哈妮克孜<br>
<input type="radio" name="wife">马尔扎哈<br>
第二组单选框:<br>
<input type="radio" name="boyfirend">王一博<br>
<input type="radio" name="boyfirend">朱一龙<br>
<input type="radio" name="boyfirend">吴彦祖<br>
复选框:<br>
<input type="checkbox" name="myboy">王一博<br>
<input type="checkbox" name="myboy">朱一龙<br>
<input type="checkbox" name="myboy">吴彦祖<br>
文件上传:<input type="file"><br>
图像域:<input type="image" src="logo.jpg"><br>
下面是常见的四个按钮:<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="submit" value="取消" disabled >
<input type="button" value="按钮">
<button>登录</button>
</form>
</body>
</html>
使用label标签
扩大当前控件的点击空间,当前控件+文字说明
<label for="username">单行文本框:</label>
<input id="username" type="text" placeholder="请输入XXX"><br>
不可编辑的文本框:<input type="text" readonly><br>
<label>密码框:<input type="password"><br></label>
隐藏文本框:<input type="hidden"><br>
第一组单选框:<br>
<label><input type="radio" name="wife">迪丽热巴</label><br>
<label><input type="radio" name="wife">哈妮克孜</label><br>
<label><input type="radio" name="wife">马尔扎哈</label><br>
select标签下拉框
<!--展开+多选-->
<select name="高级编程语言" multiple size="3">
<option>Java</option>
<option>C++</option>
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
</select>
<br>
<select name="城市选择" >
<optgroup label="西安">
<option value="高新区">高新区</option>
<option value="雁塔区">雁塔区</option>
<option value="碑林区">碑林区</option>
</optgroup>
<optgroup label="咸阳">
<option value="渭城区" selected>渭城区</option>
<option value="秦都区">秦都区</option>
</optgroup>
</select>
textarea标签
用于输入一段文字的
- cols:横向的宽度
- rows:纵向的高度
<textarea cols="50" rows="50">
</textarea>
HTML5新增的一些表单属性
- placeholder:作为文本框的输入提示
- autofocus:自动获取焦点
- required:提交后的检查,必须填写
- list:是将下拉框和文本框进行结合
<form>
请输入书名:<input type="text" list="books"><br>
</form>
<datalist id="books">
<option>Java从入门到放弃</option>
<option>深入浅出Java</option>
<option>7天精通Java</option>
</datalist>
HTML5新增的一些input的类型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>02新增input类型</title>
</head>
<body>
<form action="#" method="get">
选择颜色:<input type="color"><br>
选择日期:<input type="date"><br>
选择时间:<input type="time"><br>
选择月份:<input type="month"><br>
选择周期:<input type="week"><br>
<!--输入类型检测 在提交数据的时候检测-->
检测邮箱:<input type="email"><br>
检测网址:<input type="url"><br>
选择数字:<input type="number"><br>
选择区间:<input type="range"><br>
<button type="submit">提交</button>
</form>
</body>
</html>
1.2 HTML5 新增的属性
1.2.1 contentEditable属性
将那些原本不可编辑的元素,变成可编辑的状态,该属性具有继承性,上层元素如果定义了该属性,则下层元素都可被编辑
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body>
<div contenteditable="true">
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
<div ondblclick="this.contentEditable=true">
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
</body>
</html>
1.2.2 designMode属性
相当于全局的contentEditable属性,designMode不属于html中的属性,在js中调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body ondblclick="document.designMode='on'">
<div>
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
<div>
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
</body>
</html>
1.2.3 hidden属性
隐藏属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body>
<div id="target" hidden="true">
文字内容
</div>
<button onclick="var target=document.getElementById('target');target.hidden=!target.hidden">显示/隐藏</button>
</body>
</html>
1.2.4 spellcheck属性
拼写检查,主要用于输入框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body>
<form>
<textarea cols="10" rows="10" spellcheck="true">
</textarea>
</form>
</body>
</html>
1.3 HTML5新增常用元素
1.3.1 文档结构元素
- article:表示一遍独立的文章
- 内部用header来表示标题
- 内部用footer表示脚注
- 内部用section表示段落/文章
- 内部用article表示回复的文章
- section:文章的段落
- nav:导航栏
- aside:附属信息
- header:文章头部信息
- footer:文章脚注信息
- figure:表示一块独立的图片区域,可以包含多image图片
- figcation:图片区域的标题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<!--一篇独立的文章-->
<article>
<header>
<h1>高考750分和750w那个重要?</h1>
<div>作者:HENG</div>
</header>
<p>
一年前,你选了750分,我选了750万人民币。<br>
11个月前,你成为全国家喻户晓的考神;我成为鼠目寸光的笑柄。
</p>
<!--第一个回答-->
<section>
<article>
<header>
<h3>我觉得750分很重要</h3>
<div>作者:啦啦</div>
</header>
<p>
高考750,如果是裸分,你将会是历史上第一个真正高考拿满的人,<br>
这样的奇迹在几百年内也很难说会再次出现。<br>
你会立刻登顶各平台热搜榜,全国人民愿称你为真正的考神,<br>
几十年后营销号还会不依不饶拿你开刀。拥有这样的流量,<br>
你的潜在财富难道没有750w吗?高考750,<br>
意味着你拥有一颗极其聪明而严谨的大脑,<br>
能够拿下所有难题并且保证细节上也不丢一分,<br>
还能写出满分语文和英语作文。拥有这样强大的大脑,<br>
你难道想不出几百种办法去赚够750w吗?
</p>
</article>
</section>
<!--第二个回答-->
<section>
<article>
<header>
<h3>我觉得750w很重要</h3>
<div>作者:嘻嘻</div>
</header>
<p>
当然是考750分的能力。我考了750分,肯定成网红。<br>
<img width=200px src="https://pic1.zhimg.com/80/v2-9841b837264cd8eda4ba282193bae9f0_1440w.jpg?source=1940ef5c">
</p>
</article>
</section>
<footer>
以上言论仅代表作者自身观点,与本平台无关!
</footer>
<aside>
<h3>关于楼主</h3>
<section>
<div>用户组:管理员</div>
<div>注册日期:2020-02-02</div>
</section>
</aside>
</article>
<aside>
<h3>页面导航</h3>
<nav>
<ul>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">最新</a></li>
<li><a href="http://www.baidu.com">热门</a></li>
</ul>
</nav>
</aside>
<figure style="border: 2px solid black;padding:5px;width:500px;">
<figcaption>我的媳妇们</figcaption>
<img src="logo.jpg">
<img src="logo.jpg">
<img src="logo.jpg">
</figure>
</body>
</html>
1.3.2 语义相关元素
- mark:重点标记
- meter:已知最大值和最小值的计数器
- value属性:当前值
- min:最小值
- max:最大值
- low:最小范围
- high:最大范围
- optimum:最佳范围
- progress:进度条
- max:最大值
- value:当前值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<mark>HTML5</mark>是非常简单的技术<br>
<meter min="0" max="100" low="30" high="80" value="10">10</meter><br>
<progress value="30" max="100"></progress>
<progress ></progress>
</body>
</html>
第二部分 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:延迟时间
<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>
案例——旋转太极
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
* {
margin: 0;
padding: 0;
background-color: #ccc;
}
@keyframes taijirotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.taiji {
width: 0px;
height: 300px;
border-left: 150px solid white;
border-right: 150px solid black;
border-radius: 50%;
animation: taijirotate 3s linear infinite;
}
.taiji::before {
display: block;
content: "";
background-color: white;
width: 50px;
height: 50px;
border: 50px solid black;
border-radius: 50%;
margin-left: -72px;
}
.taiji::after {
display: block;
content: "";
background-color: black;
width: 50px;
height: 50px;
border: 50px solid white;
border-radius: 50%;
margin-left: -72px;
}
</style>
</head>
<body>
<div class="taiji">
</div>
</body>
</html>
案例——3D图像魔方
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
/*开启3D视距 如果没有视距 则无法透视出3D效果*/
body {
perspective: 5000px;
}
@keyframes myanimation {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.container {
width: 200px;
height: 200px;
margin: 300px auto;
position: relative;
/*以3D显示效果*/
transform-style: preserve-3d;
animation: myanimation 5s linear infinite;
}
.container>img {
width: 200px;
height: 200px;
position: absolute;
}
.container>img:first-child {
/*底部照片*/
transform: translateZ(-200px);
}
.container>img:last-child {
/*顶部*/
}
.container>img:nth-child(2) {
/*左边*/
left:-200px;
transform-origin: right;
transform: rotateY(-90deg);
}
.container>img:nth-child(3) {
/*上边*/
top:-200px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.container>img:nth-child(4) {
/*右边*/
right:-200px;
transform-origin: left;
transform: rotateY(90deg);
}
.container>img:nth-child(5) {
/*下边*/
bottom:-200px;
transform-origin: top;
transform: rotateX(-90deg);
}
.container:hover img:first-child {
transform: translateZ(-300px);
}
.container:hover img:last-child {
transform: translateZ(100px);
}
.container:hover img:nth-child(2) {
transform: rotateY(-90deg) translateZ(100px);
}
.container:hover img:nth-child(3) {
transform: rotateX(90deg) translateZ(100px);
}
.container:hover img:nth-child(4) {
transform: rotateY(90deg) translateZ(100px);
}
.container:hover img:nth-child(5) {
transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="container">
<img src="img/mv1.jpg">
<img src="img/mv2.jpg">
<img src="img/mv3.jpg">
<img src="img/mv4.jpg">
<img src="img/mv5.jpg">
<img src="img/mv6.jpg">
</div>
</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-end
center 紧凑居中
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>