• 编写html页面常常犯的错误


    1.图方便,不看,或者疲惫,不熟,;乱写标签
    2.元素css定位不到,是class 的类属性没有写进引号内

     <!--这个touxing没有写进双引号内,怪不得定位不到元素-->
                <!--<div class="col-3" touxiang> 这是之前的写法犯了定位不到元素-->
    

    3.笔记待补充查询

    <!--<aside> 标签定义 <article> 标签外的内容 的内容应该与附近的内容相关-->
            <!--设计登录界面下半部分边框,分别是3,6,3-->
            <!--这里的row与col在网格系统中有什么关系-->
    
    <!--这里的dl,dt,i;这些html属性没碰到过。又见到了标签a包含span-->
        <!--placeholder又一个新标签-->
                    <!--input包span会有啥效果-->
    

    详细代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <!--模仿都显示不出一样的图片-->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
        <!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">
        这句话是自适应移动窗口界面;shrink-to-fit=no这是专为IOS所设置的,适应它-->
        <title>QQ登录</title>
        <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
        <script src="jquery-3.3.1.slim.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
        <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
        <style>
            /*登录界面外边框*/
            div.QQlogin {
                margin: 20px auto;
                 430px;
                height: 333px;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
            }
    
            div.down {
                position: relative;
                /*定义相对定位*/
                height: 153px;
                /*定义高度*/
                background-color: #EBF2F9;
                /*定义宽度*/
                margin-right: 0;
                /*定义右外边距*/
                margin-left: 0;
                /*定义左外边距*/
            }
    
            /*登录表单上的图片*/
            div.QQlogin aside {
                 100%;
                height: 180px;
                background-image: url("images/qq.gif");
                /*相对路径,images与改代码放在同一文件夹*/
            }
    
            /*定义头像*/
            div.down div.touxiang {
                height: 100%;
            }
    
            /*在CSS中定位a需要用到>,有点xpath选取对象的感觉*/
            div.down div.touxiang > a {/*这里的> a 均要分隔开*/
                 81px;
                height: 81px;
                display: inline-block;
                background: url("images/touxiang.png") no-repeat;
                margin-top: 20px;
                margin-left: 30px;
            }
    
            div.down div.touxiang dl {
                position: absolute;
                /*定义绝对定位*/
                left: 100%;
                top: 53%;
            }
    
            /*定义图像右下角小图标*/
            div.down div.touxiang dl span {
                display: inline-block;
                /*定义行内块元素*/
                 14px;
                /*定义宽度14px*/
                height: 14px;
                /*定义高度*/
                background-image: url("images/ptlogin.png");
                /*定义图片*/
                background-repeat: no-repeat;
                /*设置图片不平铺*/
            }
    
            /*定义左下角切换用户*/
            div.down div.touxiang i.people {
                background: url("images/input_username.png") no-repeat;
                /*定义图片,设置图片不平铺*/
                position: absolute;
                /*设置绝对定位*/
                top: 75%;
                /*设置距顶部75%*/
                left: 10px;
                /*设置距左边10px*/
                 35px;
                /*设置宽度*/
                height: 35px;
                /*设置高度*/
            }
    
            /*中间主体部分*/
            div.login-box {
                margin-top: 15px;
                /*定义顶部外边距15px*/
                margin-left: 20px;
                /*定义左边边距20px*/
            }
    
            div.login-box input {
                height: 30px;
                /*定义高度*/
                 195px;
                /*定义宽度*/
                border: 1px solid #d1d1d1;
                /*定义边框*/
                padding-left: 10px;
                /*定义左边内边距*/
                color: #7e7e7e;
                /*定义背景色*/
            }
    
            div.login-box span.first {
                display: inline-block;
                /*定义行内块级元素*/
                position: absolute;
                /*定义绝对定位*/
                 20px;
                /*宽度*/
                height: 20px;
                /*定义高度*/
                background: url("images/row.png") no-repeat;
                /*定义背景图片*/
                margin-left: 172px;
                /*定义左边外边距*/
                top: 8px;
                /*距离顶部8px*/
            }
    
            div.login-box span.second {
                display: inline-block;
                /*定义行内块级元素*/
                position: absolute;
                /*定义绝对定位*/
                 20px;
                /*定义宽度*/
                height: 20px;
                /*定义高度*/
                background: url("images/press.png") no-repeat;
                /*定义背景图片*/
                margin-left: 168px;
                /*定义左边外边距*/
                top: 34px;
                /*距离顶部34px*/
            }
    
            div.login-box label {
                font-size: 12px;
                /*定义字体大小*/
                color: #656565;
                /*定义字体颜色*/
                text-indent: 15px;
                /*定义文本缩进*/
                margin-top: 10px;
                /*定义顶部外边距*/
                display: inline-block;
                /*定义行内块级元素*/
            }
    
            div.login-box label.auto-login {
                margin-left: 48px;
                /*定义左边边距*/
            }
    
            div.login-box input.three {
                 16px;
                /*定义宽度*/
                height: 16px;
                /*定义高度*/
                margin-top: 1px;
                /*定义顶部外边距*/
                position: absolute;
                /*定义绝对定位*/
                margin-left: -15px;
                /*定义左边负外边距*/
            }
    
            div.login-box input.four {
                 16px;
                /*定义宽度*/
                height: 16px;
                /*定义高度*/
                margin-top: 1px;
                /*定义顶部外边距*/
                position: absolute;
                /*定义绝对定位*/
                margin-left: -15px;
                /*定义左边负外边距*/
            }
    
            div.login-box button {
                display: block;
                /*定义块级元素*/
                 195px;
                /*定义宽度*/
                height: 30px;
                /*定义高度*/
                background-color: #16a8de;
                /*定义背景颜色*/
                color: #fff;
                /*定义字体颜色*/
                border-radius: 5px;
                /*定义圆角边框*/
                font-size: 14px;
                /*定字体大小*/
                font-weight: 600;
                /*定义字体加粗*/
            }
    
            /*设置右侧功能区,如果先设置的话并没有改变*/
            div.register {
                position: absolute;
                /*定义绝对定位*/
                margin-top: 22px;
                /*定义顶部外边距*/
                margin-left: 335px;
                /*定义左边外边距*/
            }
    
            div.register a {
                color: #2685e3;
                /*定义字体颜色*/
                display: block;
                /*定义定义块级元素*/
                 60px;
                /*定义宽度*/
                font-size: 13px;
                /*定义字体大小*/
                font-family: "微软雅黑";
                /*定义字体*/
            }
    
            div.register a.find-password {
                margin-top: 13px;
                /*定义顶部外边距*/
            }
        </style>
    
    
    </head>
    
    <body>
        <!--设计登录界面外边框,以及登录界面上半部分-->
        <div class="QQlogin">
            <aside></aside>
            <!--<aside> 标签定义 <article> 标签外的内容 的内容应该与附近的内容相关-->
            <!--设计登录界面下半部分边框,分别是3,6,3-->
            <!--这里的row与col在网格系统中有什么关系-->
            <div class="row down">
                <!--row应该就是个标记把,中文意思一排-->
                <!--这个touxing没有写进双引号内,怪不得定位不到元素-->
                <!--<div class="col-3" touxiang> 这是之前的写法犯了定位不到元素-->
    
                <div class="col-3 touxiang">
                    <a href="#"></a>
                    <dl>
                        <!--这里的dl,dt,i;这些html属性没碰到过。又见到了标签a包含span-->
                        <dt><a href="#"><span class="online"></span></a></dt>
                        <dd></dd>
                        <!--这里的dd啥意思-->
                    </dl>
                    <i class="people"></i>
                </div>
    
    
                <div class="col-6 login-box">
                    <!--placeholder又一个新标签-->
                    <!--input包span会有啥效果-->
                    <input type="text" placeholder="QQ号码/手机/邮箱"><span class="first"></span>
                    <input type="password" placeholder="密码"><span class="second"></span>
                    <label><input type="checkbox" class="three">&nbsp;记住密码</label>
                    <label class="auto-login"><input type="checkbox" class="four">&nbsp;自动登录</label>
                    <button class="btn">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                </div>
                <!--这里的dir是什么呢,这里犯了乱写标签-->
                <div class="col-3 register">
                    <!--之前我把这里写成了col-9-->
                    <a href="https://www.baidu.com">注册账号</a>
                    <a href="https://www.cnblogs.com/wkhzwmr/p/15097821.html" class="find-password">找回密码</a>
                </div>
            </div>
        </div>
    </body>
    
    </html>
    
    努力拼搏吧,不要害怕,不要去规划,不要迷茫。但你一定要在路上一直的走下去,尽管可能停滞不前,但也要走。
  • 相关阅读:
    Java排序算法之归并排序
    Java多线程学习笔记(四)——Thread类中方法介绍
    大数据平台搭建:Hadoop
    np.arrange用法
    Pandas中DateFrame修改列名
    python .loc vs .iloc区别
    The categories of Reinforcement Learning 强化学习分类
    python3.6安装总结
    梯度下降法与牛顿下降法速度的比较
    My SQL 和SQL Server区别
  • 原文地址:https://www.cnblogs.com/wkhzwmr/p/15098289.html
Copyright © 2020-2023  润新知