1.final-html(css)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>homework</title>
        <link rel="stylesheet" href="css/semantic.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Ralway" rel="stylesheet">
    </head>
    <style media="screen">
        .ui.basic.segment {
            transform: translate(-50%);
            position: absolute;
            left: 50%;
            margin-top: 55px;
            width: 400px;
        }
        .the_captain {
            font-family: "Open Sans",sans-serif;
            font-size: 20px;
        }
        .extra.content {
            font-family: "Ralway",sans-serif!important;
        }
        .column {
            margin-left: -10px;
            margin-right: -10px;
            margin-bottom: 10px;
        }
        .ui.basic.buttons {
            transform: translate(-50%);
            position: absolute;
            left: 45%;
            top: 105%;
            margin-bottom: 40px;
        }
        .ui.button {
            height: 45px;
        }
        .ui.inverted.fixed.borderless.menu.red.menu {
            background-color: #db2828
        }
    </style>
    <body>
        <!--导航栏部分-->
        <div class="ui inverted fixed borderless menu red menu" style="color:#ee4b4a">
            <div class="item">
                <div class="ui image">
                    ![](images/tenlogo.png)

                </div>
            </div>
            <div class="right menu">
                <div class="item">
                    <div class="ui circular image" style="margin-right:10px">
                        ![](images/hou30.jpg)

                    </div>
                    <span style="inverted">admin</span>

                </div>
                <div class="item">
                    <button class="ui circular inverted  button" type="button" name="button">Logout</button>
                </div>
            </div>
        </div>

        <!--目录栏部分-->
        <div class="ui basic segment">
            <div class="ui fluid three item menu" style="top:50px;position:absolute">
                <div class="grey active item">
                    <p style="font-weight:bold">All</p>
                </div>
                <div class="grey active item">
                    <p style="font-weight:bold">New</p>
                </div>
                <div class="item">
                    <p style="font-weight:bold">Editor's</p>
                </div>
            </div>
        </div>
        <!--卡片栏部分-->
        <div class="ui basic segment" style="width:1000px;margin-top:-18px;left:730px;">
            <div class="ui three column grid" style="top:200px;position:absolute">
                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img1.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img2.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img3.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img4.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img5.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img6.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img7.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img8.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>

                <div class="column">
                    <div class="ui fluid card" style="width:270px;height:200px;">
                        <div class="image" >
                            ![](images/img9.jpg)
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui header">
                            <p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
                        <i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
                    </div>
                </div>
                <!--按钮部分-->
                <div class="ui basic buttons">
                  <button class="ui button">
                      <i class="red left arrow icon"></i>
                  </button>
                  <button class="ui button">
                      <i class="red right arrow icon"></i>
                  </button>
                </div>




            </div>


        </div>


    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容