前端開發(fā)入門教程，web前端零基礎html5 +css3+前端項目視頻教程
《新浪導航案例》
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .box{
? ? ? ? ? ? /* 塊級的默認寬度是網(wǎng)頁的100% */
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? border-top: 3px solid #ff8500;
? ? ? ? ? ? border-bottom: 1px solid #ededf0;
? ? ? ? }
? ? ? ? /* 后代：box里面的a */
? ? ? ? .box a{
? ? ? ? ? width: 80px;
? ? ? ? ? height: 40px;
? ? ? ? ?
? ? ? ? ? /* 行內塊元素 */
? ? ? ? ? display: inline-block;
? ? ? ? ? /* 設置文字對齊方式 */
? ? ? ? ? text-align: center;
? ? ? ? ? /* 設置行高 */
? ? ? ? ? line-height: 40px;
? ? ? ? ? /* 去除下劃線 */
? ? ? ? ? text-decoration: none;
? ? ? ? ? color: black;
? ? ? ? ? font-size: 12px;
? ? ? ? }
? ? ? ?.box a:hover{
? ? ? ? ? ? color: orange;
? ? ? ? ? ? background-color: #ededf0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box">
? ? ? ? <a href="">新浪導航</a>
? ? ? ? <a href="">新浪導航</a>
? ? ? ? <a href="">新浪導航</a>
? ? ? ? <a href="">新浪導航</a>
? ? </div>
</body>
</html>
