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="登 录" />
</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>
