19-陈增龙-2.2学习笔记

#1.27
CSS overflow 属性用于控制内容溢出元素框时显示的方式
通俗点讲：就是溢出的部分是如何显示的，hidden或者scroll等等

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用
如果需要设置文本的左右两边不要有图像浮动，可以用clear元素的both值

如果要创建一个无框架列表，并且要定义列表里的格式，类似于.sidemenu li a:hover，意思是这个选择器内的列表的网址在点击时的一些变化和格式，即修饰，可以层层递进
并且创建列表中的网页链接时，也可以参考这个例子

---

#1.28

<元素的居中对齐>
要水平居中对齐一个元素(如 <div.>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配，如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用
<文本的居中对齐>
用text-align：center就行了

当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题；就用overflow: auto；来定值

有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，更多居中实例

CSS伪类是用来添加一些选择器的特殊效果即网址的一些渲染
伪元素CSS伪元素是用来添加一些选择器的特殊效果即文本的一些渲染。具体实例

---

#1.29

导航栏通俗的讲，就是在列表里面插入一个网址，然后文本作为你的导航栏内容
在设置的时候，系统默认这个列表是有边距的，所以可以再style中定义ul的style中margin和padding为0，而list-style-type=none移除列表前小标志。一个导航栏并不需要列表标记

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中

下列关于导航栏的例子I可在这里查询
因为列表是块元素，所以前后会自动有换行符；所以要创建水平导航栏，就用display:inline; -默认情况下，<li.>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行

如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距，点击查询

可以单独定义其中的一个列表li的style的位置，用float来显示

要想让导航栏固定不动，不随着滑轮的移动而移动，用position：fixed元素来定义这个导航栏，但是要在下面声明是top：0还是bottom：0；

可在导航栏创建二级菜单。点击查询

---

#1.30~1.31

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span.>, 或 a <button.> 元素。使用容器元素 (如： <div.>) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 <div.> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式如例

hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单

要注意一些事项：.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单

二级菜单通俗的说（精髓在于display和）：相当于在你需要设置的那个地方隐藏一个列表，当指针放上去的时候就会显示，在后面的hover处显示

注意：创建一个二级菜单要有思路：
1、先设定ul的样式
2、设定li的样式
3、设定li a的样式
4、下拉部分的静态样式可与li的样式一样
5、设置隐藏部分的样式
6、设置隐藏部分的a样式(即显示下拉菜单时的时候静态的样子)
7、设置隐藏部分访问a时hover的样式（即指针放在下拉菜单的某一个a上时的显示状态）
8、设置访问有下拉部分那个选项时候的样式，精髓在于下拉部分访问时呈现block，就把隐藏部分访问出来了，访问完后鼠标放上面时又呈现block状态，与上面的display：none不同意思。注意顺序问题，先访问显示出block再放上去显示
可以点击此处查看二级菜单的例子

注意： .选择器（空格）.选择器和li a是一样的道理的；比如.down:hover .yincang {display: block;}意思是访问的时候yincang的显示方式为block

---

#2.1

提示工具
当鼠标在文本或者某部分的上方时显示隐藏文本，以起到提示工具的作用

大体分为两步：一是设置显性部分，二是设置隐形部分

注意 ：top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。
如果你想要提示工具显示在头部和底部。我们需要使用 margin-left 属性，并设置为 -60px。 这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。

如果单单是想设置左右，只需要top设置-5px和设置left和right的百分比距离
想设置上下的话，要设置top和bottom的距离（相反的），还要设置宽度，并且设置margin-left的为宽度的一半，另外，在设置上下的提示文本时通常设置left=50%

而需要用到箭头时，content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，有border-width，用来设置箭头的大小‘’和border-style：solid，此处举个例子，当然还有border-color，这个通过设置透明和其他颜色来指定箭头的指向方向，具体实例具体设置
淡入效果以及以上详细可看实例

图像拼接的时候，将一个图片分割成为几部分，设置一个模块，背景就是图片中的一部分，url=（…），后面的这两个单位0px 0px意思是左0px，顶部0px，具体实例

---

#2.2

关于图像透明的属性是opacity

属性选择器：在这个选择器中一般形式是[…],中间给定一个id。有单独的一个id，也有=，以及多值的属性和值的选择器~=，|=。更多的属性选择器看这里

创作表单时，更多的是用input，通过设置不同的input类型来创建不同的款式，例如submit（按钮），输入框等等

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域