标签：web 元素 测试 color 前置 background 笔记 1div div
有哪些端？
- Web前端手机也行电脑也行-浏览器
- 移动端在手机
- PC客户端在电脑
- 后端/后台
前端主要负责两个事：
- 负责用户数据的输入
- 负责向用户展示数据
前端主要的知识点
- 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：插入文本
<!DOCTYPE html>
<html>
<head>
<title>03语义相关元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<abbr title="西安鸥鹏互联科技有限公司">西安鸥鹏</abbr><br>
西安鸥鹏的地址是<address>陕西省西安市自力大厦</address>
呵呵呵<br>
<blockquote>
北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
</blockquote>
<q>Java很好学，呵呵~</q>
上述话是<cite>鸥鹏张老师</cite>说的
<br>
<code>
#include<stdio.h><br>
void main(){<br>
printf("HelloWorld!");<br>
}
</code>
<pre>
#include<stdio.h>
void main(){
printf("HelloWorld!");
}
</pre>
呵呵
众所周知<kbd>ctrl + c</kbd>是复制<br>
在Linux中<kbd>list -l</kbd>显示当前目录的信息<br>
<dfn>HTML</dfn>是超文本标记语言<br>
<var>i</var>+<var>j</var>=10
在Java多线程中，<del>stop()</del>方法已经过时，推荐使用<ins>interrupt()</ins>
</body>
</html>
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>
电影海报页面
<!DOCTYPE html>
<html>
<head>
<title>练习01电影页面</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<!--标题栏-->
<div style="margin-top: 20px;padding: 20px;">
<h1>热门电影版块</h1>
<hr color="#CCC" size="1">
<span><strong>最近热门电影</strong></span>
<span style="margin-left: 50px;">热门</span>
<span style="margin-left: 50px;">最新</span>
<span style="margin-left: 50px;">豆瓣高分</span>
<span style="margin-left: 50px;">欧美</span>
<span style="margin-left: 50px;">日韩</span>
<span style="margin-left: 50px;">国产</span>
<span style="margin-left: 50px;">冷门佳片</span>
<span style="margin-left: 50px;">更多>></span>
<hr color="#CCC" size="1">
</div>
<!--海报行-->
<div style="height: 400px; margin-top: 20px;">
<img src="movie01.jpg" width="23%" height="90%">
<img src="movie02.jpg" width="23%" height="90%">
<img src="movie03.jpg" width="23%" height="90%">
<img src="movie04.jpg" width="23%" height="90%">
</div>
<!--电影名-->
<div style="height: 50px;margin-top: 10px;">
<span style="font-size: 25px;width: 23%;">
<a href="magnet:?xt=urn:btih:5c839b8e2f8d73d813353b2c572f4170c2353bde&dn=%e9%98%b3%e5%85%89%e7%94%b5%e5%bd%b1www.ygdy8.com.%e6%88%91%e5%92%8c%e6%88%91%e7%9a%84%e5%ae%b6%e4%b9%a1.HD.1080p.%e5%9b%bd%e8%af%ad%e4%b8%ad%e8%8b%b1%e5%8f%8c%e5%ad%97.mp4&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2fexplodie.org%3a6969%2fannounce&tr=udp%3a%2f%2fexodus.desync.com%3a6969%2fannounce">我和我的家乡</a>
</span>
<span style="font-size: 25px;width: 23%;margin-left: 120px;">
<a>沐浴之王</a>
</span>
<span style="font-size: 25px;width: 23%;margin-left: 170px">
<a>雪谷之狼</a>
</span>
<span style="font-size: 25px;width: 23%;margin-left: 170px">
<a>一秒钟</a>
</span>
</div>
</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>
<title>07表格相关元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<table background="logo.jpg" border="1" width=400 cellspacing=0 cellpadding=0 align="center" style="text-align: center;">
<colgroup >
<col style="width: 50%;" bgcolor=#0f0>
<col style="width: 50%;">
</colgroup>
<caption><b>上课安排表</b></caption>
<thead></thead>
<th>课程</th>
<th>老师</th>
</thead>
<tbody>
<tr>
<td>Web前置课</td>
<td>HENG</td>
</tr>
<tr>
<td>JavaSE</td>
<td>HENG</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" style="text-align: right;">共计两门课程</td>
</tfoot>
</table>
</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>
标签：web,元素,测试,color,前置,background,笔记,1div,div 来源： https://blog.csdn.net/huanghuai_/article/details/112470870
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。