导航制作

转载 2015年07月10日 13:00:04

<li style=" float:left;border:2px solid #8A0000;background-color:#ffffff;font-size:9pt;margin:0px;padding:0px 20px 0px 20px;">


<a style=color:#FCBDC6;text-decoration:none;">

<a style=" height:26px;   line-height:26px; ">

.nav_layout .nav ul li:hover ul{
display:block;
}
 .nav_layout .nav ul li:hover ul li{
    width:100px; 
    height:30px; 
}
 .nav_layout .nav ul li:hover ul li a{
display:block;
width:96px; 
    height:26px; 
    line-height:26px;
text-align:center;
}


简单图片缩放组件

<div class="sub">
<img src="assets/images/index_160.png">		
			<div data-widget-config="{
	          'trigger':'.sub',
	          'align':{
	                  'node':'.sub',
	                  'offset':[0,0],
	                  'points':['tr','tl']
	                  }
	            }" data-widget-type="Popup" class="J_TWidget hidden">
			    <div>
			       <img src="assets/images/index.png">
			    </div>
			</div>
</div>


<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<div class="edt" id="e_body">
	<div id="e_controls" class="bar">
	<div id="e_button" class="btn cl">
	<div class="b2r nbr nbl" id="e_adv_s2">
		<a id="e_bold" title="文字加粗">B</a>
		<a id="e_italic" title="文字斜体">I</a>
		<a id="e_underline" title="文字加下划线">U</a>
		<a id="e_forecolor" title="设置文字颜色">Color</a>
		<a id="e_backcolor" title="设置文字背景色">BgColor</a>
		<a id="e_url" title="添加链接">Url</a>
	</div>
	
	
	</div>
	</div>
</div>

editor.gif


/*style.css*/


.edt .bar a{
float:left;
border:1px solid #F2F2F2;
background:transparent url(image/editor/editor.gif) no-repeat 0 0;
}


.edt .b2r a{
width:20px;
height:20px;
/*文字对齐*/
text-indent:-9999px;
}
/*分割*/
#e_bold{background-position:0 0;}
#e_italic{background-position:-20px 0;}
#e_underline{background-position:-40px 0;}
#e_forecolor{background-position:-60px 0;}
#e_backcolor{background-position:-80px 0;}
#e_url{background-position:-40px -20px;}




【学习笔记+实践】简单的导航条菜单制作

1、用无序列表构建菜单; 2、垂直菜单转变为水平菜单:float:left; 3、在制作圆角菜单时,背景图片贴在标签上; 4、在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧:margin-top用...
  • u014745411
  • u014745411
  • 2015年01月24日 14:53
  • 642

Bootstrap 教程第二课:制作网站导航条

上一课介绍了用Bootstrap前端框架制作一个简易的主页,其中介绍了使用Bootstrap框架所需要的准备工作,以及文档格式要求,在这里及以后将不再复述,如有不明白的地方,可以查看上一节的内容(Bo...
  • kl28978113
  • kl28978113
  • 2016年06月20日 15:46
  • 2128

html5--导航栏制作

效果展示: 效果介绍: 通过鼠标点击,点到哪个导航栏会显示不同的颜色与其内容 如何实现:(前提必须引进自己的jquery.js我这里的是jq.js) #nav{ list...
  • haoyunyun888
  • haoyunyun888
  • 2016年07月26日 10:00
  • 5485

html里制作简单导航栏

今天简单的做了一下网页里的导航栏。 效果如下: 代码: 实验3 ul{/*设置导航栏的框框*/ margin: 30px auto;/*框框整体的位...
  • no2015214099
  • no2015214099
  • 2017年05月28日 17:55
  • 2556

Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单,很基础的东西。 思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单 本文结构: 1...
  • at_wangwei
  • at_wangwei
  • 2016年05月06日 13:09
  • 2880

[Axure]导航栏的制作:使用Axure制作面包屑导航栏

导航栏在网页设计中很常见,主要用于引导网站访问者浏览,也可以清晰地告诉搜索引擎网站内部目录所在。 面包屑导航栏就是类似于这样的导航栏: 主页 > 博客 > 移动专栏 > 发表博文 大致有...
  • wxg694175346
  • wxg694175346
  • 2013年01月31日 15:51
  • 6723

伪元素写导航栏分隔符

CSS制作立体导航 body{ background: #ebebeb; } .nav{ width:560px; height: 50px; fo...
  • cecilia_rabbit
  • cecilia_rabbit
  • 2016年08月03日 10:23
  • 781

使用html和css制作水平导航栏nav

使用html和css制作水平导航栏nav的方法及其效果: 1、li设置float:left; (1)代码片段:... *{ margin:0; ...
  • aSuncat
  • aSuncat
  • 2016年07月09日 13:48
  • 9074

【CSS3】---练习制作导航菜单

练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1、制作导航圆角 提示:使用border-radius实现圆角 2、制作导航立体风格 提示:使用box-shad...
  • xuan0107
  • xuan0107
  • 2015年06月04日 14:21
  • 486

unity小地图制作和方向导航

一:unity方向导航制作: 设计要求是方向导航随着鼠标旋转转换方向,效果图如下: 具体的实现方法主要有两个步骤,分别为UI设计和脚本编写。我的设计思路是这个控件分为两层,第一层为...
  • u010989951
  • u010989951
  • 2016年08月25日 17:24
  • 1158
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航制作
举报原因:
原因补充:

(最多只允许输入30个字)