CSS3学习（5）

CSS 下拉列表

1.可悬停的下拉文本

.dropdown {
position: relative; //按照正常位置偏移
display: inline-block; //可设置宽度和高度，保留上下外边距/内边距，可行内放置
}
.dropdown-content {
display: none; //平时看不到
position: absolute;
background-color: #f9f9f9;
padding: 12px 16px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; //位于离人更近的图层，相对于默认图层来说
}
.dropdown:hover .dropdown-content {
display: block; //悬停在class="dropdown"的div区域时显示为块元素
}

<div class="dropdown">
<span>把鼠标移到我上面</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>

absolute相对于离它最近且不是static（默认）定位的父元素来定位的，这里父元素dropdown是relative，不过没有设置top、left等距离，所以父元素对于默认位置是没有偏移的，只是为了让dropdown-content（悬停显示的内容）能绝对定位根据dropdown（一个行内的盒子）进行而不是根html元素，这样父元素移动时，子元素也会移动，就不用再来调子元素了。
inline-block是为了创造出一个像按钮一样的可操作范围。
.dropdown:hover .dropdown-content使用的是A B，中间是空格所以是后代组合器，表示选择dropdown悬停时的dropdown-content，然后display: block，显示下拉菜单。

2.下拉菜单

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
//从这往后的都是相对于下拉文本新加的
.dropbtn { //按钮样式
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content a { //菜单项样式
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

3.对齐的下拉内容

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

和2的区别只有在class=“dropdown” 的div里加了style="float:left;"或者right。

4.下拉图片

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}

<div class="dropdown">
<img src="/i/photo/coffee.jpg" alt="Coffee" width="100">
<div class="dropdown-content">
<img src="/i/photo/coffee.jpg" alt="Coffee" width="300" height="200">
<div class="desc">Coffee</div>
</div>
</div>

原理是有一个更大的图片只在鼠标悬停在小图时显示。

5.导航栏内的下拉菜单

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>

CSS 属性选择器

1.[attribute] 选择器 or [attribute=“value”] 选择器

<a href="https://www.w3school.com">w3school.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

当css为a[target] {background-color: yellow;},后面两个a都变黄。
当css为a[target=_blank] {background-color: yellow;},只有倒数第二个a变黄。

2.[attribute~=“value”] 选择器

<img src="/i/photo/klematis.jpg" title="klematis flower" width="150" height="113">
<img src="/i/photo/flower.gif" title="flower" width="224" height="162">
<img src="/i/photo/tree.png" title="tree" width="200" height="358">
<p title="flower">sjdajfsklfjiodsjfoiafjioeiofjowefeaf</p>

当css为[title~=flower] {border: 5px solid yellow;}，只要title里有flower的都有黄框。

3.[attribute|=“value”] 选择器 or [attribute^=“value”] 选择器

以top开头的class属性

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

当css为[class|=top] {background: yellow;}，所有class="top-xxx"的背景颜色都是黄色，class="topcontent"的不被影响。
当css为[class^="top"] {background: yellow;},只要前面三个字母是top的，背景颜色都变黄，如果class="topcontent"变成了class=“ctopcontent”,就不是top开头了就不变色。

4.[attribute$=“value”] 选择器

以test结尾的class属性

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

当css为[class$="test"] {background: yellow;},只要结尾的后四位为test,背景颜色都变黄。

5.[attribute*=“value”] 选择器

包含"xx"的class属性

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

当css为[class*="te"] {background: yellow;}，只要包含te的，背景都变黄，也就是说只有class="second"的div不变色。
当css为[class*="my"] {background: yellow;},只有后面两个包含my的div,背景变黄。

CSS 表单

1.获得焦点的输入字段

我们使用:focus 选择器，在文本字段获得焦点时（被点击）为其添加背景色：

input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box; //边框和内边距的值是包含在width内的
border: 1px solid #555;
outline: none; //取消点击时的边框加黑特效
}
input:focus {
background-color: lightblue;
}

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="Bill">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Gates">
</form>

补充：可以在input的css里加入-webkit-transition: 0.5s;和transition: 0.5s;,用过渡属性设置边框颜色的动画（改变颜色需 0.5 秒）。

2.有动画效果的输入字段

input {
width: 130px;
box-sizing: border-box;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input:focus {
width: 100%;
}

<form>
<input type="text" name="search" placeholder="Search..">
</form>

transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。
transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。
transition-timing-function: 指定过渡效果的速度曲线。它可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等。
transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。

CSS 圆角

border-radius 从左上开始顺时针转。
四个值 - border-radius: 5px 15px 30px 50px；
那么根据角的圆度从低到高排名： 左上 右上 右下 左下
不同于padding和margin的“上、右、下、左”的顺序
创造椭圆：border-radius: 50%;

CSS 背景

1.多重背景

#example1 {
background-image: url(/i/photo/flower.gif), url(/i/paper.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}

<div id="example1">
<h1>Welcome to Shanghai</h1>
</div>

本例中，flower.gif和paper.jpg都是背景图层，但paper.jpg的图层离电脑屏幕（z-index）更远，表现为flower会覆盖一部分paper。

2.背景图片大小

#example1 {
background: url(/i/photo/flower.gif);
background-repeat: no-repeat;
padding: 15px;
background-size: 100px 80px; //放大缩小图片,也可以用ps
}

background-size:contain 缩放图片，完全装入背景区，可能背景区有部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。
background-size:cover 缩放图片，完全覆盖背景区，可能背景图有部分看不见。以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

3.全尺寸背景图

html {
background: url(/i/photo/1.jpg) no-repeat center fixed;
background-size: cover;
}

我理解的是：
center是让图片中间对齐。
fixed背景不随着元素的内容滚动（就是qq聊天背景图换成自己喜欢的照片，然后和别人聊天时的样子）。
cover是保持图像比例，且无白边。

4.background-origin和background-clip

background-origin 属性规定 background-position 属性相对于什么位置来定位：
padding-box 背景图像相对于内边距框来定位。（默认值）
border-box 背景图像相对于边框盒来定位，坐标原点设置在盒模型border-box区域的左上角。
content-box 背景图像相对于内容框来定位。

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面：
border-box 背景延伸至边框外沿（但是在边框下层）。
padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区（content box）外沿。