简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4.24号作业2 盒子模型与padding/border简写
Blogger Information
Blog 20
fans 0
comment 0
visits 29207
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
4.24号作业2 盒子模型与padding/border简写
蜗牛是条鱼
Original
817 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.24作业盒模型的简单案例</title>
    <style>
       .box1{
           height: 200px;
           width: 300px;
           background-color: aqua;
           /*padding-top: 30px;*/
           /*padding-right: 20px;*/
           /*padding-bottom: 10px;*/
           /*padding-left: 30px;*/
           /*简写padding*/
           padding: 30px 20px 10px 30px;
           /*border-color: crimson;*/
           /*border-width: 10px;*/
           /*border-style: solid;*/
           /*margin-top: 30px;*/
           border: 10px red solid;
           /*简写border样式*/

       }
        .box2{

            background-color: antiquewhite;
            height: 200px;

        }

    </style>
</head>
<body>
<h1>体会border和padding 简写规则</h1>
<div class="box1">

    <div class="box2"></div>

</div>
<!--导航的简写方法-->
<!--ul>li.item{$}*4>a{最新产品*$}-->

</body>
</html>

运行实例 »

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


Correction status：Uncorrected

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！