HTML和CSS练习：网站首页实例

  • 网站首页布局结构：

 

  • 各部分代码

  • 整体 html 样式设置

<style>

        /*去除浏览器默认的间隙*/
        *{
            margin:0;
            padding:0;
        }

        /*a标签去除下划线*/
        a{
            text-decoration: none;
        }

        /*设置一个默认的字体和大小*/
        body{
            font-family: "Times New Roman";
            font-size:12px;
        }

</style>

  • 导航条部分

样例：

结构图：

HTML 代码：

<body>

    <div class="head-box">
        <div class="head-content">
            <a href="#" class="logo"></a>
            <div class="action-menu">
                <a href="#" class="tb active">全部</a>
                <a href="#" class="tb">42区</a>
                <a href="#" class="tb">段子</a>
                <a href="#" class="tb">图片</a>
                <a href="#" class="tb">挨踢1024</a>
                <a href="#" class="tb">你问我答</a>
            </div>

            <div class="key-search">
                <form action="/" method="post">
                    <input type="text" class="search-txt">
                    <a href="#" class="i">
                        <span class="ico"></span>
                    </a>
                </form>
            </div>

            <div class="action-nav">
                <a href="#" class="register-btn">注册</a>
                <a href="#" class="login-btn">登录</a>
            </div>
        </div>

    </div>

</body>
View Code

CSS 代码：

head-box：

        .head-box{
            background-color: #2459a2;
            height:44px;
            width:100%;
            position: fixed;    /*固定导航条 */
            top:0;
            left:0;
        }
View Code

head-content：居中，给内部某些格子做定位

        .head-content {
            width: 1016px;
            /*background-color: blueviolet;*/
            height: 44px;
            line-height: 44px;
            margin: 0 auto;   /*标签在父标签的居中位置展示*/
            /*border:2px solid red;*/
            position:relative;     /*为了给注册的格子进行定位*/
        }
View Code

logo：a 标签里面添加背景图片

        .head-content .logo{
            display: inline-block;
            background: url('images/logo.jpg');
            width:183px;
            height:41px;
            float: left;
            margin-top: 1px;
        }
View Code

action-menu 和 tb：

        .head-content .action-menu{
            float:left;
            margin-left: 5px;
        }

        /*tb位置样式*/
        .head-content .action-menu a.tb{
            display: inline-block;
            /*background-color: white;*/
            margin-left: -3px;    /*去掉每个tb格子直接的间隔*/
            /*border:1px solid red;*/
            padding:0 16px 0 16px;    /*tb中文字与边框增加距离*/
            color:darkgray;
        }

        /*tb位置悬浮*/
        .head-content .action-menu .tb:hover{
            color:white;
            background-color: #396bb3;
        }

        /*第一个tb标签样式*/
        .head-content .action-menu a.active,.head-content .action-menu a.active:hover{
            color:white;
            background-color: #204982;
        }
View Code

key-search、search-txt 和 ico：ico 的 a 标签背景图片为放大镜

        /*搜索框最外层盒子右飘*/
        .head-content .key-search{
            float:right;
            margin-top: 6px;
        }

        /*搜索输入框*/
        .head-content .key-search .search-txt{
            float:left;    /*内联标签具有float属性之后可以设置长宽*/
            width:91px;    /*内联标签如果设置定位position了，也可以进行调整长宽操作，不用再设置inline-block*/
            height:25px;
            padding:2px 1px 1px 5px;
        }

        /*搜索的a标签*/
        .head-content .key-search a{
            display: inline-block;
            width:31px;
            height:32px;
            background-color: #f4f4f4;
        }

        /*搜索的a标签背景设置为放大镜图标*/
        .head-content .key-search a .ico{
            display: inline-block;
            width:20px;
            height:20px;
            background: url('images/icon.jpg') no-repeat -5px -2px;
            /*border:1px solid red;*/
            margin-left: 5px;
            margin-top:2px;
        }
View Code

action-nav：

        /*注册登录区域最外层大盒子*/
        .head-content .action-nav{
            position:absolute;     /*呼应父标签head-content的relative定位*/
            right:150px;
        }

        /*注册登录的两个按钮a标签*/
        .head-content .action-nav a{
            display: inline-block;
            line-height: 44px;
            color:white;
            margin:0 5px;
            padding:0 20px;
        }

        /*注册登录两个按钮悬浮*/
        .head-content .action-nav a:hover{
            background-color:gold;
        }
View Code

  • 内容主体部分：

样例：

 

结构图：

 

posted @ 2020-10-11 23:55  江畔何人初见月/  阅读(660)  评论(0)    收藏  举报