简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 常用选择器与布局原理20190904作业
Blogger Information
Blog 14
fans 0
comment 0
visits 9708
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用选择器与布局原理20190904作业
德性的博客
Original
610 people have browsed it

一、实例演示相邻选择器与兄弟选择器,并分析异同

实例

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相邻选择器与兄弟选择器</title>
    <link rel="stylesheet" href="demo03a.css">
</head>

<body>
    <ul>
        <li class="testclass">1</li>
        <li id="testid01">2</li>
        <li class="testclass">3</li>
        <li class="testclass">4</li>
        <li id="testid02">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

/* demo03a.css */

ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}

ul li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    border: 1px solid black;
    /* 水平和垂直居中 */
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    /* 将块元素转换为内联元素 */
    display: inline-block;
    box-shadow: 2px 2px 1px #777;
}


/* 相邻选择器 */

#testid01+* {
    background-color: blue;
}


/* 兄弟选择器 */

#testid02~* {
    background-color: red;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


二、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同

实例

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子类选择器与类型选择器</title>
    <link rel="stylesheet" href="demo03b.css">
</head>

<body>
    <ul>
        <li class="testclass">1</li>
        <li id="testid01">2</li>
        <li class="testclass">3</li>
        <li class="testclass">4</li>
        <li id="testid02">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例

/* demo03b.css */

ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}

ul li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    /* background-color: wheat; */
    border: 1px solid black;
    /* 水平和垂直居中 */
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    /* 将块元素转换为内联元素 */
    display: inline-block;
    box-shadow: 2px 2px 1px #777;
}


/* 伪类：子元素选择器 */

ul :first-child {
    background-color: #ff0;
}

ul :nth-child(6) {
    background-color: #0ff;
}


/* 伪类：类型选择器 */

ul li:nth-of-type(9) {
    background-color: #0f0;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

三、实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing

实例

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>padding对盒子大小的影响与解决方案</title>
    <style>
        /* box-sizing设置为border-box，限定基准为边框 */
        
        .box1 {
            width: 400px;
            box-sizing: border-box;
            padding: 50px;
            background-color: #f00;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="box1">
        <img src="./test01.png" alt="中秋快乐" ">
</div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四、实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景

实例

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin中的同级塌陷, 嵌套传递与自动挤压</title>
    <style>
        /* box1与box2同级塌陷 */
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #00f;
            margin-bottom: 50px;
        }
        
        .box2 {
            width: 300px;
            height: 250px;
            background-color: #f00;
            margin-top: 30px;
        }
        /* box3与box4嵌套传递*/
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
        
        .box4 {
            width: 150px;
            height: 100px;
            background-color: lightcoral;
            margin-top: 30px;
        }
        
        .box5 {
            width: 250px;
            height: 100px;
            background-color: #ffff00;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="box4"></div>
    </div>
    <div class="box5"></div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：你是刚报名的学员吗? 作业进度不对, 如果是刚报名的, 建议将重点放在眼下正在学习的内容,之前的可以抽空进行复习, 作业可根据你的实际情况, 有选择的完成
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！