console 命令行工具 X clear

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 ---------------------------------*/