Dreamweaver2021/CSS+HTML5实现网页标题导航栏的效果/案例演示 |
您所在的位置：网站首页 › 电视直播中央12社会与法 › Dreamweaver2021/CSS+HTML5实现网页标题导航栏的效果/案例演示 |
Dreamweaver2021/CSS+HTML5实现网页标题导航栏的效果/案例演示
|
一、效果分析
根具效果图分析导航栏的效果，导航栏背景颜色为黑色，对应的7个图标有7个，可以使用盒子，包裹起来 二、样式 1.控制大盒子div的宽度、高度、背景色、内边距、边框等、 2.整体控制小盒子，需要将span转换为行内块元素，然后应用宽度、高度、以及边框样式 3.对七个小盒子设置不同的背景图像 三、开始实现1.首先打开Dreamweaver2021，点击新建文件，建立一个html5格式的文件 2.建立完成后我们利用html搭建起整体的一个结构 3.搭建完结构后把预先下载准备好的图标素材通过CSS设置span背景的方式引入到结构中 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{ |
【本文地址】
今日新闻 |
推荐新闻 |