PYTHON第五十二天笔记11.7

继承：字体样式可以继承。

内联标签加上float属性，可以设长宽。

line-height对于image无效。

内连设置长宽：加float浮动或display：inline-block，block。

 

 课堂图片：

1

2

 

3

4

 

抽屉作业标题部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            font-size: 12px;
        }

        a{
            text-decoration: none;
        }

        /*header区域设置*/
        .header{
            width: 100%;
            height: 44px;
            background-color: #2459a2;
            position: fixed;
            top: 0;
            left: 0;
        }

        .headerCon{
            width: 80%;
            height: 44px;
            background-color:#2459a2;
            margin: 0 auto;
            /*border: 1px solid red;*/
            line-height: 44px;

        }

        .logo{
            margin-top: 11px;
            float: left;
            width: 121px;
            height: 23px;
            /*border: solid 1px red;*/
            background: url("http://dig.chouti.com/images/logo.png") no-repeat 0 0;
        }

        .action_menu{
            float: left;
        }

        .action_menu a.tb{
            color: #c0cddf;
            padding: 0 13px 0 16px;
            display: inline-block;
            margin-left: -3px;
            /*float: left;*/
        }

        .headerCon .action_menu a.active,.headerCon .action_menu a.active:hover{
            margin-left: 20px;
            background-color: #204982;
            color: white;
        }


        .action_menu a.tb:hover{
            background-color:#396bb3;
            color: white;
        }

        .key_search{
            float: right;
            margin-top: 5px;
        }

        .key_search .search_text,.key_search a.icon{
            float: left;
        }
        .key_search .search_text{
            width: 91px;
            height: 23px;
            padding: 2px 2px 2px 5px;
        }

        .key_search a.icon{
            width: 30px;
            height: 29px;
            background-color: white;
            border: 1px solid #e0e0e0;
            border-left: 0;
            text-align: center;
            line-height: 29px;
        }

        .key_search a.icon span{
            display: inline-block;
            height: 12px;
            width: 11px;
            /*background-color: forestgreen;*/
            /*margin-left: 5px;*/
            /*margin-top: 2px;*/

            background: url("http://dig.chouti.com/images/icon.png") no-repeat 0 -197px;

        }

        .regLoginBtn{
            float: right;
            margin-right: 10px;
        }

        .regLoginBtn a{
             padding: 0 13px 0 16px;
            display: inline-block;
            margin-left: -3px;
            color: white;

        }

        .regLoginBtn a:hover{
            background-color: #396bb3;
        }


    </style>
</head>
<body>


<div class="header">
    <div class="headerCon">
        <a href="" class="logo"></a>
        <div class="action_menu">
            <a href="#" class="tb active">全部</a>
            <a href="#" class="tb">42区</a>
            <a href="#" class="tb">段子</a>
            <a href="#" class="tb">图片</a>
            <a href="#" class="tb">it</a>
            <a href="#" class="tb">你问我答</a>
        </div>

        <div class="key_search">
            <form action="">
                <input type="text" class="search_text">
                <a href="" class="icon">
                    <span></span>
                </a>
            </form>
        </div>

         <div class="regLoginBtn">
            <a href="">登录</a>
            <a href="">注册</a>
        </div>
    </div>
</div>

<div class="content">
    <div class="contentDetail">
           <div class="contentDetail2">
                 <div class="left">
                     <div class="Top">

                     </div>
                     <div class="article_list">
                         <div class="article_item"></div>
                     </div>
                     <div class="pager">

                     </div>

                 </div>
                 <div class="right"></div>
           </div>

        <div class="footer"></div>
    </div>
</div>
</body>
</html>
抽屉作业头

 

posted @ 2017-11-07 10:55  主啊~  阅读(47)  评论(0)  编辑  收藏  举报