• 解决网页设计中网页元素错乱的问题


    以下是登录页面的HTML代码

    在网页设计中在body标签加入clear:both属性清除浮动以免导致页面元素错乱

    如果在header标签加入background-color或者其它属性有可能会发生浏览器不兼容问题以导致无法进行正常显示

    <!DOCTYPE html>
    <html>

    <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <title>Code熊餐厅</title>
    <link rel="stylesheet" href="css/login.css" />
    </head>

    <body>

    <!--如果在header标签加入background-color或者其它属性有可能会发生浏览器不兼容问题以导致无法进行正常显示-->
    <header >
    <div style="background-color: darkgoldenrod;">
    <div class="logo">
    <img src="img/headr_logo.png" />
    </div>
    <div class="title_text">
    Code熊餐厅
    </div>
    </div>

    </header>
    <div>
    <div class="body_left">
    <img src="img/login_left.png" />
    </div>
    <div class="body_right">
    <h1>Code熊登录系统</h1>
    <br />
    <div id="bd">
    <form>
    用户名:<input type="text" size="16" /><br/>
    <br /> 密&nbsp;&nbsp;&nbsp;码:
    <input type="text" size="16" />
    <br />
    <br />
    <button>注册</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button>登录</button>
    </form>
    </div>
    </div>
    </div>
    </body>

    </html>

    Css样式

    body {
    margin: 0;
    padding: 0;
    height: 768px;
    1349px;

    //清除浮动
    clear: both;
    }

    .logo {
    margin: 10px;
    height: 150px;
    }

    .title_text {
    font-family: "楷体";
    font-size: 48px;
    margin-left: 600px;
    margin-top: -110px;
    float: left;
    }

    .logo img {
    margin-left: 450px;
    140px;
    height: 140px;
    }

    .body_left {
    background-image: url(../img/body_left_bg.jpg);
    }

    .body_left img {
    margin: 10px;
    }

    .body_right {
    margin-right: 100px;
    margin-top: -450px;
    float: right;
    }

    #bd {
    margin-left: 20px;
    }

     效果图

    既然走上了这条路,那么久不能背信弃义,就要一直走下去。即使前面是刀山火海也要闯一闯。至于结果是悲喜,或许只有时间才能给出答案。
  • 相关阅读:
    kubernetes部署Ingress Controller创建证书
    污点和容忍度
    Kubernetes部署coredns
    python中私有属性和私有方法
    类的约束
    reactjs 入门
    angularjs ngTable -Custom filter template-calendar
    sql 中条件in参数问题
    详解 nginx location ~ .*.(js|css)?$ 什么意思?
    CentOS 7.2.1511编译安装Nginx1.10.1+MySQL5.7.14+PHP7.0.11
  • 原文地址:https://www.cnblogs.com/yckv/p/6548505.html
Copyright © 2020-2023  润新知