150 lines
3.7 KiB
HTML
150 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<!-- 外联样式测试 -->
|
||
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>样式选择器</title>
|
||
<style>
|
||
#main {
|
||
color: cornflowerblue;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.item {
|
||
color: red;
|
||
/* display 修改标签类型
|
||
block 块级标签，占一行
|
||
inline 行内标签，无宽和高
|
||
inline-block 行内快标签，有宽和高
|
||
*/
|
||
display: inline-block;
|
||
width: 100px;
|
||
height: 100px;
|
||
/* border: 2px solid red; */
|
||
text-align: center;
|
||
line-height: 100px;
|
||
border-radius: 20px;
|
||
margin: 10px;
|
||
box-shadow: 10px 10px 20px gray;
|
||
}
|
||
|
||
.item2 {
|
||
/* display 修改标签类型
|
||
block 块级标签，占一行
|
||
inline 行内标签，无宽和高
|
||
inline-block 行内快标签，有宽和高
|
||
*/
|
||
display: inline-block;
|
||
border-radius: 10px;
|
||
color: rgba(255, 71, 71, 0.555);
|
||
font-size: 18px;
|
||
font-family: "宋体";
|
||
box-shadow: 5px 5px 10px rgb(220, 238, 130);
|
||
}
|
||
/*
|
||
父选择器 > 子选择器 {
|
||
> 表示父子关系，只会选择子选择器
|
||
|
||
父选择器 子选择器 {
|
||
空格表示父子关系，会选择子选择器和子选择器的子选择器
|
||
*/
|
||
#content > div {
|
||
/* dashed 虚线，solid 实线，dotted 点线 */
|
||
border: 1px dotted blueviolet;
|
||
margin: 5px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
i,
|
||
b,
|
||
u,
|
||
.c1,
|
||
.c2 {
|
||
margin-right: 10px;
|
||
box-shadow: 2px 2px 5px grey;
|
||
border-radius: 5px;
|
||
border-top: 2px dashed yellowgreen;
|
||
border-width: 5px;
|
||
}
|
||
|
||
[type] {
|
||
color: rgb(132, 9, 255);
|
||
border-radius: 50%;
|
||
box-shadow: 2px 2px 5px aquamarine;
|
||
}
|
||
|
||
input[type="time"][value="12:10"] {
|
||
padding: 10px;
|
||
color: red;
|
||
}
|
||
|
||
/* content 子后代的第一个元素 */
|
||
#content > div:first-child,
|
||
#content > div:last-child {
|
||
color: darkgoldenrod;
|
||
font-size: 18px;
|
||
}
|
||
|
||
#content:hover {
|
||
padding: 20px;
|
||
border: 1px solid green;
|
||
}
|
||
|
||
.circle {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.circle:hover {
|
||
width: 90px;
|
||
height: 90px;
|
||
/* border: 1px solid yellow; */
|
||
box-shadow: 0 0 100px rgb(0, 128, 163);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<p>ID 不是 main</p>
|
||
<p id="main">ID 是 main</p>
|
||
<div class="item">ABC</div>
|
||
<div class="item">BCD</div>
|
||
<div class="item">FFF</div>
|
||
<div class="item">LLL</div>
|
||
<div>
|
||
<form>
|
||
<input value="123" /><br />
|
||
<input type="text" value="123" /><br />
|
||
<input type="time" value="12:10" /><br />
|
||
<input type="time" value="12:17" /><br />
|
||
|
||
<input class="item2" /> <button class="item2">提交</button>
|
||
</form>
|
||
</div>
|
||
<br /><br />
|
||
<div id="content">
|
||
<div class="title">标题</div>
|
||
<div class="text">
|
||
<h3>精彩即将到来</h3>
|
||
<div>
|
||
<p>内容</p>
|
||
<p>内容2</p>
|
||
</div>
|
||
</div>
|
||
<div>这是最后一段内容</div>
|
||
</div>
|
||
<p class="title">外部标题</p>
|
||
<p>
|
||
<b>加粗的文字</b>
|
||
<i>倾斜的文字</i>
|
||
<u>带下划线的文字</u>
|
||
<span class="c1"> 自定义c1类的文字 </span>
|
||
<span class="c2"> 自定义c2类的文字 </span>
|
||
</p>
|
||
|
||
<div>
|
||
<img class="circle" src="images/head_w1.png" width="100px" height="100px" />
|
||
</div>
|
||
</body>
|
||
</html>
|