超链接伪类样式、div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1
{
width: 200px;
height: 200px;
background-color: pink;
}
/*
link:设置全新的超链接的效果
hover：鼠标悬停状态的链接样式
active:按下未抬起 样式效果
visited:访问之后
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
*/
a:visited
{
color: gray;
}
a:link
{
font-family: 楷体;
color: green;
text-decoration: none;
}
a:hover
{
color: red;
font-size: 30px;
cursor: help;
}
a:active
{
font-family: 黑体;
}
/* cursor属性：设置鼠标的展示形态 ，但是需要注意的是，在不同的浏览器和不同的操作系统中展示效果会有所不同，但是其展示效果所代表的意义是不变的。
url：可以引用一个图片设置鼠标的展示效果，但是如果使用这个属性的时候一般会再定义一种普通光标，防止url一旦无效的时候没有可用的光标来展示。
default：浏览器默认的状态，通常在大多数的浏览器中展示的效果都是一个箭头。
auto：根据浏览器的不同而定，这个取值是遵从在浏览器中定义的光标样式。
crosshair：光标呈现为一个十字线。
pointer：光标呈现为一个指示到链接的指针（小手样式）。
move：光标标识此对象可能被移动。
text：光标指示文本。
wait：在老版本的系统中此光标展示效果如同一个沙漏图标，新系统中有滚动图标。一般表示正在忙；
help：帮助类型的图标样式，一般展示效果为一个问号。
*/
</style>
</head>
<body>
<!--
在网页中划分一块区域
div是块便签，独占一行
行标签默认不支持width和height属性
-->
<div id="div1">a</a></div>
<span id="div1">b</span><br>
<!--
超链接伪类样式：超链接内容在不同的情况下呈现出不同的样式。
-->
<a href="https://www.baidu.com">百度</a><br>
<a href="https://www.jd.com">京东</a><br>
<a href="https://www.taobao.com">淘宝</a><br>
</body>
</html>
浮动流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#page
{
width: 600px;
height: 800px;
background-color: antiquewhite;
border: 1px solid olivedrab;
}
img
{
float: left;
}
</style>
</head>
<body>
<div id="page">
<img src="../img/一寸.jpg" alt="">
20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。Sun公司为了抢占市场先机，在1991年成立了一个称为Green的项目小组，帕特里克、詹姆斯·高斯林、麦克·舍林丹和其他几个工程师一起组成的工作小组在加利福尼亚州门洛帕克市沙丘路的一个小工作室里面研究开发新技术，专攻计算机在家电产品上的嵌入式应用。
由于C++所具有的优势，该项目组的研究人员首先考虑采用C++来编写程序。但对于硬件资源极其匮乏的单片式系统来说，C++程序过于复杂和庞大。另外由于消费电子产品所采用的嵌入式处理器芯片的种类繁杂，如何让编写的程序跨平台运行也是个难题。为了解决困难，他们首先着眼于语言的开发，假设了一种结构简单、符合嵌入式应用需要的硬件平台体系结构并为其制定了相应的规范，其中就定义了这种硬件平台的二进制机器码指令系统（即后来成为“字节码”的指令系统），以待语言开发成功后，能有半导体芯片生产商开发和生产这种硬件平台。对于新语言的设计，Sun公司研发人员并没有开发一种全新的语言，而是根据嵌入式软件的要求，对C++进行了改造，去除了留在C++的一些不太实用及影响安全的成分，并结合嵌入式系统的实时性要求，开发了一种称为Oak的面向对象语言。
由于在开发Oak语言时，尚且不存在运行字节码的硬件平台，所以为了在开发时可以对这种语言进行实验研究，他们就在已有的硬件和软件平台基础上，按照自己所指定的规范，用软件建设了一个运行平台，整个系统除了比C++更加简单之外，没有什么大的区别。1992年的夏天，当Oak语言开发成功后，研究者们向硬件生产商进行演示了Green操作系统、Oak的程序设计语言、类库和其硬件，以说服他们使用Oak语言生产硬件芯片，但是，硬件生产商并未对此产生极大的热情。因为他们认为，在所有人对Oak语言还一无所知的情况下，就生产硬件产品的风险实在太大了，所以Oak语言也就因为缺乏硬件的支持而无法进入市场，从而被搁置了下来。
1994年6、7月间，在经历了一场历时三天的讨论之后，团队决定再一次改变了努力的目标，这次他们决定将该技术应用于万维网。他们认为随着Mosaic浏览器的到来，因特网正在向同样的高度互动的远景演变，而这一远景正是他们在有线电视网中看到的。作为原型，帕特里克·诺顿写了一个小型万维网浏览器WebRunner。 [4]
1995年，互联网的蓬勃发展给了Oak机会。业界为了使死板、单调的静态网页能够“灵活”起来，急需一种软件技术来开发一种程序，这种程序可以通过网络传播并且能够跨平台运行。于是，世界各大IT企业为此纷纷投入了大量的人力、物力和财力。这个时候，Sun公司想起了那个被搁置起来很久的Oak，并且重新审视了那个用软件编写的试验平台，由于它是按照嵌入式系统硬件平台体系结构进行编写的，所以非常小，特别适用于网络上的传输系统，而Oak也是一种精简的语言，程序非常小，适合在网络上传输。Sun公司首先推出了可以嵌入网页并且可以随同网页在网络上传输的Applet（Applet是一种将小程序嵌入到网页中进行执行的技术），并将Oak更名为Java（在申请注册商标时，发现Oak已经被人使用了，再想了一系列名字之后，最终，使用了提议者在喝一杯Java咖啡时无意提到的Java词语）。5月23日，Sun公司在Sun world会议上正式发布Java和HotJava浏览器。IBM、Apple、DEC、Adobe、HP、Oracle、Netscape和微软等各大公司都纷纷停止了自己的相关开发项目，竞相购买了Java使用许可证，并为自己的产品开发了相应的Java平台。 [5-6]
1996年1月，Sun公司发布了Java的第一个开发工具包（JDK 1.0），这是Java发展历程中的重要里程碑，标志着Java成为一种独立的开发工具。9月，约8.3万个网页应用了Java技术来制作。10月，Sun公司发布了Java平台的第一个即时（JIT）编译器。
1997年2月，JDK 1.1面世，在随后的3周时间里，达到了22万次的下载量。4月2日，Java One会议召开，参会者逾一万人，创当时全球同类会议规模之纪录。9月，Java Developer Connection社区成员超过10万。
1998年12月8日，第二代Java平台的企业版J2EE发布。1999年6月，Sun公司发布了第二代Java平台（简称为Java2）的3个版本：J2ME（Java2 Micro Edition，Java2平台的微型版），应用于移动、无线及有限资源的环境；J2SE（Java 2 Standard Edition，Java 2平台的标准版），应用于桌面环境；J2EE（Java 2Enterprise Edition，Java 2平台的企业版），应用于基于Java的应用服务器。Java 2平台的发布，是Java发展过程中最重要的一个里程碑，标志着Java的应用开始普及。
</div>
</body>
</html>
内边距、外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#gz
{
border-color: brown;
border-style: groove;
border-width: 50px;
/* 内边距的要素：内边距距离
元素的背景颜色会覆盖：内容区和内边距
*/
/*
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
*/
padding: 20px;
/* 外边距 */
/* margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
margin-right: 100px; */
margin: 100px;
/*
间接的居中
margin: 0 auto;
*/
}
</style>
</head>
<body>
<img id="gz" src="../img/一寸.jpg" alt="">
</body>
</html>
内容区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1
{
/* 设置内容区的宽度和高度 */
width: 200px;
height: 200px;
/*
内容溢出:
overflow:专门针对于溢出了的内容当如何进行处理的样式设置
hidden：隐藏
visible：默认
scrol：显示出一个滚动条
auto：自动，溢出了就加滚动条
inherit：使得当前元素的内容溢出属性值，跟从父元素的设置。
*/
overflow: hidden;
/* 设置背景颜色 */
background-color: pink;
}
#div2
{
width: 600px;
height: 600px;
background-color: yellowgreen;
overflow:scroll
}
#div3
{
width: 200px;
height: 200px;
background-color: hotpink;
overflow: inherit;
}
</style>
</head>
<body>
<!--
内容区的样式信息
-->
<div id="div1">
</div>
<!-- inherit -->
<div id="div2">
<div id="div3">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</body>
</html>
元素边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#gz
/*
边框属性：
宽度、样式、颜色
border-style属性：
none：默认值
dotted：小圆点
dashed：虚线
solid：实线
double：双实线
groove：立体感的凹槽
ridge：脊形边框
inset：边框凹陷，即边框内嵌入一个立体边框
outset：边框凸起，即边框外嵌入一个立体边框
*/
{
/*
border-radius: 30px;
border-top-width: 20px;
border-top-style: solid;
border-top-color: black;
border-left-width: 20px;
border-left-style: solid;
border-left-color: gray;
border-right-width: 20px;
border-right-style: solid;
border-right-color: gray;
border-bottom-width: 20px;
border-bottom-style: solid;
border-bottom-color: black;
*/
/* 复合属性 */
border-top: 30px double red;
border-bottom: 30px dotted hotpink;
border-left: 30px dashed yellow;
border-right: 30px groove blue;
/* 复合属性 :
一个值代表：上下左右
两个值代表：上下、左右
三个值代表：上、左右、下
四个值代表：上、右、下、左
border-width:20px 40px 60px 80px;
border-style: solid double dashed dotted;
border-color:red blue yellow greenyellow;;
*/
}
#div
{
/* 边角带弧度 */
width: 200px;
height: 200px;
background-color: hotpink;
/*
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
*/
/* 复合属性
一个值代表：
两个值代表：
三个值代表：
四个值代表：左上、右上、右下、左下
*/
border-radius: 100px 100px 100px 100px;
/* 阴影
第一个值：据右边多少
第二个值：据下边多少
第三个值：虚化范围
第四个：阴影颜色
*/
box-shadow: 50px 50px 50px blue;
}
</style>
</head>
<body>
<img id="gz" src="../img/一寸.jpg" alt=""/>
<div id="div1"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
如果被定位的元素的父级元素被定位了，绝对定位跟随父元素的定位位置进行偏移
如果被定位的元素的父级元素没有被定位，绝对定位跟随浏览器窗口进行偏移
多个父级元素被定位，我们跟随最近的父级元素定位
*/
div
{
width: 200px;
height: 200px;
border-radius: 100px;/*圆角边框*/
/*绝对定位：
针对于浏览器窗口进行定位
*/
position: absolute;
}
#div1
{
background-color: red;
left: 100px;
/* z-index: 1000; */
}
#div2
{
background-color: green;
top: 100px;
left: 150px;
}
#div3
{
background-color: blue;
top: 100px;
left: 50px;
/* 定位层级
数越大，越在上边
数越小，越在下边
z-index
*/
z-index: 100;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
派生选择器的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
派生选择器会出现不好使的时候，加一个tbody
*/
table>tbody>tr>td
{
color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>你真好</td>
<td>你真好</td>
<td>你真好</td>
</tr>
<tr>
<td>你真好</td>
<td>你真好</td>
<td>你真好</td>
</tr>
<tr>
<td>你真好</td>
<td>你真好</td>
<td>你真好</td>
</tr>
</table>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d
{
width: 600px;
height: 800px;
background-color: hotpink;
}
#div1
{
width: 600px;
height: 200px;
background-color: red;
}
#div2
{
width: 200px;
height: 450px;
background-color: yellow;
float: left;
}
#div3
{
width: 400px;
height: 450px;
background-color: blue;
float: left;
}
#div4
{
width: 600px;
height: 150px;
background-color: black;
/* 清除向左浮动带来的影响 */
clear: left;
/*
left
right
both
*/
}
</style>
</head>
<body>
<div id="d">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
三种样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 行样式表 -->
<h1 style="color: red; font-size: 200px;font-family: 楷体;">这是啥啊</h1>
<!--
内部样式表：
将样式表的内容都定义在style标签中，这种方式使得样式表的内容嵌入在了HTML代码中。
因此内部样式表也被称之为“嵌入式样式表”
-->
<style>
h2
{
color: rebeccapurple;
}
</style>
<h2>这是啥啊</h2>
<h2>不会啊</h2>
<h2>那你学啊</h2>
<!-- 导入样式表 -->
<link rel="stylesheet" href="./1.css">
<h3>这还不简单？</h3>
<h3>你还学不会？</h3>
<h3>那你真菜</h3>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
需求：
1.所有具备target属性的超链接，文字字体都是 楷体 字体。
a[target]
{
font-family: 楷体;
}
2.在满足以上需求的同时，属性值必须是_blank的才遵从下面的样式
a[target="_blank"]
{
font-family: 楷体;
}
3.在满足需求1的同使，还具备title属性的元素才被有效的选中
*/
a[target][title]
{
font-family: 楷体;
}
</style>
</head>
<body>
<!-- 属性选择器的使用展示 -->
<a href="https://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="https://www.renren.com" target="_self" title="人人">人人网</a>
<a href="https://www.jd.com">京东</a>
</body>
</html>
外边距重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width:200px;
height:200px;
}
#div1
{
background-color: green;
margin-bottom: 100px;
}
#div2
{
background-color: red;
margin-top: 50px;
}
</style>
<!--
外边距的重叠只会发生在垂直方向上
-->
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p
{
/* 单词间隔*/
word-spacing: 30px;
/* 字符间隔 */
letter-spacing: 10px;
/* 水平对齐方式
text-align
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
*/
text-align: center;
/*
垂直对齐方式
vertical-align
top:垂直靠上对齐
text-top：使元素和上级元素的字体向上对齐
middle：垂直居中对齐
text-bottom：使元素和上级元素字体向下对齐
baseline：默认浏览器的垂直对齐方式
sub：文字的下标
super：文字的上标
*/
vertical-align: top;
/* 行高
height-line
*/
}
h1
{
/* 文本修饰
text-decoration
none:默认值
underline：下划线
overline：上划线
line-through：删除线
blink：文字闪烁
*/
text-decoration: underline;
}
</style>
</head>
<body>
<p>大江东去，浪淘尽，千古风流人物</p>
<p>hello world</p>
<h1>这他妈是啥</h1>
</body>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1
{
background-color: hotpink;
/*
浮动流
什么时候停？
1.父容器的边界
2.触碰到另一个浮动元素的边框
*/
/* float: left; */
float: right;
width: 200px;
height: 200px;
}
#div2
{
background-color: yellowgreen;
float: right;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!--
逐行进行，按照body中代码中的顺序进行逐行执行，与样式表中的顺序无关。
-->
<div id="div1"></div>
<div id="div2"></div>
<span style="background-color: red; width: 200px; height: 200px; float: left;">你好</span>
<h1 style="background-color: blue; width: 200px; height: 200px; float: left;">你坏</h1>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
background-color: hotpink;
width: 200px;
height: 200px;
/* 定位方式：相对定位
偏移量
left：从左向右建立坐标
right：从右向左建立坐标
top：从上到下建立坐标
bottom：从下到上建立坐标
相对定位的特点：使得元素不脱离文档流
*/
position: relative;/*相对定位*/
left: 100px;/*向右偏移*/
top: 100px;/*向下偏移*/
}
/*
固定定位：
position:fixed;
就是不管页面怎么滑动，就固定在那一个位置，不动了。
*/
</style>
</head>
<body>
<div></div>
你真好
</body>
</html>
行标签，块标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a
{
width: 200px;
height: 200px;
background-color: hotpink;
color: red;
}
</style>
</head>
<body>
<!--
1.首先在一个新的网页上创建如下三种元素
a.一个行元素例如strong
b.一个块元素例如div
c.一个替换元素例如 input
2.使得创建的元素都引用同一个类选择器
3.在类选择器中尝试不同的样式属性，看看，哪些内容尊崇而哪些内容不遵从。
-->
<strong class="a">111</strong>
<div class="a">222</div>
<input class="a" type="text">
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
优先级：ID > 类 > 标签
-->
<!-- 类选择器 -->
<style>
.a
{
color: red;
}
.b
{
color: green;
}
</style>
<style>
#c
{
color: red;
}
#d
{
color: green;
}
</style>
</head>
<body>
<h1 class="a">这是红的</h1>
<h1 class="b">这是绿的</h2>
<h1 class="a">这是红的</h1>
<h1 class="b">这是绿的</h2>
<!-- id选择器 -->
<h1 id="c">ID是c</h1>
<h1 id="d">ID是d</h2>
</body>
</html>
选择器分组、后代选择器、派生选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
选择器分组：描述的是一种选择器的关系，选择器之间的分割使用 “,”。
*/
h1,h2,h3,h4,h5,h6
{
color: hotpink;
}
/*
后代选择器：选择器使用 空格 分割
*/
strong u
{
color: red;
}
/*
派生选择器：选择器使用 > 分割
*/
strong>u
{
color: blue;
}
</style>
</head>
<body>
<h1>你真好</h1>
<h2>你真好</h2>
<h3>你真好</h3>
<h4>你真好</h4>
<h5>你真好</h5>
<h6>你真好</h6>
<em><u>你好么</u></em>
<strong>我很好</strong>
<strong><u>我也很好</u></strong>
<strong><em><u>王彬很好</u></em></strong>
</body>
</html>
样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a
{
/* 内容颜色 */
color: red;
/* 背景颜色
直接输入颜色
rgb(255-0,255-0,255-0)
#十六进制数，六位，每两位表示一个数字
*/
background-color: green;
/* 背景图片 */
background-image: url("../img/timg.jpg");
}
#b
{
/* 背景图片 */
background-image: url("../img/timg.jpg");
/* 背景图片重复 */
/*
repeat-x ：横向重复
repeat-y： 纵向重复
repeat： 全重复
no-repeat:不重复
*/
background-repeat: no-repeat;
/* 背景图片盖在背景色上 */
/* 背景位置
左：left
右：right
中间： center
上：top
下:bottom
也可以通过百分比来控制图片位置
50% 50%
也可以通过像素来控制图片位置
10px 10px
*/
background-position: no-repeat;
/* 固定图片，不滚动 */
background-attachment: fixed;
/* 复合属性
backhround: 后面跟5个参数
*/
}
</style>
</head>
<body id="b">
<h1 id="a">红字绿底</h1>
</body>
</html>
样式属性的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1
{
font-size: 25px;
font-family: 楷体;
color: red;
background-color: hotpink;
width: 200px;
height: 200px;
border: 10px solid black;
}
#div2
{
background-color: yellowgreen;
width: 100px;
height: 100px;
border: inherit;
}
</style>
</head>
<body>
<!--
1.打造一对父子元素
2.对于父元素设置可继承的样式，例如文字相关的样式。
3.然后再子元素中写入内容，观察子元素是否继承了父元素的样式内容。
4.设置边框（给父元素）【明白有些样式属性是不能继承的】
5.对于不能继承的样式，设置其值为inherit，使得这个内容被强制继承。
-->
<div id="div1">
<div id="div2">样式属性的继承</div>
</div>
</body>
</html>
引入字体文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 引入字体文件 */
@font-face {
font-family: abc;
src: url("../font/FZBenMXYTJW.TTF");
}
#a
{
font-family: abc;
}
</style>
</head>
<body>
<h1 id="a">哈哈哈哈</h1>
</body>
</html>
隐藏属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width:200px;
height:200px;
}
#div1
{
background-color: red;
}
#div2
{
background-color: green;
}
/*
display:（隐藏后空间就没了）
inline:变成行元素
block：变成块元素
inline-block：变成块元素且不独自占一行
none:隐藏
visibility:（隐藏后空间还在）
visible:设置对象可见默认值
hidden：设置对象隐藏不可见，但是占据原有的空间
*/
a
{
list-style-type: disc;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<ul id="a">
<li>红烧牛肉</li>
<li>葱香排骨</li>
<li>老坛酸菜</li>
<li>小鸡蘑菇</li>
</ul>
</body>
</html>
网友评论