自己的设计

最新推荐文章于 2019-01-07 17:16:22 发布

cainiao0314

最新推荐文章于 2019-01-07 17:16:22 发布

阅读量276

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/cainiao0314/article/details/73848976

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里是我根据客户需求完成的设计以及代码实现的一部分截图，已经上线，不经允许请勿照搬
使用的是BootStrap框架，页面整体布局简单，功能性强，使用简单易懂

部分代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="common/comstyle.css">
</head>
<body>
<section id="section1">
    <header class="login_header">
        <div style="padding: 30px 0;">
            <img src="common/image/logo.png" alt="" class="header_logo mal">
            <p class="header_p">货运险自助投保平台</p>
            <hr class="navhr mat"/>
        </div>
    </header>
    <div class="matl">
        <img src="common/image/login_m_bg.jpg" class="login_background">
    </div>
    <div class="login_login">
        <div><img src="common/image/78793709113105149.jpg" class="weizhi_1"></div>
        <p class="weizhi">账号：

        <div class="input-group input-group-sm weizhi_2">
            <input type="text" class="form-control bordradiu" placeholder="账号">
        </div>
        </p>
        <p class="active_1">密码：

        <div class="input-group input-group-sm active_2">
            <input type="password" class="bordradiu form-control" placeholder="密码">
        </div>
        </p>
        <div class="denglu">
            <a href="home.html">
                <button type="button" class="buttoncolor3 allfosize oncecover">立即登录</button>
            </a>
        </div>
    </div>
    <div class="bot">
        <b class="bot1">运维服务热线：<span class="colorcomm">010-83260400(转1转5)</span></b>
        <b class="bot2">|</b>
        <b class="bot3">服务支持：<span class="colorcomm">XXXX</span></b>
    </div>
</section>

</body>
</html>