用html和css制作一个简单的导航条

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>导航条</title><meta name="viewport" content="width=device-width, initial-scale=1"><style <style type="text/css">*{padding:0;margin:0;}.shape{margin:20px auto;width:1000px;height:40px;background-color:#6495ED;list-style:none;}.shape li{width:25%;text-align:center;padding-top:8px;padding-bottom:8px;float:left;}.shape li a{font-size:18px;display:block;width:100%;text-decoration:none;color:white;font-weight:bold;}.shape li:hover{background-color:#c00;}</style></head><body><ul class="shape"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li>         <li><a href="#">关于</a></li></ul></body>
</html>

效果图:

鼠标移入效果：

用html和css制作一个简单的导航条相关推荐

【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
使用HTML+CSS制作一个简单的网页
简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条.分页栏.悬浮列表等内容. 网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
HTML+css制作一个简单八卦阵
html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
用HTML和CSS制作一个简单的爱心
效果图如下: index.html代码如下: <!DOCTYPE html> <html lang="en"> <head><meta c ...
CSS3制作一个简单的进度条
这里只是一个小demo,一个用CSS3写的进度条. 如图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...
vue制作一个简单的导航栏
1:HTML <ul><li v-for="(item,index) of itemList" :class="current===index ? 'a ...

用html和css制作一个简单的导航条

用html和css制作一个简单的导航条相关推荐

最新文章

热门文章