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;
}
