HTML+CSS开发心得——仿新浪导航栏（一）

最新推荐文章于 2024-04-14 12:10:13 发布

前端小白兔@

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量2.6k

点赞数 3

本文链接：https://blog.csdn.net/weixin_43237458/article/details/108818667

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

仿新浪导航栏（一）

最近在学习CSS布局和HTML，这个部分给我的感觉是内容很多，虽然代码简单，不需要什么算法，但是我们很难将盒子模型放在我们需要的位置上，再加上一些行高、边距、继承，让人如身在云里雾里。

在学习网页的过程中，我们也要采取模块化学习的方法，一个模块一个模块学习，一步一步来。

千万不能以为代码简单，就小瞧这门语言，其实它大有讲究。

分析

打开新浪导航栏，我们可以分析如下：
在这里插入图片描述

一个大盒子与浏览器同宽
一个通栏（可视区）的大盒子w
可视区的大盒子里包括左右两个部分（fl+fr）
左右两个部分的选项用ul+li+a

分析完毕，下面开始写代码

HTML结构

<body>
    <div class=" header ">
        <div class="w">
            <div class="fl">
                <ul>
                    <li><a href="#">设为首页</a></li>
                    <li><a href="#">手机新浪网</a></li>
                    <li><a href="#">移动客户端</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">您好，新用户</a></li>
                    <li><a href="#">微博</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">邮箱</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">关闭</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

初始化样式，包括清除内外边距，给定可视区大小，导航栏的盒子高宽


<style>
        * {
            /* 清除元素的内外边距 */
            margin: 0;
            padding: 0;
        }

        .w {
            /* 给页面可视区一个通栏的大盒子 */
            margin: 0 auto;
            background-color: pink;
        }
         .header {
            border-top: 2px solid #ff8400;
            border-bottom: 1px solid #edeef0;
            background-color: rgb(255, 255, 255);
        }
 </style>

验证如下:

在这里插入图片描述
我们继续清除li中的样式和a的下划线：

在这里插入图片描述 按照网页布局的第一原则：标准流设置上下排列，浮动设置左右排列;

标准流已经布局完毕，我们知道这势必要添加浮动，并且左侧盒子添加左浮动，右侧盒子添加右浮动

在这里插入图片描述出现这种情况很正常，因为我们只给可视区里面的盒子加了浮动，而ul中元素没有加浮动。

Q：是给a加浮动还是li加浮动？

A：li加浮动。li是块级元素，是一行一行显示的，只有加了浮动才可以在一行显示。而a本来就是行内元素。

li {
	float:left;
}

在这里插入图片描述
此时我们注意到：
字体、字体间的距离、居中对齐都需要修饰。

注意1：修饰字体在最近一级的父元素修饰。
所以我们给定：字体大小和颜色

ul li a {
 font-size: 12px;
 color: rgb(76, 76, 76);
}

注意2：字体间的距离用padding修饰，那么padding给谁呢？

情况1：padding给 li

在这里插入图片描述
鼠标点击的时候，只有小小的一块区域显示被选中，用户体验很差。

情况2：padding给 a

在这里插入图片描述
由此可见li 给 a 最合适

还有几个小技巧:

由于行高可以继承，因此在header盒子中便添加行高等于盒子高度，使盒子中的文字居中对齐。
需要把a行内元素转化为行内块元素。此时a有了高度，父元素的行高继承给了他。

总结：

导航栏的写法
ul+ li + a ，文字放在a中
padding给a，这样使用户体验最好
注意的问题
a是行内元素，需要转换为行内块元素，使其有行高
行高会继承，在一个盒子中，text-align 使得盒子中的所有行内元素居中对齐。

后记：CSS作为一门标记语言，不难也不简单。我们在学习过程中一定要善于总结。

附代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿新浪导航栏效果</title>
    <style>
  
        * {
            /* 清除元素的内外边距 */
            margin: 0;
            padding: 0;
        }

    

        .w {
            /* 给页面可视区一个通栏的大盒子 */
            width: 1200px;
            margin: 0 auto;

        }
        .header {
            border-top: 2px solid #ff8400;
            background-color: rgb(255, 255, 255);
            border-bottom: 1px solid #edeef0;
            height: 40px;
            line-height: 40px;
        }

        .fl  {
            float: left;
        }

        .fr  {
            float: right;
        }
        
        li {
            float: left;
            list-style: none;
    
        }
        a {
            text-decoration: none;
        }

        ul li a {
            display: inline-block;
            font-size: 12px;
            color: rgb(76, 76, 76);
            padding-left: 20px;
            padding-right: 15px;

        }

        ul li a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>

<body>
    <div class=" header ">
        <div class="w">
            <div class="fl">
                <ul>
                    <li><a href="#">设为首页</a></li>
                    <li><a href="#">手机新浪网</a></li>
                    <li><a href="#">移动客户端</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">您好，新用户</a></li>
                    <li><a href="#">微博</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">邮箱</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">关闭</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

个人整理总结，如有疏漏，尽情指正！

前端小白兔@

关注

3
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS开发心得——仿新浪导航栏（一）

仿新浪导航栏（一）最近在学习CSS布局和HTML，这个部分给我的感觉是内容很多，虽然代码简单，不需要什么算法，但是我们很难将盒子模型放在我们需要的位置上，再加上一些行高、边距、继承，让人如身在云里雾里。在学习网页的过程中，我们也要采取模块化学习的方法，一个模块一个模块学习，一步一步来。千万不能以为代码简单，就小瞧这门语言，其实它大有讲究。分析打开新浪导航栏，我们可以分析如下：一个大盒子与浏览器同宽一个通栏（可视区）的大盒子w可视区的大盒子里包括左右两个部分（fl+fr）左右两个部分的
复制链接

扫一扫