console
<!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">
<title>个人注册</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 初始化样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入注册页面的css -->
<link rel="stylesheet" href="css/register.css">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="w">
<header>
<div class="logo">
<a href="https://jsrun.net/xgcKp" title="品优购商城">
<img src="http://ciweipaci.gitee.io/best-buy/images/logo.png" alt="">
</a>
</div>
</header>
<div class="registerarea">
<!-- 注册 主体头部 -->
<h3>
<div class="area_left">注册新用户</div>
<div class="login">
<p>我有个账户，去</p>
<a href="#" class="style_red">登陆</a>
</div>
</h3>
</div>
<footer>底部区域</footer>
</div>
</body>
</html>
/*---------------------------- base.css ---------------------------------*/
* {
margin: 0;
padding: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li 的小圆点 */
li {
list-style: none;
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
/* a:hover {
color: #c81623;
} */
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
/* 默认有灰色边框我们需要手动去掉 */
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
color: #666;
}
.hide,
.none {
display: none;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
/*---------------------------- base.css ---------------------------------*/
/*---------------------------- register.css ---------------------------------*/
/* 整体注册页面版心 */
.w {
width: 1200px;
margin: 0 auto;
}
.style_red {
color: #c81523;
}
/*----- header 头部 -----*/
header {
height: 84px;
border-bottom: 2px solid #c81523;
}
.logo {
/* div.logo 是嵌套的子元素，直接加margin 会导致外边距合并，所以这里用padding */
padding-top: 18px;
}
/*----- 注册主体区域 -----*/
/* 注册主体头部区域 */
.registerarea {
height: 522px;
margin-top: 20px;
border: 1px solid #ccc;
}
.registerarea h3 {
height: 42px;
line-height: 42px;
padding: 0 10px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
font-size: 18px;
font-weight: 400;
}
/* 主体头部 左侧 */
.area_left {
float: left;
}
/* 主体头部 右侧 */
.login {
float: right;
font-size: 14px;
}
.login p {
float: left;
}
/*---------------------------- register.css ---------------------------------*/