登录  /  注册
博主信息
博文 16
粉丝 0
评论 1
访问量 18486
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html/css第五课--盒子模型、元素对齐、定位技术概念及实例--0816
学先森的博客
原创
822人浏览过

代码:

  1. 编程实现盒模型的基本要素


  2. 实例

    <!DOCTYPE html>
    <!--filename: lesson0501.html-->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
    </head>
    <style type="text/css">
        .box{
            width:300px;
            height:300px;
            background-color:coral;
            border-style:solid dotted dashed double;
            border-width:1px 2px 3px 4px;
            border-color:blue black green yellow;
            padding:2px 4px 6px 8px;
            margin:8px 6px 4px 2px;
        }
    </style>
    <body>
    <!--1. 编程实现盒模型的基本要素: 内容,内外边距与边框,并背诵padding与margin的简写规则;-->
    <div class="box">php</div>
    </body>
    </html>

    运行实例 »

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

    2.编程实现最常用的四种元素对齐方案


  3. 实例

    <!DOCTYPE html>
    <!--filename: lesson0502.html-->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素对齐</title>
    </head>
    <body>
    <!--2. 编程实现最常用的四种元素对齐方案;-->
    1. 子元素是单行行内元素: 如a, span <br>
    a:水平居中: 在父元素应用: text-align: center;
    b:垂直居中: 在行内子元素上设置行高与父元素等高: line-height:200px;
    <style type="text/css">
        .b1{
            width:300px;
            height:300px;
            background-color:cyan;
            text-align:center;
        }
        .b1 a{
            line-height:300px;
        }
    </style>
    <div class="b1">
        <a href="">php中文网</a>
    </div>
    <hr>
    2. 子元素是多行的内联文本 <br>
    a:水平居中: 在父元素应用: text-align: center;<br>
    b:垂直居中: 在父元素: display:table-cell;
    <style type="text/css">
        .b2{
            width:300px;
            height:300px;
            background-color:lightgreen;
            text-align:center;
            display:table-cell;
            vertical-align:middle;
        }
    </style>
    <div class="b2">
        <span>php中文网</span>
        <br>
        <span>视频教程</span>
    </div>
    <hr>
    3.子元素是块元素 <br>
    a: 水平居中: 子元素设置左右外边距自动适应容器margin: auto;
    b:垂直居中: 在父元素: display:table-cell;
    <style type="text/css">
        .b3{
            width:300px;
            height:300px;
            background-color:wheat;
            display:table-cell;
            vertical-align:middle;
        }
        .b31{
            width:100px;
            height:100px;
            background-color:white;
            margin:0 auto;
        }
    </style>
    <div class="b3">
        <div class="b31"></div>
    </div>
    <hr>
    4. 子元素是不定宽的块元素
    a: 水平居中: 子元素转为行内元素,父级加: text-align:center
    b: 垂直居中: 在父元素: display:table-cell;
    <style type="text/css">
        ul{
            margin:0;
            padding:0;
        }
        .b4{
            width:300px;
            height:300px;
            background-color:lightblue;
            text-align:center;
            display:table-cell;
            vertical-align:bottom;
        }
        .b4 li{
            display:inline;
        }
    </style>
    <div class="b4">
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </ul>
    </div>
    </body>
    </html>

    运行实例 »

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

    3.编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)

  4. 实例

    <!DOCTYPE html>
    <!--filename:lesson0503.html-->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位相对定位</title>
    </head>
    <body>
    
    <!--3. 编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)-->
    <style type="text/css">
        .box{
            width:600px;
            height:600px;
            /*定位父级设置定位属性 一般为相对定位*/
            position:relative;
        }
    
        .box1{
            width:200px;
            height:200px;
            background-color:lightblue;
            /*定位属性:绝对定位*/
            position:absolute;
            top:0;
            left:200px;
        }
        .box2{
            width:200px;
            height:200px;
            background-color:lightcoral;
            position:absolute;
            top:200px;
            left:0;
    
        }
        .box3{
            width:200px;
            height:200px;
            background-color:lightgreen;
            position:absolute;
            top:200px;
            left:400px;
        }
        .box4{
            width:200px;
            height:200px;
            background-color:lightyellow;
            position:absolute;
            top:400px;
            left:200px;
        }
    </style>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
    </body>
    </html>

    运行实例 »

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

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学