index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>零嘴儿</title>
</head>

<body>
    <style>
        body,html {
             padding: 0;
             margin: 0;
             background-color: rgb(249,249,249);
             }
        .biaoti {
            padding: 10px;margin: 0;
            text-align: center;
            color: white;
            font-size: 24px;/*字体大小*/
            background:rgb(46,117,182); 
        }
        .kouhao {
            text-align: center;
            color: rgb(157,195,230);
            padding-top: 100px;
            padding-bottom: 100px;
            font-size: 50px;
            font-family: Georgia, serif;
            text-shadow: 0.1em 0.1em 0.2em rgba(143, 138, 138, 0.438)
        }
        .botton{
            display: block;
            border-radius: 20px;
            border-style: ridge;
            border-width: 3px;
            border-color: rgb(157,195,230) ;
            color:rgb(46,117,182);
            text-align: center;
            width: 200px;
            padding: 20px;
            margin: 0 auto;
            font-size: 20px;
            text-decoration: none;/*没有下划线*/
            background-color: rgb(222,235,247);
            box-shadow: darkgrey 5px 5px 15px 3px ;
        }
        .box{
            display: block;
            float: left;
            width: 100%;
            text-align: center;
        }
    </style>
    <h1 class="biaoti">零嘴儿</h1>
    <h2 class="kouhao">探索零食的世界 </h2>
    <div clss="box">
        <a class="botton" href="select.html">现在就买</a>
    </div>
</body>

</html>