• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >div/css > DIV CSS制作的个性水平导航菜单实例

DIV CSS制作的个性水平导航菜单实例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含div css实例教程,div css布局实例,div css网页实例,div css实例,div css网页布局实例等相关知识,佚名 希望在学习及工作中可以帮助到您

先看下效果:
DIV CSS制作的个性水平导航菜单实例_weikejianghu.com整理

CSS样式代码:

以下为引用的内容:
#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}
#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 10px;
font: 12px 宋体;
background-color: black;
background: black url(../images/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}
* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}
#pointermenu ul li{
display: inline;
}
#pointermenu ul li a{
float: left;
color: white;
font-weight: ;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(../images/bbbbb.gif) bottom center no-repeat;
}
#pointermenu ul li a:visited{
color: white;
}
#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}
#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 8px;
background: url(../images/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}

HTML完整
以下为引用的内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312">
<head>
<title>站酷CSS代码演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" _fcksavedurl=""css/css.css"" _fcksavedurl=""css/css.css"" />
</head>
<body>
<div id="pointermenu">
<ul>
<li><a href="#">主 页</a></li>
<li><a href="#">自定菜单</a></li>
<li><a href="#" id="selected">自定菜单</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="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
最后提供打包下载:http://www.weikejianghu.com/files/soft/jb51nav1107.rar </div>

您可能想查找下面的文章:

  • CSS在固定宽高的div内实现垂直居中的实例详解
  • Div和CSS编写中对包含选择器和通配选择器的使用
  • 使用单div实现CSS 绘图方法汇总
  • div和css制作斜线示例分享
  • 纯css实现让div的四个角成弧形
  • css教程实现div背景色渐变色代码分享
  • css实现随鼠标移动div渐变色效果
  • 通过绝对定位实现div重叠实例代码
  • 旋转任意角度 如何让div旋转一定的角度
  • div css 滚动条样式 DIV滚动条属性及样式设置方式

相关文章

  • 2017-06-02纯CSS实现多级半透明效果菜单代码
  • 2017-06-02DIV实现简易漂浮层放置分页信息思路分享
  • 2017-06-02以HTML为基础学习DIV CSS
  • 2017-06-02CSS教程:div设置float后高度不自动增加
  • 2017-06-02关于学习DIV CSS的一些精妙问答
  • 2017-06-02不定宽高div内图片垂直居中的css样式
  • 2017-06-02CSS三栏布局探讨——中间固定宽度两边自适应宽度
  • 2017-06-02Div+Css实现屏蔽效果
  • 2017-08-31EasyUI入门7 datagrid根据列值设置checkbox的绑定状态
  • 2017-06-02div+css实现蓝色vista风格css导航菜单效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 10个DIV+CSS需要注意的问题
    • 一行文字超过div宽度的时如何让它不换行
    • .clearfix:after(清除浮动)中各个属性及值详细解说
    • 以HTML为基础学习DIV CSS
    • DIV设置 float以后使下一个DIV另起一行的方法
    • CSS实现菜单背景自适应宽度的方法
    • CSS网页实例 利用box-sizing实现div仿框架结构实现代码
    • css实现随鼠标移动div渐变色效果
    • 解析width:100%;与width:auto;的区别
    • div css图文混排列表设计中的基础问题总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有