CSS下拉菜单
使用CSS创建可悬停的下拉列表。
下拉式式菜单
.dropdown类使用position:relative,当我们希望将下拉内容放置在下拉按钮的正下方(使用position:absolute)时，需要使用该类。
.dropdown-content 类保存实际的下拉内容。默认情况下它是隐藏的，并将悬停时显示。
使用CSSbox-shadow属性，这样下拉菜单看起来像一张“卡片”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dropbtn {
background-color: #008CBA;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.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-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #008CBA;
}
</style>
</head>
<body>
<h1>下拉菜单</h1>
<p>请把鼠标移到按钮上，以打开下拉菜单。</p>
<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>
<p><b>Note:</b>测试链接用了 href="#"。真实的网站会用 URL。</p>
</body>
</html>右对齐的下拉菜单内容
如果希望下拉菜单从右到左而不是从左到右，请添加right:0;
.dropdown-content {
right: 0;
}CSS属性选择器
CSS可以设置带有特定属性或属性值的HTML元素的样式。
CSS[attribute] 选择器
[attribute]选择器用于选取带有指定属性的元素。下例将选择所有带有target属性的<a>元素：
a[target] {
background-color: yellow;
}CSS[attribute="value"] 选择器
[attribute="value"]选择器用于选取带有指定属性和值的元素。下例选取所有带有target=“_blank"属性的<a>元素：
a[target="_blank"] {
background-color: yellow;
}CSS[attribute~="value"]选择器
[attribute~="value"]选择器选取属性值包含指定词的元素。下例选取title属性包含”flower"单词的所有元素：
[title~="flower"] {
border: 5px solid yellow;
}上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new",但不匹配：title=“my-flower" 或 title="flowers"。
CSS[attribute|="value"]选择器
[attribute|="value"]选择器用于选取指定属性以指定值开头的元素。下例选取class属性以”top“开头的所有元素：
注意：值必须是完整或单独的单词，比如class="top"或者后跟连字符的，例如：class="top-text"。
[class|="top"] {
background: yellow;
}
CSS[attribute^="title]选择器
[attribute^="value"]选择器用于选取指定属性以指定值开头的元素。下例选取class属性以"top"开头的所有元素：
提示：值不必是完整单词。
[class^="top"] {
background: yellow;
}CSS[attribute$="value"]选择器
[attribute$="value"]选择器用于选取指定属性以指定值结尾的元素。下例选取class属性以”test"结尾的所有元素：
提示：值不必是完整单词。
[class$="test"] {
background: yellow;
}CSS[attribute*="value"]选择器
[attribute*="value"]选择器选取属性值包含指定词的元素。下例选取class属性包含"te"的所有元素：
提示：值不必是完整单词！
[class*="te"] {
background: yellow;
}设置表单样式
若为不带class或id的表单设置样式，属性选择器会很有用：
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}所有CSS属性选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [attribute~flower] | [title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素。 |
| [attribute^=value] | a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 <a> 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。 |
| [attribute*=value] | a[href*="school"] | 选择其 href 属性值包含子串 "school" 的每个 <a> 元素。 |
CSS表单
通过使用CSS，可以极大地改善HTML表单的外观：
设置输入字段的样式
使用width属性来确定字段的宽度：
input {
width: 100%;
}
填充输入框
使用padding属性在文本字段内添加空间。
提示：若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
带边框的输入框
请使用border属性更改边框的粗细和颜色，并使用border-radius属性添加圆角：
如果仅需下边框，请使用border-bottom属性：
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
彩色的输入框
请使用background-color属性位输入添加背景色，并使用color属性更改文本颜色：
input[type=text] {
background-color: #3CBC8D;
color: white;
}
获得焦点的输入框
默认情况下，默写浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加outline:none; 来消除此行为。
使用:focus选择器可以在输入字段获得焦点时为其设置样式：
input[type=text]:focus {
background-color: lightblue;
}带有图标/图像的输入框
如果希望在输入框中包含图标，请使用background-image属性，并将其与background-position属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left)来留出图标的空间：
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}带动画效果的搜索输入框
使用CSS transiton属性为搜索输入框获得焦点时的宽度变化设置动画。
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}设置文本域的样式
提示：使用resize属性可防止对 textareas 调整大小（禁用右下角的”抓取器“）：
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}设置菜单的样式
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}设置输入按钮的样式
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}