1.图方便，不看，或者疲惫，不熟，；乱写标签
2.元素css定位不到，是class 的类属性没有写进引号内
<!--这个touxing没有写进双引号内，怪不得定位不到元素-->
<!--<div class="col-3" touxiang> 这是之前的写法犯了定位不到元素-->
3.笔记待补充查询
<!--<aside> 标签定义 <article> 标签外的内容 的内容应该与附近的内容相关-->
<!--设计登录界面下半部分边框，分别是3，6，3-->
<!--这里的row与col在网格系统中有什么关系-->
<!--这里的dl,dt,i;这些html属性没碰到过。又见到了标签a包含span-->
<!--placeholder又一个新标签-->
<!--input包span会有啥效果-->
详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--模仿都显示不出一样的图片-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
这句话是自适应移动窗口界面；shrink-to-fit=no这是专为IOS所设置的，适应它-->
<title>QQ登录</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
<script src="jquery-3.3.1.slim.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
<style>
/*登录界面外边框*/
div.QQlogin {
margin: 20px auto;
430px;
height: 333px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
div.down {
position: relative;
/*定义相对定位*/
height: 153px;
/*定义高度*/
background-color: #EBF2F9;
/*定义宽度*/
margin-right: 0;
/*定义右外边距*/
margin-left: 0;
/*定义左外边距*/
}
/*登录表单上的图片*/
div.QQlogin aside {
100%;
height: 180px;
background-image: url("images/qq.gif");
/*相对路径,images与改代码放在同一文件夹*/
}
/*定义头像*/
div.down div.touxiang {
height: 100%;
}
/*在CSS中定位a需要用到>,有点xpath选取对象的感觉*/
div.down div.touxiang > a {/*这里的> a 均要分隔开*/
81px;
height: 81px;
display: inline-block;
background: url("images/touxiang.png") no-repeat;
margin-top: 20px;
margin-left: 30px;
}
div.down div.touxiang dl {
position: absolute;
/*定义绝对定位*/
left: 100%;
top: 53%;
}
/*定义图像右下角小图标*/
div.down div.touxiang dl span {
display: inline-block;
/*定义行内块元素*/
14px;
/*定义宽度14px*/
height: 14px;
/*定义高度*/
background-image: url("images/ptlogin.png");
/*定义图片*/
background-repeat: no-repeat;
/*设置图片不平铺*/
}
/*定义左下角切换用户*/
div.down div.touxiang i.people {
background: url("images/input_username.png") no-repeat;
/*定义图片，设置图片不平铺*/
position: absolute;
/*设置绝对定位*/
top: 75%;
/*设置距顶部75%*/
left: 10px;
/*设置距左边10px*/
35px;
/*设置宽度*/
height: 35px;
/*设置高度*/
}
/*中间主体部分*/
div.login-box {
margin-top: 15px;
/*定义顶部外边距15px*/
margin-left: 20px;
/*定义左边边距20px*/
}
div.login-box input {
height: 30px;
/*定义高度*/
195px;
/*定义宽度*/
border: 1px solid #d1d1d1;
/*定义边框*/
padding-left: 10px;
/*定义左边内边距*/
color: #7e7e7e;
/*定义背景色*/
}
div.login-box span.first {
display: inline-block;
/*定义行内块级元素*/
position: absolute;
/*定义绝对定位*/
20px;
/*宽度*/
height: 20px;
/*定义高度*/
background: url("images/row.png") no-repeat;
/*定义背景图片*/
margin-left: 172px;
/*定义左边外边距*/
top: 8px;
/*距离顶部8px*/
}
div.login-box span.second {
display: inline-block;
/*定义行内块级元素*/
position: absolute;
/*定义绝对定位*/
20px;
/*定义宽度*/
height: 20px;
/*定义高度*/
background: url("images/press.png") no-repeat;
/*定义背景图片*/
margin-left: 168px;
/*定义左边外边距*/
top: 34px;
/*距离顶部34px*/
}
div.login-box label {
font-size: 12px;
/*定义字体大小*/
color: #656565;
/*定义字体颜色*/
text-indent: 15px;
/*定义文本缩进*/
margin-top: 10px;
/*定义顶部外边距*/
display: inline-block;
/*定义行内块级元素*/
}
div.login-box label.auto-login {
margin-left: 48px;
/*定义左边边距*/
}
div.login-box input.three {
16px;
/*定义宽度*/
height: 16px;
/*定义高度*/
margin-top: 1px;
/*定义顶部外边距*/
position: absolute;
/*定义绝对定位*/
margin-left: -15px;
/*定义左边负外边距*/
}
div.login-box input.four {
16px;
/*定义宽度*/
height: 16px;
/*定义高度*/
margin-top: 1px;
/*定义顶部外边距*/
position: absolute;
/*定义绝对定位*/
margin-left: -15px;
/*定义左边负外边距*/
}
div.login-box button {
display: block;
/*定义块级元素*/
195px;
/*定义宽度*/
height: 30px;
/*定义高度*/
background-color: #16a8de;
/*定义背景颜色*/
color: #fff;
/*定义字体颜色*/
border-radius: 5px;
/*定义圆角边框*/
font-size: 14px;
/*定字体大小*/
font-weight: 600;
/*定义字体加粗*/
}
/*设置右侧功能区，如果先设置的话并没有改变*/
div.register {
position: absolute;
/*定义绝对定位*/
margin-top: 22px;
/*定义顶部外边距*/
margin-left: 335px;
/*定义左边外边距*/
}
div.register a {
color: #2685e3;
/*定义字体颜色*/
display: block;
/*定义定义块级元素*/
60px;
/*定义宽度*/
font-size: 13px;
/*定义字体大小*/
font-family: "微软雅黑";
/*定义字体*/
}
div.register a.find-password {
margin-top: 13px;
/*定义顶部外边距*/
}
</style>
</head>
<body>
<!--设计登录界面外边框，以及登录界面上半部分-->
<div class="QQlogin">
<aside></aside>
<!--<aside> 标签定义 <article> 标签外的内容 的内容应该与附近的内容相关-->
<!--设计登录界面下半部分边框，分别是3，6，3-->
<!--这里的row与col在网格系统中有什么关系-->
<div class="row down">
<!--row应该就是个标记把,中文意思一排-->
<!--这个touxing没有写进双引号内，怪不得定位不到元素-->
<!--<div class="col-3" touxiang> 这是之前的写法犯了定位不到元素-->
<div class="col-3 touxiang">
<a href="#"></a>
<dl>
<!--这里的dl,dt,i;这些html属性没碰到过。又见到了标签a包含span-->
<dt><a href="#"><span class="online"></span></a></dt>
<dd></dd>
<!--这里的dd啥意思-->
</dl>
<i class="people"></i>
</div>
<div class="col-6 login-box">
<!--placeholder又一个新标签-->
<!--input包span会有啥效果-->
<input type="text" placeholder="QQ号码/手机/邮箱"><span class="first"></span>
<input type="password" placeholder="密码"><span class="second"></span>
<label><input type="checkbox" class="three"> 记住密码</label>
<label class="auto-login"><input type="checkbox" class="four"> 自动登录</label>
<button class="btn">登 录</button>
</div>
<!--这里的dir是什么呢，这里犯了乱写标签-->
<div class="col-3 register">
<!--之前我把这里写成了col-9-->
<a href="https://www.baidu.com">注册账号</a>
<a href="https://www.cnblogs.com/wkhzwmr/p/15097821.html" class="find-password">找回密码</a>
</div>
</div>
</div>
</body>
</html>