运行效果图

技术要点

类选择器

语法：类选择器名称 { }

标签选择器

语法：标签名 { }

行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>是最典型的行内元素

行内元素的特点：

1、相邻行内元素在一行上，一行可以显示多个。

2、高度，宽度直接设置无效

3、宽度默认是本身内容的宽度

4、行内元素只能容纳文本或其它行内元素

注意：

1、链接里不能再放其它链接

2、特殊情况<a>链接里面可以放块级元素，但是给<a>转换一下块级模式最安全。

块元素

常见的块元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的块元素

块元素的特点：

1、独占一行。

2、高度，宽度，外边距以及内边距都可以控制。

3、宽度默认是容器（父级容器的100%）

4、是一个容器及盒子，里面可以放行内或者块级元素

注意：

1、文字类的元素内不能使用块级元素

2、<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

3、同理,<h1>--<h6>等都是文字类块级元素，里面也不能放其它块级元素

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工具栏</title>
    <style type="text/css">
         .nav{
              height: 41px;
              border-top: 3px solid #ff8500;
              border-bottom: 1px solid #edeef0;
              background-color: #fcfcfc;
              line-height: 41px;
         }

         .nav a{
             font-size: 12px;
             color: #4c4c4c;
             height: 41px;
             padding: 0 20px; /*上下0，左右20*/
             text-decoration: none;
             display: inline-block;
         }

         .nav a:hover{
             background-color: #eee;
             color: #ff8500;
         }

    </style>
</head>
<body>
    <div class="nav">
        <a href="#">今日头条</a>
        <a href="#">西瓜视频</a>
        <a href="#">抖音</a>
        <a href="#">微博</a>
        <a href="#">拼多多</a>
    </div>
</body>
</html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

div + css 实现顶部工具栏（css div置顶）

运行效果图

技术要点

代码如下：