通过HTML和CSS设计一个静态网页（练习实例，附完整代码）

左手的ㄟ右手 2021-12-14 20:45 279阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]**

网页原址：[博雅互动][Link 1]

<!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>博雅互动-博雅德州扑克下载|博雅斗地主下载|博雅麻将下载|iPhone|Android|手机下载</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            .header {
                width: 100%;
                height: 58px;
                background-color: #191D3A;
            }
    
            .inner {
                width: 1000px;
                height: 58px;
                margin: 0 auto;
                clear: both;
            }
    
            .inner .logo {
                float: left;
                width: 225px;
                height: 44px;
                margin: 7px 0;
            }
    
            .header .nav {
                float: left;
                height: 58px;
            }
    
            .header .inner .navs #current {
                color: #E2E4ED;
                background-color: #252947;
            }
    
            .header .inner .navs a {
                float: left;
                width: 85px;
                height: 58px;
                border-left: 1px solid #252947;
                border-right: 1px solid #252947;
                color: #818496;
                text-decoration: none;
                text-align: center;
                line-height: 58px;
                font-size: 14px;
            }
    
            .header .inner .navs .joinus {
                margin: 12px 0 0 10px;
                height: 32px;
                width: 98px;
                border: 1px solid #3aca7a;
                border-radius: 3px;
                background-color: #38b774;
                color: #fff;
                text-align: center;
                line-height: 32px;
            }
    
            .header .inner .nav:hover {
                color: #fff;
            }
    
            .header .inner .navs .joinus:hover {
                background-color: green;
            }
    
            .header .inner .changelang {
                float: right;
                line-height: 58px;
                /*   padding-left:20px;  在盒子里改的话，若未设置盒子高宽，则会缩短内容的长度 ，比如原来
                自动分配给内容90px，但有了边距，则会自动分配70px，另外20px给了边距*/
                /* 在内容里改的话，相当于内容的外边距 */
    
    
            }
    
            .header .inner .changelang a {
                display: block;
                margin-right: 10px;
                float: left;
                color: #818496;
                text-decoration: none;
                text-align: center;
                font-size: 14px;
            }
    
            .header .inner .changelang .cn {
                color: #1F9574;
    
            }
    
            .header .inner .changelang a:hover {
                color: #1F9574;
            }
    
            /* banner */
            .banner {
                width: 100%;
    
            }
    
            /* content */
            .content {
    
                width: 1200px;
                margin: 10px auto;
    
            }
    
            /* .content li {
                list-style: none;
            } */
    
            /* 列表 */
            .content ul li {
                list-style: none;
                float: left;
                width: 218px;
                margin-right: 40px;
            }
    
            .content ul li  img { 
                width: 218px;
                height: 130px;
    
            }
    
            .content ul li h4 {
                text-align: center;
                line-height: 38px;
                font-size: 14px;
            }
    
            .content ul li .bf {
                text-align: center;
                height: 20px;
            }
    
            .content ul li a {
                color: green;
                font-size: 14px;
                text-decoration: none;
                background: url(imgs/sanjiaoxing.png) no-repeat right 7px;
                padding-right: 12px;
            }
        </style>
    </head>
    
    <body>
        
        <div class="header">
            <div class="inner">
                <div class="logo">
                    <img src="imgs/logo.png" alt="">
                </div>
                <div class="navs">
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="nav" id="current">首页</a>
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="nav">博雅游戏</a>
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="nav">博雅新闻</a>
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="nav">关于我们</a>
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="nav">客服中心</a>
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="nav">投资者关系</a>
                    <a href="https://blog.csdn.net/qq_34243694/article/details/94472828" class="joinus">加入我们</a>
                </div>
                <div class="changelang">
    
                    <a href="" class="cn">中文</a>
                    <a href="">EN</a>
    
                </div>
    
            </div>
        </div>
        
        <div class="banner">
            <img src="imgs/banner.jpg" alt="">
        </div>
        
        <div class="content">
    
            <ul>
                <li>
                   <img src="imgs/pro1.jpg" alt="">
                    <h4>BPT宣传片</h4>
                    <p class="bf">
                        <a href="">点击播放</a>
                    </p>
                </li>
                <li>
                   <img src="imgs/pro2.jpg" alt="">
                    <h4>BPT宣传片</h4>
                    <p class="bf">
                        <a href="">点击播放</a>
                    </p>
                </li>
                <li>
                    <img src="imgs/pro3.jpg" alt="">
                    <h4>BPT宣传片</h4>
                    <p class="bf">
                        <a href="">点击播放</a>
                    </p>
                </li>
                <li>
                    <img src="imgs/pro4.jpg" alt="">
                    <h4>BPT宣传片</h4>
                    <p class="bf">
                        <a href="">点击播放</a>
                    </p>
                </li>
            </ul>
    
    
        </div>
    
    </body>
    
    </html>

效果如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[Link 1]: http://www.boyaa.com/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20211214/3511808175ec49f09d196b008704d3eb.png