DIV + CSS 样式 滑动门经典案例 跟大家分享

最新推荐文章于 2021-08-03 20:15:31 发布
最新推荐文章于 2021-08-03 20:15:31 发布
阅读量156 收藏
点赞数
分类专栏： Web前端 文章标签： CSS XHTML HTML
//css 样式源码 


/*全局样式*/
*{
	font-size:12px;
}
body{
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	font-size:12px;
	color:#666666;
	font-family: "宋体",Arial, Helvetica, sans-serif;
}


/*主导航菜单*/
#menu ul{
	padding:0;
	border:0;
	list-style:none;
	line-height:150%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 15px;
}
#menu_out{
	width:966px;
	padding-left:4px;
	margin-left:auto;
	margin-right:auto;
	background:url(Myskin/menu_left.gif) no-repeat left top;
}
#menu_in{
	background:url(Myskin/menu_right.gif) no-repeat right top;
	padding-right:4px;
}
#menu{
	background:url(Myskin/menu_bg.gif) repeat-x;
	height:73px;
}
.menu_line{
	background:url(Myskin/menu_line.gif) no-repeat center top;
	width:8px;
}
.menu_line2{
	background:url(Myskin/menu_line2.gif) no-repeat center top;
	width:15px;
}
#nav{
	padding-left:20px;
}
#nav li{
	float:left;
	height:35px;
}
#nav li a{
	float:left;
	display:block;
	padding-left:6px;
	height:35px;
	background:url(Myskin/menu_on_left.gif) no-repeat left top;
	cursor:pointer;
	text-decoration:none;
}
#nav li a span{
	float:left;
	padding:11px 14px 10px 10px;
	line-height:14px;
	background:url(Myskin/menu_on_right.gif) no-repeat right top;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
}
#nav li .nav_on{   /*鼠标经过时变换背景，方便JS获取样式*/
	background-position:left 100%;
}
#nav li .nav_on span{  /*鼠标经过时变换背景，方便JS获取样式*/
	background-position:right 100%;
	color:#333333;
	text-decoration:none;
	padding:14px 14px 7px 10px;
}
/*子栏目*/
#menu_con{
	text-align:left;
	padding-left:20px;
	clear:both;
}
#menu_con li{
	float:left;
	height:22px;
	margin-top:8px;
}
#menu_con li a{
	display:block;
	float:left;
	background:url(Myskin/menu_on_left2.gif) no-repeat left top;
	cursor:pointer;
	padding-left:3px;
}
#menu_con li a span{
	float:left;
	padding:6px 10px 4px 10px;
	line-height:12px;
	background:url(Myskin/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
	text-decoration:none;
	background:url(Myskin/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
	background:url(Myskin/menu_on_right2.gif) no-repeat right bottom;
}



// 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="zh-CN">
<head>
<title>漂亮滑动门</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#a {
	width: 970px;
	font-size: 14px;
	text-align: center;
	color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body>

<br />
<br />


<script language="javascript">
	function qiehuan(num){
		for(var id = 0;id<=9;id++)
		{
			if(id==num)
			{
				document.getElementById("qh_con"+id).style.display="block";
				document.getElementById("mynav"+id).className="nav_on";
			}
			else
			{
				document.getElementById("qh_con"+id).style.display="none";
				document.getElementById("mynav"+id).className="";
			}
		}
	}
</script> 
<div id=menu_out>
<div id=menu_in>
<div id=menu>
<UL id=nav>
<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI>

<LI class="menu_line"></LI><li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>AAA</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>AAA</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>BBB</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>CCCC</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>DDDD</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>EEE</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>FFF</span></a></li><li class="menu_line"></li> 
<LI><A class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8) href="#"><SPAN>GGG</SPAN></A></LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9) href="#" target=_blank><SPAN>HHH</SPAN></A></LI>
<LI class=menu_line></LI>
</UL>
<div id=menu_con><div id=qh_con0 style="DISPLAY: block">
<UL>
  <LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI>
  <LI class=menu_line2></LI><LI><A href="#"><SPAN>test</SPAN></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>test1</SPAN></A></LI></UL></div> 
<div id=qh_con1 style="DISPLAY: none">
<UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>aaaaaaaaaaaaaaaaaaa</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con2 style="DISPLAY: none">
<UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>bbbbbbbbbbbbbbbbbb</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con3 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ccccccccccccccccccc</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con4 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ddddddddddddddddddd</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con5 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>eeeeeeeeeeeeeeee</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con6 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>fffffffffffffffffff</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con7 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>gggggggggggggggg</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con8 style="DISPLAY: none">
<UL><LI>##############################</LI></UL></div>
<div id=qh_con9 style="DISPLAY: none">
<UL><LI>###############################</LI></UL></div> </div></div></div></div> 

<br /><br />
</body>
</html>




完整的还需要图片。下面的下载提供完整的案例，下载运行即可

如果觉得好，给个评价。谢谢
ygl_09
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css定位，滑动门
weixin_73310187的博客
09-19 319
为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。最常见于各种导航栏的滑动门。
2020-11-07 css实例：滑动门实例及样式解释
Amanda&Rachel的博客
11-07 319
滑动门长啥样 像我们经常浏览的网站，京东，淘宝等，首页都会有一个购买引导的分类栏目，鼠标移动到某一个关键词时，右侧会展示一个更详细的分类导航，如上图。 css实例 滑动门 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*reset样式*/ *{ margin: 0;
css滑动门技术小实例
Zero_ying的博客
07-10 254
通过css sprites(图片整合)中的滑动门技术实行鼠标点击时背景能够发生改变，效果如图（PS：因为找不到素材就自己用qq表情拼接的，我自己也知道不太好看）： 图片按顺序分别是鼠标没有点击；鼠标点击首页；鼠标点击新闻；鼠标点击娱乐；鼠标点击体育以及页面用到的原始背景图片。 代码如下： <!doctype html> <html> <head> &...
CSS 滑动门案例
a804847944的博客
07-22 225
一、什么是滑动门特效　　 　　为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 二、核心技术 　　核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。 　　核心代码：...
CSS滑动门(微信案例)
weixin_30342827的博客
04-13 293
如下图所示,每个导航栏目的文字个数不一样多，有的长，有的短,如何用一张背景图片，适应不同字数”的导航条,“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠的部分的宽度会根据里面的文字的字数而自动调整，就像两扇推拉门一样，因此这种技术就叫做“滑动门”...
DIV+CSS 滑动门技术的简单例子
10-31
在这个例子中，我们将详细解析如何使用DIV+CSS实现滑动门效果。 首先，我们来看CSS样式部分。这里定义了几个关键的类和ID： 1. `#zishu li`: 这个选择器应用于`<ul>`下的所有`<li>`元素，设置它们为浮动元素，并...
DIV+CSS实现的滑动门菜单特效代码
10-30
带椭圆的滑动门效果代码，是竖排的效果代码，看代码是个很典型的实现效果，推荐大家学习
DIV+CSS简单登录界面模板
06-06
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的`Div`（Division，分块）元素并应用相应的`CSS`（Cascading Style Sheets，层叠样式表）样式来构建页面结构和外观。标题提到的“DIV+CSS简单...
div+css实战案例html整站模板下载
04-02
在Web开发领域，`div+css`是一种常见的布局方式，它将内容（div）与样式（css）分离，使网页设计更为灵活和可维护。下面我们将深入探讨这些知识点。 1. **div**：`div`是HTML中的一个块级元素，全称为“division”...
div+css实现的滑动门,简洁,新手上路 (小鸽子系列)
10-30
div+css实现的滑动门,简洁,新手上路 (小鸽子系列)
一个经典的CSS滑动门学习实例
08-08
这里有学习CSS滑动门技术的图片包，直接下载回去，照着给你的教程地址，边看边实践，相信很快就会学会了。
漂亮的伸缩滑动门！简单但是很好看！动画效果
04-03
漂亮的伸缩滑动门！简单但是很好看！动画效果。很漂亮，跟flash差不多！
css滑动门技术的应用,css 滑动门技术的介绍及实例分享
weixin_33826994的博客
08-03 442
css 滑动门技术的介绍及实例分享发布时间：2009-10-15 12:48:01 作者：佚名 我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师和开发人员更大的空间去发挥;"如果你是一个css高手的话,那你就来详细介绍一下css滑动门技术".看了这句话不得...
CSS滑动门特性
snowstorm的博客
04-05 1329
原文链接：http://www.cnblogs.com/amboyna/archive/2009/02/03/1383000.html    看了css,原来以为没啥技术含量，狂背就成了，现在才发现，背是不行地……最起码光背是不行地，看到这个被css设计师们称为“滑动门”的设计，……，有点意思。       需求是有不同长度的按钮，却要求同一种背景……要是图片缩放的话，圆角是
利用滑动门原理制作圆角和渐变色按钮【css】
Wendy
11-18 1654
在说明方法之前，先看一下效果图：       在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。        要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽度自适应
css html应用实例1：滑动门技术的简单实现
weixin_39037804的博客
10-25 747
关于滑动门，现在的页面中好多地方都会用到滑动门，一般用作于导航背景，它的官方解释如下： 滑动门：根据文本自适应大小，根据背景的层叠性制作，并允许他们在彼此之上进行滑动，以创造出一些特殊的效果。 为什么...
CSS"滑动门"技术
海角的专栏
01-05 9602
网站的导航条对网站来说举足轻重，导航条的风格各式各样，纯文本的导航栏比起图像导航栏更具有适用性和快速载入的特点，但在硬件和软件飞速进步以及个性彰显的今天，普通简单的导航条已经显得捉襟见肘了，这样的导航设计，也是没有什么意义的！在CSS中，一个称之为“滑动门”技术被广泛采用到导航条设计中，它的特点在于： 1 实用性，能够根据导航条菜单文本长度自动调节宽度； 2 简洁性，它可以用简单背景小图来
css样式滑动门样式实现
weixin_43854764的博客
05-17 831
话不多说，上代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值