day4 CSS属性和京东登录

1、盒子练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--<style type="text/css">
            .c1{
                background-color: green;
                width: 100px;
                height: 150px;
                margin-left: 30px;
                margin-top: 20px;
                float: left;
            }-->
            <style type="text/css">
                .div1{
                    background-color: darkcyan;
                    width: 100px;
                    height: 100px;
                    margin-left: 20px;
                    margin-top: 20px;
                    /*float: left;*/
                    text-indent: 4em;
                }
                .f1{
                    text-indent: 2em;
                }
            </style>
        </style>
    </head>
    <body>
        <!--<div style="width: 400px; height: 600px; background-color: blue;">
            <div class="c1">
                div
            </div>
            <div class="c1">
                div
            </div>
            <div class="c1">
                div
            </div>
            <div class="c1">
                div
            </div>
            <div class="c1">
                div
            </div>
            <div class="c1">
                div
            </div>
        </div>-->
        <div class="div1">按时发达复活节啊奥斯卡房间里卡就分手了空间撒 阿发阿发阿发艾弗森adhfhkash发货咖啡来看哈反抗咯说法很顺利苦咖啡</div>
        
        
        
        <font class="f1">按时发达复活节啊奥斯卡房间里卡就分手了空间撒 阿发阿发阿发艾弗森adhfhkash发货咖啡来看哈反抗咯说法很顺利苦咖啡</font>
        
        <!--<div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>-->
    </body>
</html>

2、常用属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*1.文本相关属性*/
            /*a.字体大小：font-size*/
            p{
                font-size: 40px;
            }
            /*字体颜色：color*/
            p{
                color: saddlebrown;
            }
            /*字体名 family*/
            p{
                font-family: "楷体";
            }
            /*文字宽度 font-weight*/
            /*取值：1.100-900（100-700之间不管加粗）；
             2.bolder/bold/normal*/
            p{
                font-weight: 800;
            }
            /*文字倾斜 font-style
             italic/oblique - 倾斜
             normal - 不倾斜*/
            p{
                font-style: italic;
            }
            /*内容水平对齐方式：text-align:
             * left - 左对齐
             * right - 右对齐
             * center - 居中
             */
            p{
                text-align: center;
            }
            
            /*文字行高:line-height
             * 设置标签每一行内容的高度，
             * 可以通过设置行高和标签的高度一样来让标签中的内容在垂直方向上居中
             */
            
            /*文字修饰：
             * underline - 上划线
             * overline - 上划线
             * line-through - 删除线
             * none - 去掉文字修饰*/
            
            /*首行缩进：text-indent
             * p标签的文字有效
             * */
            
            /*字间距：letter-spacing
             每个文字之间的间隙
             * */
            
            /*符号位置*/
            
            
            /*3.背景相关*/
            
            ul{
                list-style-image: url(img/aaa.ico);
                
            }
        </style>
    </head>
    <body>
        
        <p>我是段落</p>
        <ul>
            <li></li>
        </ul>
    </body>
</html>

3、京东登录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--设置网页标题-->
        <title>京东-欢迎登录</title>
        <!--设置网页图标-->
        <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
        
        <!--通用样式-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
        
        
    </head>
    <body>
        <!--1.----------网页顶部样式---------------->

        <style type="text/css">
            
            .top{
                /*background-color: green;*/
                height: 120px;
            }
            /*======logo=========*/
            .top .logo{
                /*background-color: yellow;*/
                height: 80px;
                
                
                position: relative;
            }
            
            .top .logo div{
                /*float: left;*/
                /*定位*/
                position: absolute;
                left: 185px;
                
                
                /*在父标签上垂直方向居中*/
                top: 50%;
                margin-top: -30px;
                
            }
            .top .logo .a2{
                /*float: right;*/
                /*定位*/
                position: absolute;
                right: 185px;
                bottom: 10px;
                
                
                /*字体*/
                font-size: 12px;
                color: rgb(142, 142, 142);
                text-decoration: none;
                
                /*背景*/
                background: url(img/q-icon.png) no-repeat 0 center #ffffff;
                padding-left: 22px;

            }
            
            .top .logo .a2:hover{
                color: rgb(216, 36, 50);
                text-decoration: underline;
                
            }
            
            
            
            
            
            /*===========message===========*/
            .top .message{
                background-color: rgb(255, 246, 236);
                height: 40px;
                
                
                /*让子标签水平方向居中*/
                text-align: center;
                /*让子标签垂直方向居中*/
                line-height: 40px;
            }
            
            .top .message p{
                /*字体*/
                font-size: 12px;
                color: rgb(142, 142, 142);
                
                
                /*背景*/
                background: url(img/xx.png) no-repeat 212px center rgba(0,0,0,0);
                
            }
            
            .top .message a{
                /*字体*/
                color: rgb(50, 50, 50);
                text-decoration: none;
                
            }
            .top .message a:hover{
                text-decoration: underline;
            }
            
            
        </style>
        <!--1.----------网页顶部---------------->
        <div class="top">
            <!--顶部的顶部-->
            <div class="logo">
                <div >
                    <a class="a1" href=""><img src="img/logo.png"/></a>
                    <img src="img/l-icon.png"/>
                </div>
                
                <a class="a2" href="">登录页面，调查问卷</a>
            </div>
            <!--顶部的底部-->
            <div class="message">
                <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
                    <a href="">《京东隐私政策》</a>
                    已上线，将更有利于保护您的个人隐私。</p>
            </div>
            
        </div>
        
        
        
        
        
        
        <!--1.----------网页内容样式---------------->
        <style type="text/css">
            
            .content{
                background-color: rgb(81, 158, 220);
                height: 475px;
                
                
                position: relative;
            }
            
            /*背景图*/
            .content .bg_image{
                position: absolute;
                top: 50%;
                margin-top: -237px;
                left: 100px;
            }
            /*登录框*/
                .content .login_div{
                background-color: white;
                width: 350px;
                height: 400px;
                
                
                /*定位*/
                position: absolute;
                top: 10px;
                right: 185px;
                
                
            }
            /*顶部*/
            .content .login_div .div1{
                background-color: rgb(255, 246, 236);
                height: 40px;
                /*居中*/
                text-align: center;
                line-height: 40px;
            }
            .content .login_div .div1 font{
                font-size: 12px;
                color: rgb(142, 142, 142);
                /*背景*/
                background: url(img/xx.png) no-repeat 0 center rgba(0,0,0,0);
                padding-left: 20px;
                
            }
            /*中间*/
            .content .login_div .div2{
    
                height: 310px;
                
            }
            
            .content .login_div .div2 .btn{
                height: 55px;
    
                
                color: #dddddd;
                font-weight: 100;
            }
            .content .login_div .div2 .btn button{
                width: 170px;
                height: 100%;
                background-color: rgba(0,0,0,0);
                border: none;
                font-size: 20px;
                color: rgb(83, 83, 83);
            }
            /*鼠标悬停的状态*/
            .content .login_div .div2 .btn button:hover{
                color: rgb(217, 48, 60);
            }
            /*成为焦点的状态*/
            .content .login_div .div2 .btn button:focus{
                outline: none;
                color: rgb(217, 48, 60);
            }
            
            
            /*输入部分*/
            .content .login_div .div2 .input{
                height: 255px;
                
                /*边框*/
                border-top: 1px solid #dddddd;
                border-bottom: 1px solid #dddddd;
                position: relative;
                
            }
            /*输入框框*/
            .content .login_div .div2 .input div{
                width: 310px;
                height: 40px;
                border: 1px solid #999999;
                margin: 20px;
            }
            .content .login_div .div2 .input .un_div{
                margin-top: 40px;
            }
            
            /*图标*/
            .content .login_div .div2 .input div img{
                height: 40px;
                width: 40px;
                
                border-right: 1px solid #999999;
            }
            
            
            
            
            /*输入框*/
            .content .login_div .div2 .input div input{
                height: 100%;
                width: 250px;
                vertical-align: top;
                border: none;
                
                font-size: 14px;
                
            }
            
            .content .login_div .div2 .input div input:focus{
                outline: none;
            }
            
            
            /*忘记密码*/
            .content .login_div .div2 .input a{
                position: absolute;
                right: 20px;
                
                font-size: 13px;
                color: rgb(53, 53, 53);
                text-decoration: none;
            }
            
            .content .login_div .div2 .input a:hover{
                color: rgb(217, 48, 60);
                text-decoration: underline;
                
            }
            
            /*登录按钮*/
            .content .login_div .div2 .input .lg_btn{
                width: 310px;
                height: 35px;
                position: absolute;
                bottom: 20px;
                left: 20px;
                font-size: 18px;
                background-color: rgb(228, 57, 60);
                color: white;
                
            }
            
            .content .login_div .div2 .input .lg_btn:focus{
                outline: none;
            }
            
            
            /*底部*/
            .content .login_div .div3{
                height: 50px;
                position: relative;
            }
            
            .content .login_div .div3 .fast_login{
                position: relative;
                left: 80px;
                top: 16px;
                color: #dddddd;
                font-weight: 100;
                
                
                
                
            }
            .content .login_div .div3 .fast_login .qq{
                                /*float: right;*/
                /*定位*/
                position: absolute;
                left: -60px;
                
                
                
                /*字体*/
                font-size: 14px;
                color: rgb(53, 53, 53);
                text-decoration: none;
                
                /*背景*/
                background: url(img/qq.png) no-repeat 0 center #ffffff;
                padding-left: 22px;
            }
            
            .content .login_div .div3 .fast_login .qq:hover{
                color: rgb(217, 48, 60);
                text-decoration: underline;
            }
            
            .content .login_div .div3 .fast_login .wx{
                
                position: absolute;
                left: 20px;
                
                
                
                /*字体*/
                font-size: 14px;
                color: rgb(53, 53, 53);
                text-decoration: none;
                
                /*背景*/
                background: url(img/weixin.png) no-repeat 0 center #ffffff;
                padding-left: 22px;
            }
            
            .content .login_div .div3 .fast_login .wx:hover{
                color: rgb(217, 48, 60);
                text-decoration: underline;
            }
            
            .content .login_div .div3 .alo{
                position: absolute;
                right: 20px;
                top: 16px;
                font-size: 16px;
                color: rgb(182, 29, 29);
                text-decoration: none;
                background: url(img/right.png) no-repeat 0 center #FFFFFF;
                padding-left: 22px;
            }
            .content .login_div .div3 .alo:hover{
                text-decoration: underline;
            }
        </style>
        
        <!--1.----------网页内容---------------->
        <div class="content">
            
            <img class="bg_image" src="img/bg2.png"/>
            
            
            
            <div class="login_div">
                
                <!--登录框-->
                <div class="div1">
                    <font>京东不会以任何理由要求您转账汇款，谨防诈骗。</font>
                </div>
                
                <!--中间-->
                <div class="div2">
                    <div class="btn">
                        <button class="btn1">扫码登录</button>|
                        <button class="btn2">账号登录</button>
                    </div>
                    <!--输入框-->
                    <div class="input">
                        <form action="#">
                            
                            <div class="un_div">
                                <label for="username"><img src="img/pygame.png"/></label>
                                <input placeholder="邮箱/用户名/已验证手机" type="text" name="username" id="username" value="" />
                            </div>
                            <div class="pw_div">
                                <label for="password"><img src="img/password_icon.png"/></label>
                                <input placeholder="密码" type="text" name="password" id="password" value="" />
                            </div>
                            <a href="">忘记密码</a>
                            <input class="lg_btn" type="submit" name="" id="" value="登&emsp;录" />
                        </form>
                    </div>
                    
                </div>
                <!--底部-->
                <div class="div3">          
                    <div class="fast_login">    
                        <a class="qq" href="">QQ</a>|
                        <a class="wx" href="">微信</a>
                    </div>
                    <a class="alo" href="">立即注册</a>
                </div>
                
            </div>
        </div>
        
        
        
        
        <!--1.----------网页底部样式---------------->
        <style type="text/css">
            .bottom{
                background-color: lightblue;
                height: 110px;
            }
        </style>
        
        <!--1.----------网页底部---------------->
        <div class="bottom">

        </div>
        
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,634评论 0赞 6
  • 面向对象的用电信息数据交换协议
    国家电网公司企业标准（Q/GDW）- 面向对象的用电信息数据交换协议 - 报批稿：20170802 前言： 排版 ...
    庭说阅读 11,186评论 6赞 13
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,759评论 1赞 45
  • 滑雪的小轮汽车
    作者，小螃蟹 时间：2018年1月14日 内容：这是一个小轮汽车，她想滑雪，就把轮子放在了旁边，把滑雪的放下来滑雪...
    杨小浠浠阅读 245评论 0赞 1
  • 高中第九十八天
    孩子已有三天没打电话了，心里满是惦记，又没办法，总不能让老师告诉孩子给我打电话吧！一中的刘校长说的是对的，不是孩子...
    绿塬阅读 156评论 0赞 0