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

今日内容

  • web前端实训day06——学子商城登录页面(html+css)
    • 准备
      • 垂直居中
      • 边框合并
    • 实现
      • login.html
      • login.css
      • common.css(登录注册页面共同的css初始化部分)

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">
        
        
        
        <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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面title>
    
    <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证xxxxxxxxxxxp>
        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——学子商城登录页面实现)