CSS Demo

最新推荐文章于 2024-04-12 02:57:04 发布

司天宏

最新推荐文章于 2024-04-12 02:57:04 发布

阅读量972

点赞数 1

本文链接：https://blog.csdn.net/qq_41532872/article/details/86465928

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        body {
            background: url(img/bg.jpg) no-repeat center center;
            background-size: cover;
        }
        .main {
            width: 370px;
            height: 380px;
            position: absolute;
            left: 50%;
            top: 50%;
            box-sizing: border-box;
            padding: 25px 30px;
            margin-left: -185px;
            margin-top: -190px;
            border-radius: 5px;
            background-image: url("img/tmbg-white.png");
        }

        .main > h1 {
            color: #333;
            font-size: 24px;
            font-weight: lighter;
            text-align: center;
        }
        .username, .password, .verification-code {
            margin-top: 20px;
            position: relative;
        }
        .username {
            margin-top: 25px;
        }
        .username > input, .password > input, .verification-code > input {
            width: 100%;
            height: 46px;
            font-size: 16px;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #ddd;
            outline: 0 none;
            line-height: 24px;
            border-radius: 3px;
        }

        .username > i, .password > i {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 9px;
            right: 15px;
        }

        .username > i {
            background-image: url("img/username.png");
        }

        .password > i {
            background-image: url("img/password.png");
        }

        .verification-code > input {
            padding-right: 41px;
        }

        .verification-code > img {
            width: 100px;
            height: 44px;
            position: absolute;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            border-left: 1px solid #ddd;
            right: 1px;
            top: 1px;
        }

        .login-btn {
            width: 100%;
            height: 46px;
            color: #fff;
            font-size: 16px;
            margin-top: 30px;
            outline: 0 none;
            border: solid 1px #0ae;
            border-radius: 3px;
            text-align: center;
            background-color: #0ae;
        }
    </style>
</head>
<body>
    <div class="main">
        <h1>尚学堂人事管理系统</h1>
        <form action="login.jsp">
            <div class="username">
                <input type="text" placeholder="登录账号">
                <i></i>
            </div>
            <div class="password">
                <input type="password" placeholder="登录密码">
                <i></i>
            </div>
            <div class="verification-code">
                <input type="text" placeholder="填写右侧的验证码">
                <img src="img/passcode.jpg" alt="验证码">
            </div>
            <input type="submit" class="login-btn" value="登录">
        </form>
    </div>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*清除默认样式start*/
        * {
            padding: 0;
            margin: 0;
        }
        body {
            font-family: arial;
        }
        ul {
            list-style: none;
        }
        .clearfix {
            clear: both;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
            height: 0;
        }
        /*清除默认样式end*/

        /*设置导航栏样式start*/
        .nav-list {
            float: right;
            margin-right: 15px;
        }
        .nav-list > li {
            float: left;
        }
        .nav-list > li > a {
            display: inline-block;
            margin: 10px 2px;
            padding: 0px 5px;
            color: #333;
            font-size: 13px;
            font-weight: 600;
            line-height: 24px;
        }
        .nav-list > li > a:hover {
            color: #00c;
        }
        .nav-list > .more > a {
            background-color: blue;
            border-radius: 2px;
            color: white;
            text-decoration: none;
        }
        /*设置导航栏样式end*/


        /*搜索模块start*/
        .search-box {
            /*background-color: blue;*/
        }
        /*设置logon图片*/
        .search-box > .logo {
            width: 270px;
            margin: 0 auto 20px;
        }

        /*设置搜索框和提交按钮并排显示*/
        .search, input[type="submit"] {
            float: left;
        }

        /*美化搜索框和提交按钮*/
        .search > input {
            width: 540px;
            height: 38px;
            /*设置为怪异盒子模型*/
            box-sizing: border-box;
        }
        input[type="submit"] {  /*默认为怪异盒子模型*/
            width: 100px;
            height: 38px;
            background-color: #3385ff;
            color: #fff;
            border: 1px solid #2d78f4;
        }
        /*设置整个搜索模块左右居中*/
        .search-box {
            width: 640px;
            margin: 25px auto 0;
        }

        /*优化操作*/
        .search > input {
            /*清除搜索框右侧的边框*/
            border: 1px solid #ccc;
            /*transparent: 透明*/
            border-right-color: transparent;
            /*清除处于编辑状态的蓝色边框*/
            outline: 0 none;
            /*设置光标位置*/
            padding-left: 7px;
        }

        /*添加小相机*/
        .search {
            position: relative;
        }
        .search > i {
            /*display: inline-block;*/
            height: 16px;
            width: 18px;
            background-image: url(baidu/xj.png);
            background-repeat: no-repeat;

            position: absolute;  /*子绝父相*/
            top: 9px;
            right: 7px;
        }
        .search > i:hover {
            background-position: 0 -20px;
        }
        /*搜索模块end*/
        
        /*底部模块start*/
        .footer {
            margin: 200px 0 0;
        }
        /*二维码设置start*/
        .footer > .QRCode {
            width: 60px;
            margin: 0 auto 10px;
        }
        .footer > .QRCode > i {
            display: inline-block;
            width: 60px;
            height: 60px;
            background: url("baidu/zbios_efde696.png") no-repeat;
        }
        .footer > .QRCode > p {
            text-align: center;
            line-height: 23px;
            color: #666;
            font-weight: 700;
            font-size: 12px;
        }
        /*二维码设置end*/
        .footer {
            margin-bottom: 30px;
        }
        .footer-txt {
            text-align: center;
        }
        .footer-txt > a, .footer-txt > span {
            display: inline-block;
            color: #999;
            font-size: 12px;
            line-height: 23px;
        }

        .footer-first > a , .footer-txt > .footer-last{
            margin: 0 10px;
        }

        .footer-txt > .tag {
            display: inline-block;
            background-image: url(baidu/icons_5859e57.png);
            background-repeat: no-repeat;
            width: 14px;
            height: 17px;
            position: relative;
            top: 3px;

        }

        .footer-txt > .tag1 {
            background-position: -600px -96px;
            left: -1px;
        }
        .footer-txt > .tag2 {
            background-position: -623px -96px;
            left: -12px;
        }

        /*底部模块end*/



    </style>
</head>
<body>
    <!--导航模块start-->
    <div class="nav">
        <ul class="nav-list">
            <li><a href="#">新闻</a></li>
            <li><a href="#">hao123</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="#">学术</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">设置</a></li>
            <li class="more"><a href="#">更多产品</a></li>
        </ul>
        <!--清除浮动-->
        <div class="clearfix"></div>
    </div>
    <!--导航模块end-->
    <!--搜索框模块start-->
    <div class="search-box">
        <!--logo图片模块-->
        <div class="logo">
            <img width="270px" src="baidu/bd_logo1.png" alt="图片加载失败">
        </div>
        <!--搜索框和小相机-->
        <div class="search">
            <input type="text"> <!--输入框-->
            <i></i> <!--小相机-->
        </div>
        <!--提交按钮-->
        <input type="submit" value="百度一下">
    </div>
    <!--搜索框模块end-->

    <!--底部模块start-->
    <div class="footer">
        <!--二维码-->
        <div class="QRCode">
            <i></i> <!--二维码背景图片-->
            <p>百度</p>
        </div>
        <p class="footer-txt footer-first">
            <a href="#">把百度设为主页</a>
            <a href="#">关于百度About</a>
            <a href="#">About Baidu</a>
            <a href="#">百度推广</a>
        </p>
        <p class="footer-txt">
            <span>©2018 Baidu</span>
            <a href="#">使用百度前必读</a>
            <a href="#">意见反馈</a>
            <span>京ICP证030173号</span>
            <i class="tag tag1"></i>
            <a href="#" class="footer-last">京公网安备11000002000001号</a>
            <i class="tag tag2"></i>
        </p>
    </div>
    <!--底部模块end-->
</body>
</html>

司天宏

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS Demo

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { margin:
复制链接

扫一扫