如何运用html和css制作一个简单的网页导航

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.nav{/* 设置高和宽 */height: 90px;width: 530px;/* 背景颜色 */background-color: #909090;/* 左右自动居中 */margin-left: auto;margin-right: auto;/* 行内元素-行内块元素-文本居中 */text-align: center;}.nav a{/* 转换为块元素，为了设置宽高 */display: inline-block;/* 高 */width: 105px;/* 行高90 让文本垂直在90居中 */line-height: 90px;/* 文字大小，粗细 */font-size: 24px;font-weight: 800;/* 不要装饰线 */text-decoration: none;/* 白色 */color: white;/* 默认设置左边两像素和背景一致的边框 */border-left:1px solid #909090 ;}.nav a:hover{/* 鼠标放上去改变背景和边框颜色 */background-color: red;border-left-color:white ;}</style></head><body><div class="nav"><a href="">首页</a><a href="">活动</a><a href="">帮助</a><a href="">招聘</a></div></body>
</html>

效果示例：

如何做一个简单的网页导航相关推荐

做一个简单的二级导航
如何做一个简单的二级导航现在html的部分就写完了,下面我们通过css来实现二级导航. 先为li标签设置list-style:none;去掉前面的点,为a标签设置text-decoration:no ...
如何做一个简单的网页版地图
前言以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜 ...
html网页设计简单吗,如何做一个简单的网页设计
很多网页设计初学者都说,国外的网页设计很简单,但是又很容易吸引用户,这里面有什么诀窍吗?做一个网页如何做到界面简洁,内容简单又能打动用户,粘贴住他们.本文素马将讲解简单容易出效果的网页设计技巧,附上精 ...
学习HTML（九）——做一个简单的网页
通过前面八章的介绍,现在你就可以通过添加图片.设置列表.添加字体.背景颜色等标签,做一个很简单的静态网页了.下面的例子就是我在CodeAcademy中的作业. <!DOCTYPE html&g ...
html+css——做一个简单的底部导航栏
ps:小项目由html和css实现目录项目设计效果图设计 html部分 css部分源代码项目设计效果图话不多说,先直接上一下完成后的效果图: 通过以上效果图可以大致想一下你的思路,以及 ...
做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
java如何做网页_java怎么做一个简单网页？网页包括什么？
学了java程序之后,大家就可以将这些运用到生活中去,比如做一个简单的网页.正好也可以检测自己学了怎么样,那么接下来,我们就来给大家讲解一下这方面的内容. 用Java语言编写实现一个简单的WEB浏览器 ...
Java怎么做一个简单网页呢？
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
如何做一个简单好玩的音乐网页
如何做一个简单好玩的音乐网页作者:朝思下面我们开始用所学的的知识,开始做一个简单而方便的音乐页面,未使用插件一共分为两部分: 一:播放部分二:钢琴部分由上图可见,左上角的为播放部分,可以实现 ...

如何做一个简单的网页导航

如何运用html和css制作一个简单的网页导航

代码示例：

效果示例：

如何做一个简单的网页导航相关推荐

最新文章

热门文章