前端第二天

<!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)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容