zoukankan      html  css  js  c++  java
  • python_13(前端—cs)

    第1章 前端三大标准:
    1.1 三大标准介绍
    1.2 html标签一览表
    第2章 结构标准 html
    2.1 html结构
    2.2 html常用标签
    2.2.1 h1-h6
    2.2.2 span
    2.2.3 span 高级用例
    2.2.4 div
    2.2.5 span
    2.3 导入图片
    2.3.1 <a href="#"> 显示超链接
    第3章 style
    3.1 margin
    3.2 设置banner区域
    3.3 外边距设置
    3.4 设置板式style
    3.5 设置边框样式
    3.6 继承
    第4章 仿照小米(练习)
    4.1 设置外边框距离和字体
    4.2 设置内边框距离及banner
    4.3 设置导航栏的背景色
    4.4 高级选择器
    4.5 text-decoration
    第5章 flot
    5.1 浮动特性
    5.2 浮动
    5.3 导航栏左移
    5.4 编辑购物车
    5.5 导航栏调试
    5.6 li元素横向排布
    5.7 组合选择器
    5.8 list-style:none;
    第6章 浮动产生的问题
    6.1 浮动问题1
    6.2 浮动问题2
    6.2.1 问题解释:
    6.2.2 解决方案:
    6.2.3 问题截图
    6.2.4 解决方法四种:
    6.3 修改盒模型
    6.3.1 练习:
    6.4 padding 46
    6.5 double/ solid
    6.6 border-radius
    6.7 margin-top
    第7章 写表单交互
    7.1 登录页面(练习)

    脑图链接https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

    第1章 前端三大标准:

    1.1 三大标准介绍

    n  结构标准: html (没有逻辑)

    n  样式标准: css (没有逻辑)

    n  行为标准: javascript

    1.2 html标签一览表

    标准

    作用位置

    标签种类

    用途

    注释

    html结构标签

    head

    title

    显示网站的标题

    meta

    提供有关网页的原信息

    style

    定义内部样式表

    link

    链接css资源文件,网站图标

    script

    链接脚本js文件

    body

    h1-h6

    标题标签

    p

    段落标签

    ul

    无序列表标签

    ol

    有序列表标签

    div

    盒子标签

    teble

    表格标签

    from

    表单标签

    img

    图片标签

    br

    换行标签

    hr

    分割线标签

    &nbsp;

    空格字符

    a

    超链接标签

    span

    行内标签

    button

    概念

    行内标签

    apan,a

    在一行内显示;不能设置宽高

    行内块

    img input

    也属于行内标签,在一行内显示,可以设置宽高

    块级标签

    div h1-h6,ul,li

    独占一行,可以设置宽高,不设置集成父亲100%

    标准文档流

    UI设计前端稿件,任意提地方来画,按照一定规则来作站

    第2章 结构标准 html

    主要是包含语义化的标签

    标签均为闭合标签

    标签样式:html + tab ctl+/ 注释

    2.1 html结构

    例:

    <!DOCTYPE html>  è类型

    <html lang="en"> è可翻译

    <head>          è内容头部

        <meta charset="UTF-8"> è字符集

        <title>学习html</title>è浏览器显示名称

    </head>

    <body>   è内容文本

    <!--<html>注释样式</html>--> è注释方式

    开始前端第一课,不断学习,让自己优秀!è文本主体

    </body>

    </html>

    输出:

    2.2 html常用标签

    参考:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

    n  块及标签:独占一行的标签 h1-h6,div,display:block

           独占一行的标签:h1-h6,div

           可以设置宽高,默认它的宽度时父亲的100%

    n  行内标签:一行内显示的标签 span a,display:inline;display:inline-block

           在一行内显示的标签:span a

           不能设置宽高,如果不设置默认是字体的大小

    n  行内块标签

           在一行内显示,可以设置宽高

    2.2.1 h1-h6

    解释:文本大小

    特点:独占一行

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>学习html</title>

    </head>

    <body>

    <!--<html>注释样式</html>-->

        <h1>开始前端第一课,不断学习,让自己优秀!</h1>

        <h2>开始前端第一课,不断学习,让自己优秀!</h2>

        <h3>开始前端第一课,不断学习,让自己优秀!</h3>

        <h4>开始前端第一课,不断学习,让自己优秀!</h4>

        <h5>开始前端第一课,不断学习,让自己优秀!</h5>

        <h6>开始前端第一课,不断学习,让自己优秀!</h6>

        开始前端第一课,不断学习,让自己优秀!

    </body>

    </html>

    输出:

    2.2.2 span

    解释:小跨域的标签,在一行显示

    <body>

    <!--<html>注释样式</html>-->

        <h1>开始前端第一课,不断学习,让自己优秀!</h1>

        <h2>开始前端第一课,不断学习,让自己优秀!</h2>

        <h3>开始前端第一课,不断学习,让自己优秀!</h3>

        <h4>开始前端第一课,不断学习,让自己优秀!</h4>

        <h5>开始前端第一课,不断学习,让自己优秀!</h5>

        <h6>开始前端第一课,不断学习,让自己优秀!</h6>

            开始前端第一课,不断学习,让自己优秀!

        <span>让自己优秀</span>

    </body>

    </html>

    输出

    2.2.3 span 高级用例

    <!DOCTYPE html>

    <html lang="en">

    <style>

        .gaibian{

            color:gold;

        }

     

    </style>

    <head>

        <meta charset="UTF-8">

        <title>学习html</title>

    </head>

    <body>

    <!--<html>注释样式</html>-->

            开始前端第一课,不断学习,让自己优秀!

        <span class="gaibian">让自己优秀</span>

    </body>

    </html>

    输出:

    2.2.4 div

    解释:division 分割,块区域

    <!DOCTYPE html>

    <html lang="en">

    <style>

    </style>

    <head>

        <meta charset="UTF-8">

        <title>学习style</title>

    </head>

    <body>

    <div class="top">

        <!--<div class="container">-->

            top 黑色区域

        <!--</div>-->

    </div>

    </body>

    </html>

    存在默认margin外边框8px

    2.2.5 span

    解释:行内标签;实例添加菜单分割线

    代码

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>菜单栏</title>

    </head>

    <body>

    <div class="container">

        <a href="#">小米商城</a>

        <span class="sep">|</span>

        <a href="#">loT</a>

        <span class="sep">|</span>

        <a href="#">云服务</a>

        <span class="sep">|</span>

        <a href="#">金融</a>

        <span class="sep">|</span>

        <a href="#">有品</a>

        <span class="sep">|</span>

    </div>

    </body>

    </html>

    输出:

    2.3 导入图片

    2.3.1 <a href="#"> 显示超链接

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>图片导入</title>

    </head>

    <body>

    <div class="box">

        <span>学习过程</span>

        <a href="#">

        <img src="./01.jpg" alt="学习" width="400">

        </a>

        <img src="./01.jpg" alt="学习" width="400">

    </div>

     

    </body>

    </html>

    输出:

    第3章 style

    3.1 margin

    解释:margin的意思是元素的外边距区域值,即该元素外面要留白的距离。它的值可以设置为三种,一种是使用数值,例如:30px,还有一种是使用百分比(相对父元素的百分比),以及第三种:auto。

    例:

      .container{

                1226px;

                height: 100%;

                /*两个值: 上下  左右*/

                /*三个值: 上 左右 下*/

                /*四个值: 上 右 下 左*/

                /*一个值: */

                margin: 0 auto;

            }

    3.2 设置banner区域

    解释:设置banner区域的规格12226,是为了用户体验更好

    方法:

    n  为每个div增加一个container

    n  container设置方法

    列:

    <!DOCTYPE html>

    <html lang="en">

     

    <style>

        body{

            /*让外边框距离为0*/

            margin: 0;

        }

        .top{

            100% ;

            height: 40px;

            background-color: black;

            color: #fff;

            /*让文本水平居中*/

            text-align: center;

            /*让文本垂直居中*/

            line-height: 40px;

        }

        .header{

                100%;

                height: 100px;

                background-color: red;

            }

            .content{

                100%;

                /*height: 2000px;*/

                background-color: mediumpurple;

            }

            .footer{

                100%;

                height: 400px;

                background-color: grey;

     

            }

            /*.hei{*/

                /* 100px;*/

                /*height: 40px;*/

                /*background-color: red;*/

                /*overflow: hidden;*/

            /*}*/

     

            .container{

                1226px;

                height: 100%;

                background-color: transparent; è设置背景透明

     

                /*让盒子水平居中*/

                margin-left: auto;

                margin-right: auto;

            }

    </style>

    <head>

        <meta charset="UTF-8">

        <title>学习style</title>

    </head>

    <body>

      <div class="top">

            <div class="container">

            top 黑色区域

            </div>

      </div>

      <div class="header">

            <div class="container">

                导航区域

            </div>

      </div>

      <div class="content">

            <div class="container">

                主体内容区域

            </div>

      </div>

      <div class="footer">

            <div class="container">

                脚后跟

            </div>

      </div>

    </body>

    </html>

    输出

    3.3 外边距设置

    解释:屏幕左上角为00点是坐标起始点

    代码

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style type="text/css">

            /*

            选择器: 基础选择器 和高级选择器

            标签选择器

            */

            html{

                /*css的继承 只有个别的属性  color font-xxx text-xxx line-**/

                color: #fff;

                font-size: 14px;

                /*text-align: center;*/

            }

            body{

                margin: 0;

            }

            .top{

                100% ;

                height: 40px;

                background-color: black;

                color: #fff;

                /*让文本水平居中*/

                /*text-align: center;*/

                line-height: 40px;

            }

            .header{

                 100%;

                height: 100px;

                background-color: red;

            }

            .content{

                100%;

                /*height: 2000px;*/

                background-color: mediumpurple;

            }

            .footer{

                100%;

                height: 400px;

                background-color: grey;

     

            }

            /*.hei{*/

                /* 100px;*/

                /*height: 40px;*/

                /*background-color: red;*/

                /*overflow: hidden;*/

            /*}*/

            .container{

                1226px;

                height: 100%;

                /*background-color: transparent;*/

                /*让盒子水平居中*/

                margin-left: auto;

                margin-right: auto;

            }

        </style>

    </head>

    <body>

        <!--

            1.独占一行的标签:h1~h6,div

            2.在一行内显示的标签:span

        -->

     

        <div class="top">

            <div class="container">

                top黑色区域

            </div>

        </div>

        <div class="header">

            <div class="container">

                导航区域

            </div>

        </div>

        <div class="content">

            <div class="container">

                主体内容区域

            </div>

        </div>

        <div class="footer">

            <div class="container">

                脚后跟

            </div>

        </div>

     

    </body>

    </html>

    输出:

    默认margin:8px

    3.4 设置板式style

    <style>

        body{

            /*让外边框距离为0*/

             margin: 0;

        }

        .top{

            100% ;

            height: 40px;

            background-color: black;

            color: #fff;

            /*让文本水平居中*/

            text-align: center;

            /*让文本垂直居中*/

            line-height: 40px;

        }

     

    </style>

    输出:

    3.5 设置边框样式

    解释:16进制表示(000是黑色 fff是白色)

    设置宽高及背景色

    .container{

                1226px;

                height: 100%;

                /*background-color: transparent;*/

                /*让盒子水平居中*/

                margin-left: auto;

                margin-right: auto;

            }

    水平垂直居中

    body{

        margin: 0; è 清除外部边框

    }

    .top{

        100%; è宽适应屏幕

        height: 40px; è 高40

        background-color: black; è背景色黑色

        color: #fff; è 字体颜色白色

        /*让文本水平居中*/

        text-align: center;

        /*让文本垂直居中*/

        line-height: 40px

    }

    3.6 继承

    解释:html标签中的样式,会自动继承给全局元素

    html{}

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style type="text/css">

            html{

                font-size: 14px;

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

    第4章 仿照小米(练习)

    4.1 设置外边框距离和字体

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>菜单栏</title>

        <style type="text/css">

            html{

                font-size: 14px;

            }

            body{

                margin: 0;

            }

        </style>

    </head>

    <body>

    <div class="container">

            <div class="top-info">

            <a href="#">小米商城</a>

            <span class="sep">|</span>

            <a href="#">loT</a>

            <span class="sep">|</span>

            <a href="#">云服务</a>

            <span class="sep">|</span>

            <a href="#">金融</a>

            <span class="sep">|</span>

            <a href="#">有品</a>

            <span class="sep">|</span>

        </div>

    </div>

    </body>

    </html>

    输出

    4.2 设置内边框距离及banner

    设置边框距离方式:

            .container{

                1226px;

                height: 100%;

                /*两个值: 上下  左右*/

                /*三个值: 上 左右 下*/

                /*四个值: 上 右 下 左*/

                /*一个值: */

                margin: 0 auto;

            }

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>菜单栏</title>

        <style type="text/css">

            .container{

                1226px;

                height:100%;

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

    <div class="container">

            <div class="top-info">

            <a href="#">小米商城</a>

            <span class="sep">|</span>

            <a href="#">loT</a>

            <span class="sep">|</span>

            <a href="#">云服务</a>

            <span class="sep">|</span>

            <a href="#">金融</a>

            <span class="sep">|</span>

            <a href="#">有品</a>

            <span class="sep">|</span>

        </div>

    </div>

    </body>

    </html>

    输出:

    4.3 设置导航栏的背景色

    注意:a标签的颜色并不能继承

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>菜单栏</title>

        <style type="text/css">

            html{

                font-size: 14px;

            }

            body{

                margin: 0;

            }

            .top{    è设置背景色及行高

                idth: 100%;

                height: 40px;

                background-color: #333;

                line-height: 40px;

            }

            .container{   è设置中心banner及高度

                1226px;

                height:100%;

                margin: 0 auto;

            }

            a{

     

                text-decoration: none;

            }

     

        </style>

    </head>

    <body>

    <div class="top">

        <div class="container">

                <div class="top-info">

                <a href="#">小米商城</a>

                <span class="sep">|</span>

                <a href="#">loT</a>

                <span class="sep">|</span>

                <a href="#">云服务</a>

                <span class="sep">|</span>

                <a href="#">金融</a>

                <span class="sep">|</span>

                <a href="#">有品</a>

                <span class="sep">|</span>

            </div>

        </div>

    </div>

    </body>

    </html>

    输出:

    4.4 高级选择器

    解释:设置分割线的距离,加空格表示后代继承

    代码:

            /*高级选择器 后代选择器*/

            .top a{

                color: #b0b0b0;

            }

            .top .sep{

                color: #424242;

                margin: 0 6px;

            }

    输出

    4.5 清除下划线text-decoration

    代码

            a{

     

                text-decoration: none;

            }

    第5章 flot

    5.1 浮动特性

    n  浮动可以使元素脱离文档流,不占位置

    n  浮动会使元素提升层级

    n  浮动可以使块元素在一行排列,不设置宽高的时候,可以使元素适应内容

    n  浮动可以使行内元素支持宽高

    n  浮动可以是元素脱离文档流,它可以是元素并排显示,

           1.有贴边现象

           2.有收缩现象(块元素转换成行内元素)

           3.只要盒子浮动了,不管是行内标签还是块级标签,可以任意设置宽高,但是遵循要浮动一起浮动要不一起不浮动的原则。

    5.2 浮动

    代码

    <body>

    <div class="top">

        <div class="container">

                <div class="top-info">

                <a href="#">小米商城</a>

                <span class="sep">|</span>

                <a href="#">loT</a>

                <span class="sep">|</span>

                <a href="#">云服务</a>

                <span class="sep">|</span>

                <a href="#">金融</a>

                <span class="sep">|</span>

                <a href="#">有品</a>

                <span class="sep">|</span>

            </div>

        </div>

    </div>

    <div>

        <a href="#">登录</a>

        <a href="#">注册</a>

        <a href="#">购物车</a>

    </div>

    </body>

    输出:

    5.3 导航栏左移

    代码:

         /*.top-info{*/ è浮动到最左边

                /*float:left;*/

            /*}*/

        </style>

    </head>

    <body>

    <div class="top">

        <div class="container">

                <div class="top-info">

                <a href="#">小米商城</a>

                <span class="sep">|</span>

                <a href="#">loT</a>

                <span class="sep">|</span>

                <a href="#">云服务</a>

                <span class="sep">|</span>

                <a href="#">金融</a>

                <span class="sep">|</span>

                <a href="#">有品</a>

                <span class="sep">|</span>

            </div>

    输出

    并且区域也自动变成合适距离

    代码

    ………

           .top-login{

                float:right;  è右浮动

                margin-right: 20px; è右边距

                200px; è宽度

                height: 40px;è行高

            }

        </style>

    …….

    <div>

        <div class="top-login">

            <a href="#">登录</a>

            <a href="#">注册</a>

            <a href="#">购物车</a>

        </div>

    </div>

    输出:

    5.4 编辑购物车

    代码:

    <style type="text/css">

            .top-cart{

                float: right;

                color: red;

            }

    </style>

    ……

    <div>

        <div class="top-cart">购物车</div>

            <div class="top-login">

                <a href="#">登录</a>

                <a href="#">注册</a>

                <a href="#">消息通知</a>

            </div>

    ………

    </div>

    输出:

    设置浮动区块

    代码

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

        </style>

    ….

    <div class="content">

            <div class="container">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

     

                </ul>

     

            </div>

        </div>

    5.5 导航栏调试

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style type="text/css">

            html{

                font-size: 14px;

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

            ul{

                list-style: none;

            }

            a{

                text-decoration: none;

            }

            .top{

                100%;

                height: 40px;

                background-color: #333;

                line-height: 40px;

                /*color: #b0b0b0;*/

            }

            .container{

                1226px;

                height: 100%;

                /*两个值: 上下  左右*/

                /*三个值: 上 左右 下*/

                /*四个值: 上 右 下 左*/

                /*一个值: */

                margin: 0 auto;

            }

            /*高级选择器 后代选择器*/

            .top a{

                color: #b0b0b0;

            }

            .top .sep{

                color: #424242;

                margin: 0 6px;

            }

            .top-info{

                float:left;

            }

            .top-cart{

                float: right;

                color: red;

            }

            .top-login{

                float:right;

                margin-right: 20px;

                200px;

                height: 40px;

            }

            .content {

                 100%;

            }

            .content ul li{

                float: left;

                25%;

                height: 300px;

                background-color: grey;

            }

     

            /*.ttt{*/

                /*float:left;*/

                /* 100px;*/

                /*height: 100px;*/

                /*line-height: 100px;*/

            /*}*/

        </style>

    </head>

    <body>

     <!--

            1.独占一行的标签:h1~h6,div

            2.在一行内显示的标签:span a

        -->

     

        <div class="top">

            <div class="container">

                <div class="top-info">

                    <a href="#">小米商城</a>

                    <span class="sep">|</span>

                    <a href="#">loT</a>

                     <span class="sep">|</span>

                    <a href="#">云服务</a>

                     <span class="sep">|</span>

                    <a href="#">金融</a>

                     <span class="sep">|</span>

                    <a href="#">有品</a>

                     <span class="sep">|</span>

                    <a href="#">小爱开放平台</a>

                     <span class="sep">|</span>

                    <a href="#">政企服务</a>

                </div>

     

                <div class="top-cart">购物车</div>

                <div class="top-login">

                    <a href="#">登陆</a>

                    <span class="sep">|</span>

                    <a href="#">注册</a>

                    <span class="sep">|</span>

                    <a href="#">消息通知</a>

                </div>

            </div>

        </div>

        <div class="content">

            <div class="container">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

     

                </ul>

     

            </div>

        </div>

        <!--<span class="ttt">个哈哈哈哈</span>-->

     

    </body>

    </html>

    输出:

    5.6 li元素横向排布

    代码:

    ………

    .container ul li{

                float: left;

            }

        </style>

    ……

    <div class="content">

            <div class="container">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

     

                </ul>

            </div>

        </div>

    5.7 组合选择器

      body,ul{

                margin: 0;

                padding: 0;

            }

    解释:表示body和ul组合选中

    5.8 list-style:none;

    代码:

    <style type="text/css">

            html{

                font-size: 14px;

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

            ul{

                list-style: none;

            }

        <div class="content">

            <div class="container">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

     

                </ul>

     

            </div>

        </div>

    第6章 浮动产生的问题

    6.1 浮动问题1

    ul的子元素必须是li

    <div class="content">

            <div class="container">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

     

                </ul>

            </div>

        </div>

    6.2 浮动问题2

    6.2.1 问题解释:

      在页面布局中,一般情况父元素的高度不是设置的,通过子元素来填充它的高度,但是子元素设置浮动之后,不会撑开父元素的高度,因为子元素不占位置

    6.2.2 解决方案:

    n  给父盒子设置固定高度

           缺点:不够灵活

    n  给附送元素最后一个子元素添加一个空的块元素,且该元素不浮动,设置clear:both

           缺点:结构冗余,无缘无故添加了一个块级元素

    n  官方写法:建议这样写给父盒子设置

           .wrap:after{visbility:hidden:both;display:block;c ontent*.*;height:0}

    n  给父元素添加owerflow:hidden 推荐使用

    6.2.3 问题截图

    浮动上移问题如下:

    下图可见子元素并不在li盒子的下面显示:

     下图可见:可见1、2、3、4 四个li高度不为零,但ul高度为零,证明并没有撑起ul.

    原始代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>li标签的用法</title>

        <style type="text/css">

              html{

                font-size: 14px;

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

            ul{

                list-style: none;

            }

            .container{

                1226px;

                height: 100%;

                margin: 0 auto;

            }

            .content {

                height: 100%;

                margin: 0 auto;

            }

            body,ul{

                margin:0;

                padding: 0;

            }

            .content ul .item{

                float: left;

                 25%;

                height: 100px;

                background-color: blueviolet;

            }

              .uuu{

                100px;

                height: 400px;

                background-color: red;

            }

        </style>

    </head>

    <body>

    <div class="content">

        <div class="container">

            <ul>

            <!--<ul class="clearfix">    -->

                <li class="item">1</li>

                <li class="item">2</li>

                <li class="item">3</li>

                <li class="item">4</li>

                <!--<li class="clearfix"></li>-->

            </ul>

            <!--<div class="clearfix"></div>-->

        </div>

    </div>

    <div class="uuu"></div>

    <span class="ttt">个哈哈哈哈</span>

    </body>

    </html>

    6.2.4 解决方法四种:

    1)例:给父盒子设置固定高度(和写小米的顶部top栏一样),不实用,只适合万年不变导航栏的写法

    代码:

        .content {

                1226px;

                height: 50px;

                background-color: yellow;

                /*height: 100%;*/

                margin: 0 auto;

            }

        </style>

    输出:

    2)给附属元素最后一个子元素添加一个空的块元素,且该元素不浮动,设置clear:both

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>li标签的用法</title>

        <style type="text/css">

              html{

                font-size: 14px;

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

            ul{

                list-style: none;

            }

            .container{

                1226px;

                height: 100%;

                margin: 0 auto;

            }

            .content {

                height: 100%;

                margin: 0 auto;

            }

            body,ul{

                margin:0;

                padding: 0;

            }

            .content ul .item{

                float: left;

                25%;

                height: 100px;

                background-color: blueviolet;

            }

              .uuu{

                100px;

                height: 400px;

                background-color: red;

            }

            .clearfix{

                 clear: both;

            }

        </style>

    </head>

    <body>

    <div class="content">

        <div class="container">

            <ul>

            <!--<ul class="clearfix">    -->

                <li class="item">1</li>

                <li class="item">2</li>

                <li class="item">3</li>

                <li class="item">4</li>

                <!--<div class="clearfix"></div>-->  è放在li的下面即可,放里面和外面都行

            </ul>

            <div class="clearfix"></div>

        </div>

    </div>

    <div class="uuu"></div>

    <span class="ttt">个哈哈哈哈</span>

    </body>

    </html>

    3)伪元素清除法:推荐使用

    解释:原理其实就是后面加个元素,将元素变成块并隐藏)

    代码:

        }

            .clearfix:after{

                content: '.'; è在content块下追加一个"."元素

                clear: both; è清空追加后的盒子

                display: block;è将追加后的“.”元素变成块

                visibility: hidden; è隐藏块

                height: 0;è将隐藏后的块高度设置为0

            }

        </style>

    </head>

    <body>

    <div class="content">

        <div class="container">

            <ul class="clearfix">

                <li class="item">1</li>

                <li class="item">2</li>

                <li class="item">3</li>

                <li class="item">4</li>

            </ul>

        </div>

    </div>

    <div class="uuu"></div>

    <span class="ttt">个哈哈哈哈</span>

    </body>

    </html>

    输出:

    4)给父元素添加owerflow:hidden 推荐使用

    解释:方法参数是清除多余浮动内容,简单方便实用

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>li标签的用法</title>

        <style type="text/css">

              html{

                font-size: 14px;

            }

            body,ul{

                margin: 0;

                padding: 0;

            }

            ul{

                list-style: none;

            }

            .container{

                1226px;

                height: 100%;

                margin: 0 auto;

            }

            .content {

                height: 100%;

                margin: 0 auto;

            }

            body,ul{

                margin:0;

                padding: 0;

            }

            .content ul .item{

                float: left;

                25%;

                height: 100px;

                background-color: blueviolet;

            }

              .uuu{

                100px;

                height: 400px;

                background-color: red;

            }

            ul{

                overflow: hidden;

            }

        </style>

    </head>

    <body>

    <div class="content">

        <div class="container">

            <ul>

                <li class="item">1</li>

                <li class="item">2</li>

                <li class="item">3</li>

                <li class="item">4</li>

            </ul>

        </div>

    </div>

    <div class="uuu"></div>

    <span class="ttt">个哈哈哈哈</span>

    </body>

    </html>

    输出:

    6.3 修改盒模型

    解释: 重要作用于每个盒子之间的距离调整,及盒子中的内容格式调整

    作用:/*如果保持盒模型不变,加padding,就要减内容的宽高*/

    6.3.1 练习:

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            .box{

                180px;

                height: 180px;

                background-color: green;

                /*padding: 20px;*/

                padding-top: 20px; è

                padding-left: 20px;

                /*border: 1px double red;*/

                /*如果保持盒模型不变,加padding,就要减内容的宽高*/

                border-radius: 5px ;

                /*margin垂直方向会出现塌陷问题,避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/

                margin-bottom: 100px;

     

                /*盒子的宽度= 内容的宽度+ 2*padding + 2*border*/

            }

            .box2{

                100px;

                height: 100px;

                background-color: yellow;

                margin-top: 50px;

            }

        </style>

    </head>

    <body>

        <div class="box">alex</div>

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

    </body>

    </html>

    6.4 padding

    解释:margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

                  padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)

    参数:

                         padding: 20px; 以内边框焦点处

                /*padding-top: 20px; */ 以内边上上边处

                /*padding-left: 20px;*/ 以内边框左边处

    例:

    padding:20px;

        <style>

            .box{

                180px;

                height: 180px;

                background-color: green;

                padding: 20px;

    padding:100px

    6.5 double/ solid

    解释:double增加边框

             solid 实心展示

    参数:border: 1px double red;

             border: 1px solid red;

    例:

    .box{

                180px;

                height: 180px;

                background-color: green;

                padding: 20px;

                border: 1px double red;

            

    输出

    6.6 border-radius

    解释:设置圆角一般5就可以

            .box{

                180px;

                height: 180px;

                background-color: green;

                padding: 20px;

                border-radius: 5px ;

    输出

    6.7 margin-top

    参考:

    http://blog.51cto.com/dengshuangfu/1713937

    第7章 写表单交互

    7.1 登录页面(练习)

    代码:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <link rel="stylesheet" href="./css/reset.css">

        <style>

            /**{*/

                /*padding: 0;*/

                /*margin: 0;*/

            /*}*/

            .reg{

                720px;

                height: 400px;

                /*background-color: darkgrey;*/

            }

            .reg p{

                margin-bottom: 20px;

                720px;

                height: 42px;

            }

            .reg p label{

                float:left;

                height: 42px;

                65px;

                margin-right: 10px;

                line-height: 42px;

                font-size: 14px;

                color: #666;

                font-weight: 700;

                text-align: right;

            }

            .reg p .a{

                border:0;

                float:left;

                /*font-size: 20px;*/

                height: 42px;

                313px;

                padding-left: 15px;

                margin-right: 10px;

                border: 1px solid #ddd;

                font-size: 14px;

                color: #666;

            }

            .reg p .b{

                156px;

            }

           .reg p .code{

               border: none;

               145px;

               height: 42px;

               padding-left: 0;

               text-align: center;

               border-radius: 3px;

               background: #f7f7f7;

               border: 1px solid #ddd;

               font-weight: 400;

     

           }

            .regs{

                margin-left: 81px;

            }

            .regs a input{

                270px;

                height: 42px;

                border: none;

                /*background-color:rgba(0,0,0,.6);*/

                background-color: #3f89ec;

                border-radius: 5px;

                color: rgb(255,255,255);

            }

     

     

        </style>

    </head>

    <body>

        <div class="reg">

            <form action="">

                <p>

                    <label for="user">用户名</label>

                    <input type="text" name="username" id="user" placeholder="请输入用户名" class="a">

                </p>

                <p>

                    <label for="phone">手机号</label>

                     <input type="text" name="phone" id="phone" class="a">

                </p>

                 <p>

                     <label for="pwd">密码</label>

                    <input type="password" name="pwd" id="pwd" class="a">

                 </p>

                 <p>

                     <label for="verifyCode">验证码</label>

                     <input type="text" name="verifyCode" id="verifyCode" class="a b">

                     <input type="button" value="获取短信验证码" class="code">

                 </p>

     

                <p class="regs">

                    <!--p只能放 span a  表单控件-->

                    <a href="#">

                        <input type="submit" value="注册">

                    </a>

                </p>

     

            </form>

        </div>

    </body>

    </html>

    输出:

  • 相关阅读:
    Leetcode NO.110 Balanced Binary Tree 平衡二叉树
    Leetcode NO.226 Invert Binary Tree 翻转二叉树
    Leetcode NO.215 Kth Largest Element In An Array 数组中的第K个最大元素
    根据特征的浏览器判断
    Cygwin在打开在当前目录
    【转帖】科学对待 健康养猫 打造快乐孕妇
    解决chrome浏览器安装扩展、应用程序一直处在“检查中”的问题
    对【SQL SERVER 分布式事务解决方案】的心得补充
    关于“点击这里继续访问您选择的百度XXX”
    VBA一例:如何保持文本框焦点
  • 原文地址:https://www.cnblogs.com/wang-xd/p/9494333.html
Copyright © 2011-2022 走看看