7.实静态网页战练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小实战</title>
    <style>
        body,h1,h2,h3,h4,ul,li,p{
            margin:0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        body {
            font:14px/2 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: 30px;
        }
        .tab-ct>li{
            display: inline-block;
            margin-top:30px;
            margin: 0 4px;
        }
        .work-img{
            margin-top:40px;
        }
        .operate-ct{
            margin-top:40px;
        }
        .operate-ct>li{
            display: inline-block;
            margin: 0 4px;
        }
        .footer{
            margin-top: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">项目1</a></li>
        <li><a class="btn" href="2">项目2</a></li>
        <li><a class="btn" href="3">项目3</a></li>
        <li><a class="btn" href="4">项目4</a></li>
        <li><a class="btn" href="5">项目5</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>
7.实静态网页战练习

推荐阅读更多精彩内容
