第8天:CSS制作导航栏

今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录。

一、导航栏实现步骤:

1、网页整体分为头部、内容、尾部。网页中心内容部分为版心。版心是定宽的。

2、设定版心宽度。其余每部分内容只需要设置高度即可。

3、header部分分为左、中、右三部分。分别用div包起来,可以设置padding。

4、nav部分用ul实现,li中的a标签为行内元素,要用display转为块标签,给li设置宽高、行高,可以实现居中。

5、鼠标移上去的效果用a:hover实现。

导航栏代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

<style>

*{ margin:0; padding:0; } body{ font-family: "微软雅黑"; font-size: 16px; } .header{ height:58px; background: #191D3A; } .header .inner_c{ width:1000px; margin: 0 auto; } .header .logo{ float:left; padding-right: 50px; } .header .nav{ float:left; } .header .nav li{ line-height: 58px; list-style: none; float:left; text-align: center; border-right: 1px solid #212542; } .header .nav .last{ border: none; } .header .nav li a{ display: block; height:58px; width:100px; text-decoration: none; color: #6B6889; } .header .nav li .current{ color: #fff; background: #252947; } .header .nav li a:hover{ color: #fff; background: #252947; }; .header .jrwm_box{ float: left; } .header .jrwm{ padding-left: 48px; padding-top: 12px; }

.banner{ height:465px; background: url(images/banner.jpg) no-repeat center top; }

</style> </head> <body> <div class="header"> <div class="inner_c"> <div class="logo"><img src="images/logo.png" alt=""></div> <div class="nav"> <ul> <li><a href="" class="current">首页</a></li> <li><a href="">博雅游戏</a></li> <li><a href="">博雅新闻</a></li> <li><a href="">关于我们</a></li> <li><a href="">客服中心</a></li> <li class="l"><a href="">投资者关系</a></li> </ul> </div> <div class="jrwm"> <a href=""><img src="images/jrwm.png" alt=""></a> </div> </div> </div> </body> </html>

运行效果:

二、!important

important提高权重,权重无穷大

font-size:24px !important; 提高的是一个属性权重,不是选择器。 !important无法提升继承的权重,该是0还是0 <div> <p>哈哈哈哈哈哈</p> </div> div{color:red !important;} p{color:blue;} 由于div是通过继承来影响文字颜色的,所以无法提高权重。

important在建站中是不允许使用的,避免混乱,了解就好。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

App之可点击元素的设计

hi,这是系列文章:App之xxx的第3篇,前2篇我总结了 App之“文字”的设计技巧 App之底部导航栏的设计 直接点击可以查阅以上2篇文章。 我为什么写这个...

33870
来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

10720
来自专栏Material Design组件

一些iOS知识

35080
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

16960
来自专栏Material Design组件

Material Design — 底部动作条(Bottom Sheets)

31960
来自专栏施炯的IoT开发专栏

Windows Phone Developer Tools RTW 新特性-Panorama控件

    昨天实践了一下Pivot控件,今天就趁热打铁,继续来看看Windows Phone Developer Tools RTW 中加入的新特性-Panora...

20290
来自专栏IMWeb前端团队

移动端动画方案

前言 花样直播项目客服端的动画基本已都使用web来做,总结分享一下 方案列表 css3动画 canvas 动画 播图片 gif图片 各个方案的优缺点 css3动...

21090
来自专栏华章科技

为什么歪果仁的Excel表格这么漂亮?

兰色说:其实Excel漂亮并不意味着花梢,表格设计就是要突出和展示数据,达到这个目的,又能看上去很舒服。就是完美又好看的Excel表格。

8110
来自专栏欧阳大哥的轮子

iOS开源界面布局库终于破3000star

经过几年的打磨和多次的重构,我的iOS开源界面布局库MyLayout的star数量终于在2018年8月6号破3000了!有图为证:

23440
来自专栏数据小魔方

think-cell chart 系列1——堆积柱形图!

今天正式开始跟大家分享之前介绍过的图表插件——think-cell chart 。 要讲的第一个图表类型是其自带图表库中的第一个图表——堆积柱形图。 在正式开始...

75860

扫码关注云+社区

领取腾讯云代金券