如何用最简洁的css代码写一个导航栏

首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容。
注：标签主要是用于设置超链接。

<div><img src="logo.png"><a href="#">首页</a><a href="#">游戏中心</a><a href="#">游戏社区</a><a href="#">游戏动态</a>
</div>

这里是最初没有经过CSS 语句修饰的网页效果

现在通过CSS标签进行修饰

（1）首先，我们先给最外层的

标签进行设置，让导航栏的原始外框展示出来。

div {width: 1500px;height: 84px;background-color: #323235;}

(2)其次我们需要修改的就是标签的CSS属性：

a {width: 150px;height: 84px;color: #fff;font-size: 24px;/*文字水平居中*/text-align: center;/*设定行高等于盒子高度，垂直居中*/line-height: 84px;/*行内元素转换为块级元素*/display: inline-block;/*去除超链接文本的下划线*/text-decoration: none;}

标签中的后几个元素的设置也是导航栏的关键部分，同时给
标签也进行设置

img {width: 200px;height: 84px;margin-top: 10px;margin-left: 150px; float: left；}

此时简单的导航栏也出来了：

（3）最后，设置一个鼠标的点击效果就好了：

a:hover {color: yellow;
}

大学生it技术交流QQ群

如何用最简洁的css代码写一个导航栏相关推荐

使用CSS设计了一个导航栏（仿康盛创想）
在学了亚当几个实例教程后,所以想做一个导航栏,无意间打开了康盛创想网站,觉得这个导航栏不错,决定就做这个了,我的做法又以下几点: 1.先是看了看他的导航栏: 2.我喜欢在Fireworks中设计图片, ...
CSS代码写一个网页，有留言板
可以这样写 CSS 代码来创建一个留言板: /* 定义留言板的外观 */ .message-board {width: 500px;height: 400px;background-color: #f ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
php导航条css代码生成器,怎么使用css代码制作网站导航栏？（示例）
本篇文章主要给大家介绍关于如何用css做导航栏的相关知识,希望对有需要的朋友有所帮助.对于任何一个网站来说,导航栏的存在是至关重要的,那么如果仅仅只是用html做出枯燥乏味的导航菜单,效果肯定是不佳的 ...
用HTML和CSS写小米商城导航栏
一.顶部导航栏顶部导航的html文件 <div class="top-bar w"><ul><li> ...
[css] 手写一个满屏品字布局的方案
[css] 手写一个满屏品字布局的方案 <!DOCTYPE html> <html><head><meta name="viewport" ...
用HTML，css,boostrap写一个综合大型购物网站
用HTML,css,boostrap写一个综合大型购物网站首先来看看页面的效果: 有需要的可以参考首先是首页index: <!DOCTYPE html> <html>< ...
鸟和飞机都能飞行，使用代码写一个方法完成鸟的子类比如鹰，麻雀的飞行，还有飞机的飞行
需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行 /* 1:需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行提示:写一个 ...
HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）
文章目录效果图展示前言步骤 0.创建css文件 1.美化中间板块 1.1 html改变 1.2. css部分 1.3. placeholder美化 2.增加导航栏 2.1 html文件增加代码 ...

如何用最简洁的css代码写一个导航栏

如何用最简洁的css代码写一个导航栏

如何用最简洁的css代码写一个导航栏相关推荐

最新文章

热门文章