HTML练习4制作京东登录页,day4 CSS属性和京东登录

1、盒子练习

.div1{

background-color: darkcyan;

width: 100px;

height: 100px;

margin-left: 20px;

margin-top: 20px;

/*float: left;*/

text-indent: 4em;

}

.f1{

text-indent: 2em;

}

按时发达复活节啊奥斯卡房间里卡就分手了空间撒 阿发阿发阿发艾弗森adhfhkash发货咖啡来看哈反抗咯说法很顺利苦咖啡

按时发达复活节啊奥斯卡房间里卡就分手了空间撒 阿发阿发阿发艾弗森adhfhkash发货咖啡来看哈反抗咯说法很顺利苦咖啡

2、常用属性

/*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);

}

我是段落

3、京东登录

京东-欢迎登录

*{

margin: 0;

padding: 0;

}

.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;

}

登录页面，调查问卷

依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版

《京东隐私政策》

已上线，将更有利于保护您的个人隐私。

.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;

}

京东不会以任何理由要求您转账汇款，谨防诈骗。

扫码登录|

账号登录

忘记密码

QQ|

微信

立即注册

.bottom{

background-color: lightblue;

height: 110px;

}