盒子的基本各属性的用法和基本的选择器-0704 - 作业

1、盒子margin、padding、border的基本用法：①margin padding只有宽度属性，border不仅有宽度属性还有颜色、样式属性。② padding: 20px;代表上右下左宽度相同。padding：20px 30px；代表上下相同且为20px，左右相同为30px。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一切皆盒子</title>
    <link rel="stylesheet" href="static/css/xxxx1.css">
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>


.box1 {
     width: 200px;
     height: 200px;
     background: blueviolet;
     padding: 20px;
     border-bottom-color: olivedrab;
     border-bottom-style: dashed;
     border-bottom-width: 20px;
     border: olive double 30px;
     border-radius: 170px;
     margin: 20px;
 }
.box2 {
    background-color: yellowgreen;
}

运行实例 »

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

③在选择器的使用中，根据自己所设计的实际内容选择更适合、更简单的选择器在实际中是非常重要的。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/sss.css">
    <title>选择器</title>
</head>
<body>
<ul>
    <li class="bg-green">1</li>
    <li id="bg-blue">2</li>
    <li >3</li>
    <li >4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<div>
    <p>李宇春</p>
    <li>张靓颖</li>
    <p>周笔畅</p>
</div>
<div>
    <p>易烊千玺</p>
    <li>雷佳音</li>
</div>
<form action="">
    <p>
        <label for="email">邮箱：</label>
        <input type="email" id="email">
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" id="password">
    </p>
    <p>
        <input type="radio" id="week" name="save" value="7" >
        <label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30" >
        <label for="month">保存一月</label>
    </p>
    <button>登录</button>
</form>
</body>
</html>



/*标签选择器*/
ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    /*border: 1px solid black;*/
}
/*元素选择器也称后代选择器*/
ul li {
    /*list-style: none;*/
    /*width: 50px;*/
    /*height: 50px;*/
    /*background-color: yellow;*/
    /*border: 1px black solid;*/
    /*text-align: center;*/
    /*line-height: 50px;*/
    /*border-radius: 50%;*/
    /*display: inline-block;*/
    /*margin-left: 5px;*/
    /*box-shadow: 2px 2px 2px #888888;*/
}

/*id选择器*/
#bg-blue {
    /*background-color: aqua;*/
}
/*类选择器*/
.bg-green {
    /*background-color: bisque;*/
}

/*属性选择器*/
li[id="bg-blue"] {
    /*border: 2px solid red;*/
}
/*群组选择器 常用语初始化*/
#bg-blue,.bg-green {
    /*border: 2px solid blue;*/
}


/*#bg-blue + .bg-green {*/
    /*background-color: palevioletred;*/
/*}*/
/*兄弟选择器*/
/*#bg-blue ~ *{*/
    /*background-color: palevioletred;*/
/*}*/



/*!*伪类选择器*!子元素选择器*/
ul :first-child {
    /*background-color: red;*/
}
ul :last-child {
    /*background-color: red;*/
}
ul :nth-child(odd) {
    /*background-color: yellowgreen;*/
}
ul :nth-child(even) {
    /*background-color:black;*/
}
/*位置*/
ul :nth-last-child(3){
    /*background-color: yellowgreen;*/
}
/*类型*/
ul  li:nth-of-type(5) {
    /*background-color: bisque;*/
}

div:first-of-type :nth-child(3){
    /*background-color: yellowgreen;*/
}
div :nth-child(2) {
    /*background-color: #888888;*/
}
/*表单*/
/*选择能够使用的*/
form :enabled{
    /*background-color: yellowgreen;*/
}
form :focus {
    background-color: bisque;
}

    button :hover{width: 60px;
    height: 50px;
    background-color: black;
    border: none;
    border-radius: 6px;
    box-shadow: 5px 3px 5px #888888;
    color: white;
}

运行实例 »

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

Correction status：qualified

Teacher's comments：写得非常的完整, 规范,看来你对这些知识点的基本内容掌握了