第二次学习心得0.0

最新推荐文章于 2024-03-03 19:46:11 发布

ZSYTYY

最新推荐文章于 2024-03-03 19:46:11 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/ZSYTYY/article/details/88768582

版权

homework：列举css导航栏两种方法
1.

<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>

2.<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>
注释：text-align:center;//定义元素内容的水平对齐方式，内容居中对齐
     

  position:absolute;//用于指定一个元素在文档中的定位方式，对象脱离常规流，此时偏移属性参照的是离自身最近祖先元素，如果没有定位的祖先元素则一直回溯body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
      background:#DDDDDD;//简写属性，定义元素的背景特性（背景色background-color 不能设置多组）
      color:#666666;//检索或设置对象的文本颜色。无默认值。
      padding-top:2px;//简写属性，为元素设置下方向的内边距
      visibility:visible; //定义了元素是否可见，设置对象可视。
      top:0;定义了元素的上外边距边界与其包含上边界之间的偏移用长度值来定义距离顶部的偏移量。
      text-decoration:none;//简写属性。定义元素文本装饰。指定文本装饰的种类
      left:0;//定义了元素的左外边距边界与其包含块左边界之间的偏移
      color:#FFFFFF;//检索或设置对象的文本颜色。无默认值
      margin-right:1px;//为元素设置右方向的外边距。
      position:relative;对象遵循常规流，并且参照自身在常规流中的位置通过top、right、bottom、left这四个定位偏移属性进行偏移时不会影响常规流中的任何元素其margin不与其他任何margin折叠。
      z-index:0;//定义一个元素在文档中的层叠顺序。
      over0.0

ZSYTYY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二次学习心得0.0

homework：列举css导航栏两种方法1. 21 32 43 54 2. one1 one1 one1 one1注释：text-align:center;//定义元素内容的水平对齐方式，内容居中对齐 position:absolute;//用于指定一个元素在文档中的定位方式，对象脱离常规流，此时偏移...
复制链接

扫一扫