hr為什么沒有分割線
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登錄界面</title>
<style>
? ? *{
? ? ? ? margin:0px;
? ? ? ? padding:0px;
? ? ? ? outline:none;
? ? ? ? border:none;
? ? }
? ? .box_1{
? ? ? ? padding:10px;
? ? ? ??
? ? }
? ? a{
? ? ? ? color:#1481b8;
? ? ? ? float:right;
? ? ? ? height:25px;
? ? ? ? text-decoration:none;
? ? }
? ? span{
? ? ? ? margin-left:-10px;
? ? }
? ?
? ? form{
? ? ? ? width:190px;
? ? ? ? font-size:14px;
? ? ? ? background:#dedede;
? ? ? ? text-align:center;
? ? ? ? padding:10px;
? ? }
? ? input{
? ? ? ? width:190px;
? ? ? ? height:30px;
? ? ? ? text-indent:2em;
? ? ? ? margin-bottom:10px;
? ? ? ? border:0 solid #fff;
? ? ? ? border-radius:3px;
? ? }
? ? input[type="checkbox"]{
? ? ? ?
? ? ? ? float:left;
? ? ? ? width:15px;
? ? ? ? margin-left:5px;
? ? ? ? margin-top:-5px;
? ? ? ??
? ? }
? ? .lgBtm {
? ? width:190px;
? ? height:37px;
? ? background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
??
? ? }
? ? .isBtm{
? ? width:190px;
? ? height:37px;
? ? border:none;?
? ? background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
? ? background-position:0 -37px;
? ? margin-top:15px;
? ? }
? ?
</style>
</head>
<body>
? ? <div class="box_1">
? ? <form>
? ? ? ? <input type="text" name="userName" id="userName" placeholder="郵箱/手機號/用戶名" ><br />
? ? ? ? <input type="text" name="userName" id="userName" placeholder="請輸入密碼"><br />
? ? ? ? <input type="checkbox"><span>下次自動登錄</span><a href="#">忘記密碼？</a><br/>
? ? ? ? <button class="lgBtm"><i></i></button>
? ? ? ? <hr>
? ? ? ? <button class="isBtm"><i></i></button>
? ? </form>
? ? </div>
</body>
</html>
2019-05-20
因為你在初始化設置時*{border：none；}把所有邊框都去掉了