前端作业

最新推荐文章于 2024-03-23 20:06:06 发布

细看猥琐猴

最新推荐文章于 2024-03-23 20:06:06 发布

阅读量319

点赞数

分类专栏：作业

作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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>1</span></div>
		<div class="top_nav"><a href="#">one</a><span>1</span></div>
		<div class="top_nav"><a href="#">one</a><span>1</span></div>
		<div class="top_nav"><a href="#">one</a><span>1</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>1</span></a></li>
		<li><a href="#">3<span>2</span></a></li>
		<li><a href="#">4<span>3</span></a></li>
		<li><a href="#">5<span>4</span></a></li>
	</ul>
</div>
</body>
</html>

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

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

position:relative;对象遵循常规流，并且参照自身在常规流中的位置通过top、right、bottom、left这四个定位偏移属性进行偏移时不会影响常规流中的任何元素其margin不与其他任何margin折叠。

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

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

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

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

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

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

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

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

position:absolute;//用于指定一个元素在文档中的定位方式，对象脱离常规流，此时偏移属性参照的是离自身最近祖先元素，如果没有定位的祖先元素则一直回溯body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

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

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

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

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

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

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

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

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

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

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

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

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

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

background:#DC4E1B;//简写属性。定于元素的背景特性（背景色background-color不能设置多组）
指定背景颜色。

细看猥琐猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端作业

<div class="top_nav"><a href="#">one</a><span>1</span></div> <div class="top_nav"><a href="#">one</a><span>1</span></div&gt...
复制链接

扫一扫