简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 0704作业
Blogger Information
Blog 7
fans 0
comment 0
visits 3371
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
0704作业
沐风是个phper
Original
736 people have browsed it

0704作业

  1.  写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法


    实例

    <!DOCTYPE html>
<html lang="us">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px red solid;/*这是一个1像素，红色，实现的边框*/
            margin: 30px 50px;/*外边距是上下30像素  左右50像素*/
            padding: 10px;/*内边距是上下左右都为10像素*/
        }
        p{
            width: 200px;
            height: 200px;
            color: aliceblue;
            background-color: aqua;/*背景颜色*/
            /*上下左右的边框样式属性值*/
            border-top-style: solid;
            border-top-color:red;
            border-top-width: 5px;
            border-right-style: dashed;
            border-right-color:blue;
            border-right-width:20px;
            border-bottom-style: groove;
            border-bottom-color:pink;
            border-bottom-width: 8px;
            border-left-style: inset;
            border-left-color:green;
            border-left-width: 10px;
            text-align: center;/*文字居中*/
            line-height: 200px;/*设置文字垂直居中*/
            /*外边距的像素值*/
            margin-top: 20px;
            margin-right: 30px;
            margin-bottom: 20px;
            margin-left: 30px;
            /*内边距的像素值*/
            padding-left: 10px;
            padding-right:30px;
            padding-bottom:40px;
            padding-top:20px;

        }
    </style>
</head>
<body>
    <div>
        <p>我是一个box</p>
    </div>
</body>
</html>

    运行实例 »

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

    QQ截图20190704232106.png

    2.模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果

     


  2. 实例

    *{
    margin: 0;
    padding: 0;
}
ul li{
    /*后代选择器*/
    color: #000;
    background-color: aqua;
    text-align: center;
    line-height:50px;
    border-radius: 25px;
    box-shadow: 5px 5px 5px olive;
    list-style: none;
    width: 50px;
    height: 50px;
    border:  1px red solid;
    display: inline-block;
    margin-left: 10px;
    margin-top: 20px;
}
/*id选择器*/
#four{
    color: azure;
}
/*类选择器*/
.head{
    color:pink;
}
/*属性选择器*/
li[class="two"]{
    color: springgreen;
}
/*暂时没搞懂*/
.head ~ *{
    color: red;
}
/*伪类选择器*/
ul :first-child{/*ul下的第一个元素*/
    /*last-child是最后一个*/
    color: moccasin;
}
ul :nth-child(2){/*定位到ul下第二个元素加样式*/

}
ul :nth-child(2n-1){/*选择偶数修改样式*/

}
p:only-of-type {
    background-color: pink;
}

    运行实例 »

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

  • 3. 写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上

  • 答：标签选择器：例如p,li,ul,input等等这些都是，作用是可以在html中所有的同样的标签统一加上样式。

    •    类选择器：.class 可以同时定义一个或多个标签 加上样式

    •    id选择器：#id  级别最高>类选择器>标签选择器  可以给任何标签加样式

    •    后代选择器：ul li 意是ul下的li的样式会改变

    •  

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！