JavaScript0323笔记

最新推荐文章于 2024-03-16 13:21:00 发布

Sect Arms灬逍

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量165

点赞数

<html>
<head>
<style>
a{color：#FFFF99,text-decoration：none；}a:hover{color:#FFFFFF; text-decoration:underline;}
#top{ padding: 10px 10px 0; font-size:12px; font-weight:bold;
margin: 1px 0 0 ;list-style:none;border-bottom:8px solid #DC4E1B; overflow:hidden;background-color:#33b5e5;`			}
.top_nav{ float:left;margin-right:1px;background-color:#333333;position:relative;width:80px;height:20px;text-align:center;line-height:20px;}
.top_nav span{position:absolute;visibility:hidden;}
.top_nav:hover span{
line-height:20px;background#DDDDDD;color:#666666;
display:block;width:80px;text-align:center;height:20px;
padding-top:2px;visibility:visible; top:0;left:0;color:#FFFFFF;background:#DC4E1B;}
</style>
</head>
<body>
<div id="top">
	
		<div class="top_nav"><a href="#">one</a><span>0</span></div>
		<div class="top_nav"><a href="#">one</a><span>0</span></div>
		<div class="top_nav"><a href="#">one</a><span>0</span></div>
		<div class="top_nav"><a href="#">one</a><span>0</span></div>
	
</div>
</body>
</html>

导航栏

<html>
<head>
<style>
a{color：#FFFF99,text-decoration：none；}a:hover{color:#FFFFFF; text-decoration:underline;}
.top-nav{ padding: 10px 10px 0; font-size:12px; font-weight:bold;
margin: 1px 0 0 0;list-style:none;border-bottom:8px solid #DC4E1B; overflow:hidden;background-color:#33b5e5;`			}
.top-nav li{ float:left;margin-right:1px;}
.top-nav li a {position:relative;z-index:0;line-height:20px; text-decoration:none;background:#DDDDDD;
color:#666666;display:block; width:80px;text-align:center;}
.top-nav li a span{position:absolute;visibility:hidden;}
.top-nav li a:hover span{line-height:20px;text-decoration:none;background#DDDDDD;color:#666666;
display:block;width:80px;text-align:center;
padding-top:2px;visibility:visible; top:0;left:0;color:#FFFFFF;background:#DC4E1B;}
</style>
</head>
<body>
<div id="top">
	<ul class="top-nav">
		<li><a href="#">2<span>0</span></a></li>
		<li><a href="#">3<span>0</span></a></li>
		<li><a href="#">4<span>0</span></a></li>
		<li><a href="#">5<span>0</span></a></li>
	</ul>
</div>
</body>
</html>

float:left;定义了元素向左或者向右浮动的设置

z-index:0;//定义一个元素在文档中的层叠顺序

width:80px;//定义元素的宽度

background:#DDDDDD;//简写属性，定义元素的背景特性（背景色background-color 不能设置多组）

color:#666666;//检索或设置对象的文本颜色。无默认值。

width:80px;//定义元素宽度，用长度定义宽度，不允许负值。

visibility:visible; //定义了元素是否可见，设置对象可视。

left:0;//定义了元素的左外边距边界与其包含块左边界之间的偏移

position:absolute;//用于指定一个元素在文档中的定位方式，对象脱离常规流，此时偏移属性参照的是离自身最近祖先元素，如果

没有定位的祖先元素则一直回溯body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

top:0;定义了元素的上外边距边界与其包含上边界之间的偏移用长度值来定义距离顶部的偏移量。

text-align:center;//定义元素内容的水平对齐方式，内容居中对齐

visibility:hidden;//定义了元素是否可见，设置对象隐藏

display:block;//设置或检索对象是否及如何显示。指定对象为块元素。

display:block;//设置或检索对象是否及如何显示，指定对象为块元素。

text-align:center;//定义元素内容的水平对齐方式，内容居中对齐

margin-right:1px;//为元素设置右方向的外边距。

text-decoration:none;//简写属性。定义元素文本装饰，指定文本装饰的种类。

line-height:20px; //定义元素中行框的最小高度

position:relative;对象遵循常规流，并且参照自身在常规流中的位置通过top、right、bottom、left这四个定位偏移属性进行偏移时

不会影响常规流中的任何元素其margin不与

z-index:0;//定义一个元素在文档中的层叠顺序

background:#DDDDDD;//简写属性，定义元素的背景特性（背景色background-color不能设置多组）

padding-top:2px;//简写属性，为元素设置下方向的内边距

Sect Arms灬逍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript0323笔记

<html><head><style>a{color：#FFFF99,text-decoration：none；}a:hover{color:#FFFFFF; text-decoration:underline;}#top{ padding: 10px 10px 0; font-size:12px; font-weight:bold;margin: ...
复制链接

扫一扫