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


    以下是登录页面的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;
    }

     效果图

    既然走上了这条路,那么久不能背信弃义,就要一直走下去。即使前面是刀山火海也要闯一闯。至于结果是悲喜,或许只有时间才能给出答案。
  • 相关阅读:
    补习系列(4)-springboot 参数校验详解
    华为鲁勇:5G+云+AI三大核心引擎将驱动广州数字经济发展
    selenium firefox
    徐翔之后新生代“敢死队”浮出水面:八年一万倍
    ActiveMQ讯息传送机制以及ACK机制
    一元线性回归分析及java实现
    jsoup -- xml文档解析
    HDU 1020 Encoding 字符串
    PHP缓存之文件缓存
    Eclipse PHPEclipse 配置
  • 原文地址:https://www.cnblogs.com/yckv/p/6548505.html
Copyright © 2020-2023  润新知