web开发之css2

CSS2

• 课件内容源自：

https://www.runoob.com/css/css-tutorial.html

CSS Position(定位)

• static(默认的静态定位)，即没有定位，遵循正常的文档流对象，静态定位的元素不受top、left、right、bottom影响。

div.static {
    position: static;
	margin-left:50px;
}

<div class="static">
该元素使用了 position: static;
</div>

上面结果看起来没什么影响，都遵循正常的定义

• fixed，元素的位置相对于浏览器窗口，是固定位置。当内容超过一页显示内容后，即使窗口是滚动的它也不会移动。

top, bottom, left, right定义了内容相对浏览器边框的位置；
注意和盒子模型的对比，margin是对布局块的位置，padding是内容对布局块的相对位置

p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}

<p class="pos_fixed">Some more text</p>

• relative：其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。

h2.pos_left
{
	position:relative;
	left:-20px;
}

h2.pos_right
{
	position:relative;
	left:20px;
}

<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

• absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2
{
	position:absolute;
	left:100px;
	top:150px;
}

<h2>这是一个绝对定位了的标题</h2>

• sticky(粘性定位)基于用户的滚动位置来定位。

div.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
  <p>滚动</p>
</div>

课间题目

1，通过相对定位完成如下显示

2，通过绝对定位嵌套如下显示（注意div可以嵌套，段落p不能嵌套），另外右侧标题“春晓”为固定定位

CSS Display(显示) 与 Visibility（可见性）

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}
h1.hidden1 {display:none;}

<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>上例中的隐藏标题仍然占用空间。</p>
<h1 class="hidden1">这是一个隐藏标题</h1>
<p>上例中的隐藏标题不占用空间。</p>

课间题

1 请用两种方式隐藏“春眠不觉晓，处处闻啼鸟”

CSS Display - 块和内联元素

• 块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

主要包括：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 ,
h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

• 内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
，就是里面文字或图片的大小;

主要包括：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select ,
small , span , strike , strong , sub , sup ,textarea , tt , u , var

• 如何改变一个元素显示

让一个块级元素变成内联元素

li{display:inline;}

下面的链接也水平显示

<p>链接列表水平显示：</p>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>

让一个内联元素变块级

span
{
	display:block;
}

下面的地址会换行（span的作用就是加入一些修饰，本身不自带任何样式）

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

##　CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。
类不需要用户或者浏览器做什么动作以及状态就可以显示的效果。而伪类是需要用户做出某种动作之后才显示的效果

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
a.red:visited {color:#FF0000;}

a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
a:active 必须在 a:hover 之后

<a href="/css/" target="_blank">这是一个链接</a>
<a class="red" href="css-syntax.html">CSS 语法</a>

CSS 伪元素

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。
实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}

<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>

课间题

注意：多数开发中导航栏与下拉菜单都可以通过引入第三方工具的组件来简单实现，下面是算是通过css来进行造轮子，这作为一种练习是很有必要的

1 做一个链接构成的标题加列表，如下

具体链接可以参考杭师大主页源代码http://www.hznu.edu.cn/

2 请隐藏列表(用不占空间的方式)：

3 仔细阅读如下例子

https://www.runoob.com/css/css-dropdowns.html

仿照链接中的例子，请设置鼠标悬停的时候显示列表

4, 请完成如下链接列表：

5，请让纵向列表变为横向，并且改变一定的样式（ul的内外边距都设置为0，并去掉黑点）

6，参考链接，对列表样式做一些自定义，比如老师这样（可以自由发挥）
https://www.runoob.com/css/css-navbar.html

7，3题的悬停与6题的导航栏结合，做成杭师大主页上方类似的导航栏

8，请把导航栏与原来杭师大主页作业结合，成为一个完整的页面