• 02-CSS基础与进阶-day5_2018-09-03-20-20-37


    盒子模型(重点)
    1 HTML的元素可以看成一个矩形的盒子,每个盒子都是由内容、内边距、
    外边距、边框组成
    网页布局的本质-----很多矩形盒子组合而成
    2 Box Model
    width 内容的宽
    height 内容的高
    border 边框
    css3关于边框多了一属性 border-radius 圆角边框
    padding 内边距

    浮动

    定位

    01网页的本质.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div {
                width: 300px;
                height: 300px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div>div盒子</div>
        <hr />
        <div>主体部分</div>
    </body>
    </html>

    02盒子模型之border.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           div {
                  width: 200px; /*内容的宽*/
                  height: 200px;/*内容的高*/
                  border-width: 8px; /*边框粗细*/
                  border-color: red; /*边框颜色*/
                  /* border-style: solid; *//*边框样式实线 用的最多*/
                  /* border-style: dashed;  虚线*/
                  /* border-style: dotted; 点线*/
                  border-style: double; /* 双线*/
                  border: 10px solid pink;
           }
        </style>
    </head>
    <body>
        <div>我是一个盒子</div>
    </body>
    </html>

     03边框写法总结.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            input {
                border: 0; /*没有边框*/
            }
    
            .uname {
                border-width: 1px;
                border-style: solid;
                border-color: green;
            }
    
            .nc {
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: pink;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: brown;
            }
    
            .email {
                border-left: 1px solid red;
                border-right: 1px solid #ccc;
            }
    
            .tel {
                /* border: 2px solid skyblue; */
                border-left: 2px solid skyblue;
                border-top: 2px solid skyblue;
                border-right: 2px solid skyblue;
                border-bottom: 2px solid skyblue;
            }
        </style>
    </head>
    <body>
        <label for="">用户名:<input type="text" class="uname"></label><br /><br />
        <label for="">昵称:<input type="text" class="nc"></label><br /><br />
        <label for="">邮箱:<input type="email" class="email"></label><br /><br />
        <label for="">手机:<input type="tel" class="tel"></label>
    </body>
    </html>
  • 相关阅读:
    python--多线程&多进程
    python--MyRequest请求模块封装
    python--面向对象
    python--异常处理
    python--sys.argv 运行python文件时获取参数
    python--搭建测试环境
    mac常用快捷键
    九、django通过forms对页面数据校验
    八、django后台管理
    七、django页面请求处理
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11047971.html
Copyright © 2020-2023  润新知