web前端实训day06——学子商城登录页面（html+css）

准备

垂直居中

<style>
        /*
            行内元素的宽高都是由里面的内容撑起来的，使用line-height没什么意思
            块元素：
                行内元素可以使用行高进行垂直居中
                行内块元素也可以使用行高进行垂直居中
                块元素：
                    可以通过转换成行内块元素的形式进行垂直居中
        */
        .div span {
            line-height: 40px;
            background-color: aqua;
        }
        .div2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            line-height: 200px;
            overflow: hidden;
        }

        .div2 div{
            /* margin-top: 50%; 中间的位置：50%+本身高度的一半 
                使用相对定位:减去本身高度的一半，就垂直居中了
            */
            position: relative;
            margin-top: 50%;
            top: -25px;
            width: 30px;
            height: 50px;
            background-color: blue;
            
        }
    </style>

 <h2>行内元素当中的内容</h2>
    <div class="div">
        <span>我是行内元素</span>
    </div>
    <h2>块元素当中的内容</h2>
    <div class="div2">
        <!--行内元素-->
        <!-- <span>块元素当中的内容垂直居中</span> -->
        <!-- <input type="text" placeholder="请输入用户名"> -->
        <div></div>
    </div>

边框合并

<style>
        /*
            1.给父元素边距
            2.给父元素设置overflow：hidden
            3.使用浮动
            4.折中，使用padding
        */
        .parent {
            width: 400px;
            height: 400px;
            background-color: aqua;
            /* border: 1px solid rgba(0,0,0,0); */
            
            /* overflow: hidden; */
            
            /* padding-top: 100px;
            box-sizing: border-box; */

            
        }

        .son {
            height: 100px;
            width: 100px;
            background-color: blue;
            margin-top: 100px;
        }
</style>

<div class="parent">
        <div class="son"></div>
</div>

实现

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <!--引入css样式-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <!--头部-->
    <div class="w header">
        <img src="images/logo.png" alt="logo" class="fl">
        <h2 class="fl">欢迎登录</h2>
    </div>

    <!--登录部分开始-->
    <div class="content">
        <div class="fr">
            <div class="title">
                <h2 class="fl">登录学子商城</h2>
                <a href="register.html" class="fr">新用户注册</a>
            </div>
            <form action="#">
                <div class="username">
                    <input type="text" class="input-text" placeholder="请输入您的用户名">
                    <p class="msg">用户名不能为空</p>
                </div>
                <div class="password">
                    <input type="text" class="input-text" placeholder="请输入您的密码">
                    <p class="msg">密码不能为空</p>
                </div>
                <div class="choose">
                    <input type="checkbox" id="remeberMe">
                    <label for="remeberMe">自动登录</label>
                    <a href="#" class="fr" >忘记密码</a>
                </div>
                <div class="login-btn">
                    <button>登录</button>
                </div>
            </form>            
        </div>
    </div>
    <!--登录部分结束-->

    <!-- 服务部分开始 -->
    <div class="service clearfix w">
        <div>
            <img src="images/icon1.png" alt="品质保障">
            <h4>品质保障</h4>
        </div>
        <div>
            <img src="images/icon2.png" alt="私人订制">
            <h4>私人订制</h4>
        </div>
        <div>
            <img src="images/icon3.png" alt="学员特供">
            <h4>学员特供</h4>
        </div>
        <div>
            <img src="images/icon4.png" alt="专属特权">
            <h4>专属特权</h4>
        </div>
    </div>
    <!-- 服务部分结束 -->

    <!-- 底部相关链接部分开始 -->
    <div class="footer">
        <div class="w clearfix">
            <div class="fl">
                <div>
                    <img src="images/logo.png" alt="logo">
                </div>
                <div>
                    <img src="images/footerFont.png" alt="文字">
                </div>
            </div>
            <!-- 买家帮助部分 -->
            <div class="buyer fl">
                <dl>
                    <dt>买家帮助</dt>
                    <dd>新手指南</dd>
                    <dd>服务保障</dd>
                    <dd>常见问题</dd>
                </dl>
            </div>
            <!-- 商家帮助部分 -->
            <div class="saler fl">
                <dl>
                    <dt>商家帮助</dt>
                    <dd>商家入驻</dd>
                    <dd>商家后台</dd>
                </dl>
            </div>
            <!-- 关于我们 -->
            <div class="about fl">
                <dl>
                    <dt>关于我们</dt>
                    <dd>关于达内</dd>
                    <dd>联系我们</dd>
                    <dd>
                        <img src="images/wechat.png" alt="wechat">
                        <img src="images/sinablog.png" alt="sinablog">
                    </dd>
                </dl>
            </div>
            <div class="client fl">
                <h4>学子商城客户端</h4>
                <div><img src="images/ios.png" alt="ios"></div>
                <div><img src="images/android.png" alt="android"></div>
            </div>
            <div class="fl">
                <img src="images/erweima.png" alt="二维码">
            </div>
        </div>
         <!-- 版权 -->
        <div class="w copyright">
            <p>©2017 达内集团有限公司 版权所有 京ICP证xxxxxxxxxxx</p>
        </div>
    </div>

    <!-- 底部相关链接部分结束 -->


</body>
</html>

login.css

.header {
    margin:30px auto ;
    height: 41px;
}

.header h2 {
    line-height: 41px;
    margin-left: 10px;
    font-size: 24px;
    color: #4f4e4d;
    font-weight: 400;
}

.content {
    height: 561px;
    background-image: url(../images/regist.png);
}

.content>div {
    margin-right: 122px;
    margin-top: 122px;
    padding: 10px;
    width: 280px;
    height: 296px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    box-sizing: border-box;
}

.title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid white;
}

.title h2 {
    font-size: 18px;
    font-weight: normal;
}

.title a {
    font-size: 12px;
}

.username, .password {
    margin-top: 18px;
}

.input-text {
    width: 100%;
    height: 35px;
    padding-left: 15px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 95% center;
}

.msg {
    visibility: hidden;
    line-height: 30px;
    font-size: 12px;
    color: red;
}

.username input {
    background-image: url(../images/username.png);
}


.password input {
    background-image: url(../images/password.png);
}

.choose {
    margin-top: 8px;
    font-size: 12px;
}

.choose input {
    margin-left: 5px;
    vertical-align: middle;
}

.login-btn {
    margin-top: 10px;
}

.login-btn button {
    width: 100%;
    height: 35px;
    background-color: #0aa1ed;
    color: white;
    font-weight: 700;
}

.service {
    margin: 43px auto 74px;
    font-size: 14px;
    color: #666666;
    text-align: center;
}

.service div {
    float: left;
    margin: 0px 93px;
    width: 64px;
    height: 80px;
}

.service div h4 {
    font-weight: 400;
}

.footer {
    background-color: white;
    padding-top: 62px;
}

/* .footer>div {
    margin-top: 62px;
} */

.buyer {
    margin: 0px 57px;

}

dt {
    font-size: 14px;
    color: #333333;
    text-align: center;
    height: 26px;
}

dd {
    font-size: 12px;
    color: #808080;
    text-align: center;
    height: 26px;
}

.saler, .about {
    margin-right: 57px;
}

.client {
    margin-left: 30px;
    margin-right: 10px;
}

.client h4 {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 400;
    text-align: center;
}

.copyright p{
    margin-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 12px;
}

common.css（登录注册页面共同的css初始化部分）

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f5f5f5;
}

a {
    text-decoration: none;
    color: white;
}

input {
    border: none;
}


input:focus {
    outline: none;
}


button {
    border: none;
}

li {
    list-style: none;
}

.w {
    width: 1000px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.contentfix {
    *zoom: 1;
}

web前端实训day06——学子商城登录页面实现

今日内容

web前端实训day06——学子商城登录页面（html+css）

准备

垂直居中

边框合并

实现

login.html

login.css

common.css（登录注册页面共同的css初始化部分）

猜你喜欢