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发货咖啡来看哈反抗咯说法很顺利苦咖啡

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;

}

.bottom{

background-color: lightblue;

height: 110px;

}