1021作业 - CSS选择器进阶版和样式美化简单版 - 作业

首页 > 博客列表 > 1021作业 - CSS选择器进阶版和样式美化简单版

博主信息

博文 18

粉丝 0

访问量 13973

专题推荐

更多>

伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的`<input>`元素。
:disabled	input:disabled	选择每个被禁用的`<input>`元素。
:empty	p:empty	选择没有子元素的每个 `<p>` 元素。
:enabled	input:enabled	选择每个已启用的`<input>`元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 `<p>` 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 `<p>` 元素的每个 `<p>` 元素。
:focus	input:focus	选择获得焦点的`<input>`元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的`<input>`元素。
:invalid	input:invalid	选择所有具有无效值的`<input>`元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 `<p>` 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 `<p>` 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 `<p>` 元素的每个 `<p>` 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 `<p>` 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个`<p>`元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个`<p>`元素的每个`<p>`元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 `<p>` 元素的每个 `<p>` 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 `<p>` 元素的每个 `<p>` 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 `<p>` 元素。
:optional	input:optional	选择不带 “required” 属性的`<input>`元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的`<input>`元素。
:read-only	input:read-only	选择指定了`readonly`属性的`<input>`元素。
:read-write	input:read-write	选择不带`readonly`属性的`<input>`元素。
:required	input:required	选择指定了 “required” 属性的`<input>`元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的`<input>`元素。
:visited	a:visited	选择所有已访问的链接。

盒子属性的顺序

顺时针方向: 一般常见到属性 padding, margin, border

p {
    /* 四值: 上, 右, 下, 左 */
    padding: 5px 10px 15px 20px;
    /* 三值: 上, 左右, 下 */
    padding: 5px 10px 15px;
    /* 双值: 上下, 左右 */
    padding: 5px 10px;
    /* 单值: 上下左中全相等 */
    padding: 10px;
}

样式重置三板斧


* {
  /* ? 外边距清零 */
  margin: 0;
  /* ? 内边距清零 */
  padding: 0;
  /* ? 盒子计算方式:边框 */
  box-sizing: border-box;
}

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器进阶版和样式美化简单版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .demo {
            width: 750px;
            margin: 15px auto;
            padding: 20px;
            border: 5px solid #000;
            background-color: #f3998bfa;
            background-clip: content-box;
            border-bottom-style: dashed;
        }
        .demo .item {
            position: relative;
            margin-bottom: 100px;
        }
        .drop-down {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            padding: 5px 0;
            z-index: 899;
            min-width: 100%;
            border: 1px solid #eee;
            background-color: #fff;
            border-radius: 2px;
        }
        .drop-down>li {
            padding: 0 10px;
            line-height: 36px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .drop-down>li:nth-of-type(even) {
            background-color: #eaeaea;
        }
        .drop-down>.this {
            background-color: #5FB878;
            color: #fff;
        }
        #checked:checked+.drop-down {
            display: block;
        }
        label[for="hover"]:hover+.drop-down {
            display: block;
        }
        label {
            display: block;
            width: 200px;
            height: 50px;
            line-height: 50px;
            border: 1px solid transparent;
            padding: 0 18px;
            background-color: #03a9f4;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="item">
            <label for="checked">点击显示菜单</label>
            <input type="checkbox" id="checked" style="display:none;">
            <ul class="drop-down">
                <li>杭州</li>
                <li>宁波</li>
                <li class="this">温州</li>
                <li>台州</li>
                <li>绍兴</li>
            </ul>
        </div>
        <div class="item">
            <label for="hover">碰触显示菜单</label>
            <ul class="drop-down">
                <li>杭州</li>
                <li>宁波</li>
                <li>温州</li>
                <li>台州</li>
                <li>绍兴</li>
            </ul>
        </div>
    </div>
</body>
</html>

实例效果图

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

线上培训班第21期 - 1013作业

2022-10-18 23:17:08