简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型和CSS选择器-2019年7月4日
Blogger Information
Blog 18
fans 0
comment 0
visits 13620
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
盒模型和CSS选择器-2019年7月4日
牛niu轰轰的blog
Original
518 people have browsed it

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

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0704作业</title>
    <!--7月4日作业:写一个盒子, 要求用到margin,padding,border,
       并用到它们的完整语法, 简写语法-->
    <style>
        /*完整语法*/
        p{
            color:blueviolet;
        }
        .margin
        {
            magin-top:100px;
            margin-bottom:100px;
            margin-left: 50px;
            margin-right:50px;
        }
        .padding
        {
            padding-bottom:10px;
            padding-top:10px;
            padding-left:20px;
            padding-right:20px;
        }
        /*简写语法*/
        .border
        {
           border-style:dotted solid double dashed;
            /*border-style (required)*/
            /*上边框是dotted,右边框是solid，底边框是double,左边框是dashed*/
            border-width:10px 20px;
           /*borders属性设置：border-width,border-style(required),border-color*/
        }
    </style>
</head>
<!--在头部放置盒子边框、填充、边距属性值-->
<body>
<p class="border">这是一个边框盒子</p>
<p class="padding">这是一个填充盒子</p>
<p class="margin" color="red">这是一个外边距盒子</p>
</body>
</html>

    运行实例 »

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

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

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

 

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！