html里制作简单导航栏

今天简单的做了一下网页里的导航栏。

效果如下：

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>实验3</title><style type="text/css">ul{/*设置导航栏的框框*/margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/width: 600px;/*框框的宽度*/height: 350px;/*框框的长度*/padding: 0px;/*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/border:1px solid #000;/*添加边框*/}li{list-style-type: none;/* 去掉li前的点 */float: left;/*将li设置成做浮动，变为联动*/}a{display: block;/*将a变成块状*/width: 100px;/*设置块的宽度*/height: 50px;/*设置块的长度*/font-family: Microsoft Yahei;line-height: 50px;/*设置字体在块中的高度*/background-color: #2f4f4f;margin: 0px 0px;/*块里的高宽通过margin设置*/color: #fff;text-align: center;/*字体居中*/text-decoration: none;/*去掉下划线*/font-size: 15px;}a:hover{background-color: #2f6f4f;}</style>
</head>
<body><div ><ul class=daohang><li><a href="">首页</a></li><li><a href="">课程章节</a></li><li><a href="">课程实验</a></li><li><a href="">教师团队</a></li><li><a href="">教学资源</a></li><li><a href="">参考教材</a></li></ul></div></table>
</body>
</html>

html里制作简单导航栏相关推荐

使用php制作导航栏,如何制作简单导航栏
如何制作简单导航栏导语:一个网页必不可少的元素之一,导航,虽然各种创新已经逐渐把导航栏的"栏"给去掉了,以非栏架的`形式制作出导航.所以,导航是一个网页友好的入口,要学习网页制作 ...
Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fra ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
利用3D效果制作立体导航栏
利用3D效果制作立体导航栏文章目录使用3D效果制作3D导航栏一.3D的旋转以及位移二.使用步骤 1.搭建html骨架 2.添加css样式前言利用3D效果制作导航栏: 制作一个好玩的3D导航 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
Androidstudio的制作微信导航栏的微信素材库
Androidstudio的制作微信导航栏的微信素材库(全部都是矢量绘图),大家可以去下载本次是一个资源分享,当你第一次看相关的导航栏的制作时可能会去模仿制作一个微信导航栏,用现成的矢量 ...
CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
购物网站制作——顶部导航栏（index.html)
1. 快捷导航shortcut制作 1.1 如何分块分析如下 1.2 如何添加"| "分隔符 1.3 如何添加小箭头字体图标下载地址: IcoMoon App - Icon F ...
HTML5+CSS3制作底部导航栏
目录前言一.底部导航栏示例图二.HTML框架 1.一号盒子 2.二号盒子总结前言在日常的网上冲浪中,我们常常在网页最底部,看到一大堆链接,非常整齐,一目了然,那么是如何实现的 ...
【IDEA设置字体失败解决方法】IntelliJ IDEA下载主题后设置字体失败，不能成功应用，原因：需要在配色方案里修改该主题的字体，而不是Editor-＞Font里修改+设置导航栏，菜单字体大小
设置本地代码字体大小,行距方法 File->Setting Editor->Font 此处我们在修改下载的外部主题字体时,发现修改没有应用成功失败原因,需要在当前配色方案下修改,因为是自 ...

html里制作简单导航栏

html里制作简单导航栏相关推荐

最新文章

热门文章