项目代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的项目</title>
        <style>
body,h1,h2,h3,h4,h5,h6,ul,li,p,a{
             margin: 0;
             padding: 0;
         }
         a {
             text-decoration: none;
         }
         ul{
             list-style: none;
         }
         body{
             font: 14px/1.4 Arial;
             background-color: #fff2e3;
             text-align: center;
         }
         .btn{
             display: inline-block;
             padding: 4px 6px;
             color: #fff;
             background-color: #72b890;
             border-radius: 3px;
        }
        .btn:hover{
            opacity: 0.7;
        }
        .btn:active{
            opacity: 1;
        }
        .title{
            color:#ccc;
            font-size: 50px;
            margin-top:40px;
        }
        .description{
            color: #aaa;
            margin-top:20px;
        }
        .tab-ct{
            margin-top: 30px;
        }
        .tab-ct>li{
            display: inline-block;
            margin:0 4px;
        }
        .work-img{
            margin-top:40px;
        }
        .operate-ct{
            margin-top:40px;
        }
        .operate-ct>li{
            display: inline-block;
            margin: 0 4px;
        }
        .footer{
            margin:30px;
            color:#aaa;
        }
        .footer a{
            color: #72b890;
        }
        </style>
    </head>>
        <body>
            <h1 class="title">我的项目</h1>
            <p class="description">一句话的介绍</p>
            <ul class="tab-ct">
                <li><a class="btn" href="#">项目1</a></li>
                <li><a class="btn" href="#">项目1</a></li>
                <li><a class="btn" href="#">项目1</a></li>
                <li><a class="btn" href="#">项目1</a></li>
            </ul>
            <img class="work-img" src="http://cdn.jscode.me/65d4aba2-a097-4b24-aaa0-ebbaf7eedab2" alt="">
            <ul class="operate-ct">
                <li><a class="btn" href="#">查看源码</a></li>
                <li><a class="btn" href="#">使用说明</a></li>
            </ul>
            <p class="footer">作者：<a href="#">我</a></p>
        </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容