<!DOCTYPE html>
<html>
<head>
<title>作业</title>
</head>
<body>
<center>
<a name="bottom"></a>
<a href="#top">去底部</a>
<a name="bottom"></a>
<a href="#top">去指定位置</a>
<h1>杀死那个石家庄人</h1>
<hr>
<a href="https://www.baidu.com" target="_blank"><h3>
包包.suyi</h3>
</a>
<p>
晚六点下班<br>
换掉药厂的衣裳<br>
妻子在熬粥<br>
我去喝几瓶啤酒<br>
如此生活三十年<br>
直到大厦崩塌<br>
</p>
<img src="01.jpg" alt="歌曲插图" width="220" height="180">
<p>
云层深处的黑暗啊<br>
淹没心底的景观<br>
在八角柜台<br>
疯狂的人民商场<br>
用一张假钞<br>
买一把假枪<br>
保卫她的生活<br>
直到大厦崩塌<br>
夜幕覆盖华北平原<br>
忧伤浸透她的脸<br>
</p>
<img src="02.jpg" alt="歌曲插图" width="220" height="180">
<p>
河北师大附中<br>
乒乓少年背向我<br>
沉默的注视<br>
无法离开的教室<br>
生活在经验里<br>
直到大厦崩塌<br>
一万匹脱缰的马<br>
在他脑海里奔腾<br>
如此生活三十年<br>
直到大厦崩塌<br>
云层深处的黑暗啊<br>
淹没心底的景观<br>
</p>
<hr>
<P>友情链接:
<a href="https://www.baidu.com" target="_blank">A网站</a>|
<a href="https://www.baidu.com" target="_blank">B网站</a>|
<a href="https://www.baidu.com" target="_blank">C网站</a>
</a></P>
<p>
<a name="top"></a>
<a href="#bottom">去顶部 </a>|
<a href="https://www.baidu.com" target="_blank">联系我们</a></p>
</center>
</body>
</html>
超链接
target="_blank"在一个新页面打开
css:层叠样式表
内部样式写在头标签里
外部样式表使用
/* */多行注释
css语法规范:选择器{声名块}一个声明块中可以有多个声明要用‘;’隔开
块元素:div p h1-h6 ul li...独占一行,从上往下排列
内联元素:span a img iframe input...只占自身大小,从左往右排,自动换行
元素选择器:选中页面上所有的指定元素,元素名(例如:div p ul等){属性:值}
id选择器:具有唯一性,不能重复 .类名{属性:值}
类选择器:指定相同类的元素 #id名{属性:值}
并集选择器:通过选择器分组同时选中多个选择器对应的元素通过‘,’连接 #p1,.p2{属性:值}
通配选择器:选中页面上所有的元素 *{属性:值}
复合(交集)选择器:同时满足多个选择器的元素 标签必须满足:既有标签一的特点,也有标签二的特点 div.p1{属性:值}
后代元素选择器:用来选择元素的所有后代 div span{属性:值}
子元素选择器:选中指定父元素中的指定子元素 div > span{属性:值}
p:first(last)-child{属性:值}第一个和最后一个子标签
:nth-child选择指定位置的子元素
:first-of-type :last-of-type 从当前开始
兄弟元素选择器:span+p{属性:值}选择紧挨着span后边的兄弟元素 span~p选择span后边所有的p元素
否定伪类: p:not(类名){属性:值} 选择除了某个类之外的所有元素
样式的继承:可以把最基本的样式设置给祖先元素,他所有的后代都会自动继承,背景 边框 定位 都不会被继承
选择器—餐厅练习
答案:
1.plate
2.bento
3.#fancy
4.plate apple
5.#fancy pickle
6. .small
7.orange.small
8.bento orange
9.plate,bento
11.plate*
12.plate+
13.bento~pickle
14.plate>apple
15.plate>orange:first-child
16.plate>apple:only-child,plate>pickle:only-child
17.plate>apple,pickle:last-child
18.plate:nth-child(3)
19.bento:nth-last-child(4)
21.plate:nth-of-child(even)
22.plate:nth-of-type(2n+3)
23.plate>apple:only-of-type
24.orange:last-of-type,apple:last-of-type
25.bento:empty
26.apple:not(.small)