4.1 css其它属性
我是一段文字gggggg
- 数学
- 语文
- 英语
4.2 京东登录
html:
京东欢迎登录
依据《网络安全法》，为保障您的账户安全和正常使用，
请尽快完成手机号验证！ 新版
css:
/*==============通用=================*/
*{
/*取消所有自带的间距*/
margin: none;
padding: none;
/*让当前网页中所有标签的子标签相对自己定位*/
position: relative;
}
a{
/*取消所有a标签的下划线*/
text-decoration: none;
}
/*1.网页顶部*/
#header{
height:120px;
/*background-color: red;*/
}
/*顶部的顶部*/
#header #top{
height: 80px;
}
/*图片*/
#header #top #div1{
position: absolute;
left: 186px;
/*垂直居中
当前标签高度60px*/
top: 50%;
margin-top: -30px;
/*line-height: 60px;*/
}
/*调查问卷*/
#header #top #a1{
/*定位*/
position: absolute;
right: 190px;
bottom: 10px;
/*文字效果*/
font-size: 12px;
color: rgb(150,150,150);
/*背景图
background:图片地址 是否平铺 x坐标 y坐标 背景颜色
*/
/*文字往后挪*/
padding-left: 22px;
background: url(../img/q-icon.png) no-repeat 0px center rgba(0,0,0,0)
}
/*鼠标悬停时变红加下划线*/
#header #top #a1:hover{
color: red;
text-decoration: underline;
}
/*顶部的底部*/
#header #bottom{
height: 40px;
background-color: rgb(255,246,236);
/*水平方向居中*/
text-align: center;
/*文字垂直方向居中*/
line-height: 40px;
}
#header #bottom font{
/*文字右移，给图片让位*/
margin-left:20px;
/*文字大小，颜色*/
font-size: 13px;
color: rgb(150,150,150);
}
#header #bottom font a{
color: rgb(38,38,38);
}
#header #bottom font a:hover{
text-decoration: underline;
}
#header #bottom img{
/*图片垂直居中*/
position: absolute;
top:50%;
margin-top:-8px;
}
/*2.网页中间*/
#content{
height: 470px;
/*background-color: yellow;*/
/*背景图*/
background: url(../img/bg1.png) no-repeat 20% center rgb(196,25,25);
}
#content #login_div{
width: 350px;
height: 400px;
background-color: rgb(255,246,236);
position: absolute;
right: 188px;
top: 10px;
}
#content #login_div #div1{
height: 40px;
background-color: rgb(255,246,236);
line-height: 40px;
}
#content #login_div #div1 p{
font-size: 12px;
text-align: center;
color: rgb(150,150,150);
}
#content #login_div #div1 p img{
/*垂直居中*/
position: absolute;
top:50%;
margin-top: -8px;
}
#content #login_div #div2{
height: 55px;
/*background-color: saddlebrown;*/
/*调整竖线*/
color: rgba(220,220,220,1);
font-weight: 100;
font-size: 18px;
background-color: white;
}
#content #login_div #div2 button{
background-color: white;
width: 170px;
height: 100%;
color: rgb(83,83,83);
/*color:white;*/
font-size: 20px;
border: 0;
font-weight: 600;
}
#content #login_div #div2 button:focus{
/*按钮成为焦点的状态，鼠标点击选中状态*/
/*去掉outline*/
outline: 0;
color: rgb(215,36,50);
}
/*#content #login_div #div2 button:hover{
color: red;
}*/
#content #login_div #div3{
height: 255px;
background-color: white;
border-top: 1px solid rgba(220,220,220,0.6);
border-bottom: 1px solid rgba(220,220,220,0.6);
}
#content #login_div #div3 #username,#content #login_div #div3 #password{
height: 40px;
position: absolute;
left: 20px;
right: 20px;
top:30px;
width: auto;
/*background-color: red;*/
border: 1px solid rgba(220,220,220,1);
}
#content #login_div #div3 #password{
top: 90px;
}
/*输入框图片*/
#content #login_div #div3 img{
width: 40px;
height: 40px;
float: left;
border-right: 1px solid rgba(220,220,220,1);
}
/*输入框*/
#content #login_div #div3 input{
border: 0;
height: 38px;
width: 250px;
float: left;
/*向右移动光标*/
font-size: 12px;
padding-left: 10px;
/*background-color: #0000FF;*/
}
#content #login_div #div3 input:focus{
outline: 0;
}
/*忘记密码*/
#content #login_div #div3 a{
position: absolute;
right: 20px;
top: 150px;
font-size: 13px;
color: rgb(85,85,85);
}
#content #login_div #div3 a:hover{
text-decoration: underline;
color: red;
}
/*登录按钮*/
#content #login_div #div3 button{
position: absolute;
bottom: 30px;
left:20px;
width: 310px;
height: 35px;
border: 0;
background-color: rgb(210,35,50);
color: white;
font-size: 20px;
}
#content #login_div #div3 button:focus{
outline: 0;
}
#content #login_div #div3 button:active{
border: 2px solid blueviolet;
/*设置圆角*/
border-radius: 3px;
/*outline: blueviolet solid 2px;*/
}
/*第3方登录*/
#content #login_div #div4{
height: 50px;
line-height: 50px;
font-size: 13px;
/*color: rgb(83,83,83);*/
background-color: white;
}
#content #login_div #div4 #a1{
margin-left: 10px;
margin-right:15px;
background: url(../img/qq.png) no-repeat 0px -3px rgba(0,0,0,0);
padding-left: 26px;
}
#content #login_div #div4 #a2{
margin-left: 20px;
margin-right:20px;
background: url(../img/weixin.png) no-repeat 0px -3px rgba(0,0,0,0);
padding-left: 26px;
}
#content #login_div #div4 #a3{
position: absolute;
right: 20px;
background: url(../img/right.png) no-repeat 0px 12px rgba(0,0,0,0);
padding-left: 26px;
color: rgb(210,50,50);
}
#content #login_div #div4 a:hover{
text-decoration: underline;
color: red;
}
/*3.网页底部*/
#footer{
height: 110px;
background-color: white;
}
#footer #top{
height: 50px;
background-color: white;
font-size: 12px;
padding-left: 230px;
}
#footer #top a{
line-height: 50px;
padding-left: 15px;
padding-right: 15px;
border-right: 1px solid rgb(83,83,83,1);
}
#footer #top #a11{
border-right: 0;
}
#footer #top a:hover{
color: red;
text-decoration: underline;
}
#footer #bottom{
height: 20px;
background-color:white;
font-size: 12px;
padding-left: 550px;
color: rgb(83,83,83);
}