CSS第八课:利用display:block做纵向导航和水平设置热点新闻-

亲民网_亲近民生网罗天下事!文章导读:【CSS第八课:利用display:block做纵向导航和水平设置热点新闻-】来源:华信智原成都 一个网站,主导航的重要性不言而喻,美观、实用、交互、结构清晰都是要点。 前面我们已经跟随华信智智原学习了超链接a的基本样...

来源:华信智原成都      

一个网站,主导航的重要性不言而喻,美观、实用、交互、结构清晰都是要点。

前面我们已经跟随华信智智原学习了超链接a的基本样式,普通超链接的样式主要是鼠标经过的时候改变文字颜色和下划线。

而主导航的样式一般改变的是背景颜色或者背景图片。

这两年流行扁平化设计,几乎都是纯色为主了。

今天我们利用display:block这个关键的属性来完成导航的制作。

查看案例 下载案例

一、内联对象转换为块状对象

a标签是一个典型的内联对象,可以并排在一起,可以为a设置背景颜色,但是默认的背景颜色和文字的范围是一致的。内联对象设置宽高的属性值是无效的。

CSS

.list a{

color:#A00E39;

background-color:#FDD9E8;

text-decoration:none;}

如果此时把内联对象转换成块状对象,则可以设置宽高了。

也就是display这个属性,代表元素的显示方式。

display:inline(内联对象)转换成display:block(块状对象)。

CSS

.list a{

display:block;/把a设置为块状对象。/ width:100px;

height:40px;

line-height:40px;/*让文字纵向上居中对齐。*/

margin-bottom:10px;/*让a和a之间产生间隔。*/

color:#A00E39;

background-color:#FDD9E8;

text-decoration:none;}

此时的a变得和div一样,具有独占整个通栏的能力了,不能再并排。也可以设置宽高,文字默认在容器里是左上对齐的,利用line-height和height的值一样,可以让文字纵向居中对齐。

二、纵向导航

1、HTML结构

Markup

<div id="nav">

<ul>

<li><a href="#"><i class="fa fa-home"></i> 首页</a></li>

<li><a href="#" class="current"><i class="fa fa-code"></i> HTML教程</a></li>

<li><a href="#"><i class="fa fa-eye"></i> CSS教程</a></li>

<li><a href="#"><i class="fa fa-gear"></i> java教程</a></li>

<li><a href="#"><i class="fa fa-gears"></i> jQuery教程</a></li>

<li><a href="#"><i class="fa fa-edit"></i> 教学反思</a></li>

<li><a href="#"><i class="fa fa-star"></i> 学习笔记</a></li>

</ul>

</div>

在纵向导航上,利用font-awesome特殊字体实现了字体图标的插入。

如果不知道在导航栏的文字前如何插入小图标,可以查看这篇文章:

利用FontAwesome字体实现小图标的插入

2、主要CSS样式

CSS

#nav{

width:180px;

overflow:hidden;/*溢出隐藏*/}#nav a{

display:block;/*对a对象做宽高的前提是需要由内联对象(inline)转换成块状对象(block)。*/

color:#ddd;

padding:15px 25px;

background-color:#000;

}#nav a:hover,#nav a.current{

color:#fff;

background-color:#0BC1C1;

text-decoration:none;}

三、水平导航

纵向导航变水平导航的核心是为li设置浮动。

1、HTML结构

Markup

<div id="nav1" class="clearfix">

<ul>

<li><a href="#" class="current">HTML教程</a></li>

<li><a href="#">CSS教程</a></li>

<li><a href="#">java教程</a></li>

<li><a href="#">jQuery教程</a></li>

<li><a href="#">bootstrap框架</a></li>

<li><a href="#">node.js教程</a></li>

</ul>

</div>

2、主要CSS样式

CSS

#nav1{

width:780px;

padding-left:20px;

background-color:#000;

border-bottom:5px solid #0BC1C1;

}#nav1 li{

float:left;/*为li设置浮动是水平导航 的关键。*/

}#nav1 a{

display:block;/*变成block区块,否则没有宽高,不能把范围撑开。*/

color:#ddd;

padding:12px 15px;

}#nav1 a:hover,#nav1 a.current{

color:#fff;

background-color:#0BC1C1;

text-decoration:none;}

导航中还有一种下拉菜单,因为涉及到相对和绝对布局

责任编辑:

美文热点

本文【CSS第八课:利用display:block做纵向导航和水平设置热点新闻-】由亲民网_亲近民生网罗天下事!的小美整编收集于网络不代表本站观点,如果您还想了解更多关于亲民网_亲近民生网罗天下事!相关的文章,请点击查看其它文章,请关注亲民网_亲近民生网罗天下事!,http://www.qinminwang.com/keji/2276.html.

相关推荐
新闻聚焦
猜你喜欢
热门推荐
  • 打入VR专业领域 英伟达更新VR Ready计划

      美国太平洋时间4月4日-7日,英伟达(Nvidia)将举办GTC大会(GPUTechnologyConference)。不过,在大会开幕之前,英伟达通过一篇......

    04-05    来源:新浪新闻

    分享
  • 郭明池:今年iPhone出货量很可能降至2亿部

      iPhone 6 三种外观颜色 凤凰科技讯 北京时间4 月 5 日消息,据科技博客AppleInsider 报道,凯基证券分析师郭明池 (Ming-Chi Kuo) 发布......

    04-05    来源:凤凰科技

    分享
  • 网红边玩边挣钱 将催生新商业模式

      2015年中国网红排行榜 网红,就是网络红人的简称。网红不仅仅是当下最热词汇,它还是一个时代。在这个时代里,有网红模......

    04-05    来源:京华时报

    分享
  • 谷歌车载系统Android Auto登陆印度等18个新

      谷歌 Android Auto 车载系统 凤凰科技讯 北京时间 4 月5 日消息,据科技博客 TheVerge 报道,谷歌已经将可访问其车载系统Android......

    04-05    来源:凤凰科技

    分享
  • 新iPad Pro拆解:内部大改 榨干每一寸空间

      iPad Pro 9.7的内部空间设计非常紧凑 凤凰科技讯 北京时间4月5日消息,据科技网站AppleInsider报道,众所周知,iPad Pro 9.7的大多......

    04-05    来源:凤凰科技

    分享
  • 360手机f4将于4月9日开启线下首销

      凤凰科技讯 4月5日消息,360手机f4将于4月9日开启线下首销。同时,360手机f4高配版将于4月7日线上开售。 祝芳浩表示,360手机......

    04-05    来源:凤凰科技

    分享
  • 无人驾驶车离我们有多远 百度提出5年内

      车辆自动判断路况 无人驾驶车何时才能驶入百姓生活? 3月30日,百度高级副总裁、百度自动驾驶事业部总经理王劲提出了一......

    04-05    来源:中国青年报·中青在线

    分享
  • Facebook新福利 盲人也能看照片

      新浪美股讯北京时间5日下午美联社称,Facebook计划通过人工智能程序进行改造,使盲人及视力障碍者可以像其他用户......

    04-05    来源:新浪新闻

    分享
  • 赶潮流有风险:Nest关闭Revolv智能家居中心

      谷歌旗下Nest宣布将在五月关闭所有Revolv智能家居中心的支持系统,消息让已经为Revolv买单的顾客一脸懵逼。下月中,......

    04-05    来源:新浪新闻

    分享
  • 华为超越联想的秘密武器:敢与苹果三星

      华为 在成立八年后的1992年,联想完成了销售业绩的三级跳,达到17.67亿元,成为当时的明星企业,而彼时,华为的销售额才......

    04-05    来源:一财网

    分享
返回列表
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。