Dreamweaver2021/CSS+HTML5实现网页标题导航栏的效果/案例演示

一、效果分析

根具效果图分析导航栏的效果，导航栏背景颜色为黑色，对应的7个图标有7个，可以使用<div>盒子，包裹起来

二、样式

• 1.控制大盒子div的宽度、高度、背景色、内边距、边框等、
• 2.整体控制小盒子，需要将span转换为行内块元素，然后应用宽度、高度、以及边框样式
• 3.对七个小盒子设置不同的背景图像

三、开始实现

1.首先打开Dreamweaver2021，点击新建文件，建立一个html5格式的文件

2.建立完成后我们利用html搭建起整体的一个结构

3.搭建完结构后把预先下载准备好的图标素材通过CSS设置span背景的方式引入到结构中

	<style>
		div {
   
			width: 630px;/*设置外层大盒子的宽度与高度*/
			height: 48px;
			background:#192132;/*设置最外层大盒子的背景颜色*/
			margin:50px auto;/*将总体设置外边距与居中*/
		}
		span{
   
			width: 80px;
			height: 45px;
			border-bottom: 3px #0FF solid;/*设置图标的地步*/
			display: inline-block;/*将span转换成为行内块元素*/
			padding-left: 5px;/*span的左内边距*/
		}
		.a{
   	background-image:url("1.png") }
		.b{
   	background-image:url