子绝父相以及display:none和block的隐藏和显示的使用

Original 2019-02-05 19:10:40 464
abstract:<!DOCTYPE html><html><head> <title>天猫精选-上天猫,就够了</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="st

<!DOCTYPE html>

<html>

<head>

<title>天猫精选-上天猫,就够了</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="static/css/style.css">

<link rel="shortcut icon" type="image/x-icon" href="static/images/logo1.png">

<link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 

<style>

*{margin: 0px;padding: 0px;}

ul{list-style: none;}

a{text-decoration: none;color: #6D6E6A;}

body{font-size: 12px;}

.top{background: #f2f2f2;height: 35px;}

.content{height: 35px;line-height: 35px;width: 1300px;margin: 0px auto;}

.left{width: 300px;float: left;}

.left a{margin-right:17px;}

.right{float: right;}

.right li{float: left;margin-right:17px;position:relative; }

.right li i{color: red;}

.content a:hover{color: red;}

.right li div{box-shadow:  2px 1px 5px #ccc;background: #fff;text-align: center;display:none; }

.number{width: 115px;position: absolute;left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }

.dope{width: 100px;position:absolute; left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }

#website{width: 1300px;height: 250px;position: absolute;right: 0px;top: 35px;}

.right li:hover div{display: block;}

</style>

</head>

<body>

 <div class="top">

  <div class="content">

  <div class="left">

  <a href=""> 喵,欢迎来到天猫</a>

                <a href="">请登录</a>

                <a href="">免费注册</a>

  </div>

  <div class="right">

  <ul class="">

  <li><a href="">我的淘宝</a>

                         <div>

                          <a href=""></a></div><br>

                          <a href=""></a>

                         </div>

  </li>

  <li><a href="">我关注的品牌</a></li>

  <li><a href="">我收藏的宝贝</a></li>

  <li><a href="">手机版</a></li>

  <li><a href="">淘宝网</a></li>

  <li><a href="">网页导航</a></li>

  </ul>

  </div>

  </div>


 </div>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-02-11 09:20:59
Teacher's summary:要想布局迅速,就要理解每个标签和属性的用意

Release Notes

Popular Entries