02-CSS基础与进阶-day5_2018-09-03-21-41-57-优快云博客

、

06盒子模型之padding.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
             width: 200px;
             height: 200px;
             border: 1px solid #0f0;
            /*  padding: 10px; */ /*四个方向内边距都是10px*/
             /* padding: 10px 30px; */ /*上下10px  左右30px*/
             /* padding: 10px 20px 30px; */ /*上10 左右20 下30*/
             /* padding: 10px 20px 30px 40px; */ /*上10 右20 下30 左40*/
             /* padding-left: 10px;
             padding-right: 10px;
             padding-top: 20px;
             padding-bottom: 30px; */
             padding: 20px 10px 30px 10px;
       }
    </style>
</head>
<body>
    <div>内边距代表内容到边框的距离</div>
</body>
</html>

07新浪导航栏.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       /* 重置元素的默认样式*/
       * {
              margin: 0;
              padding: 0;
       }
       nav {
           height: 41px;
           background-color: #fcfcfc;
           border-bottom: 1px solid #edeef0;
           border-top: 3px solid #ff8500;
       }

       nav a {
              font-size: 14px;
              color: #4c4c4c;
              text-decoration: none;
              padding: 0 15px;
              display: inline-block;/*超链接是行内元素 所以需要转行内块*/
              height: 41px;
              line-height: 41px; 
       }

       nav a:hover {
               background-color: #eee;
       }
    </style>
</head>
<body>
    <nav>
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
    </nav>
</body>
</html>