3-19 课堂笔记

最新推荐文章于 2024-07-10 21:46:36 发布

王佳仪

最新推荐文章于 2024-07-10 21:46:36 发布

阅读量84

点赞数

导航栏实现两种方法
方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a{color: #FFFF99;text-decoration: none;}
        a:hover{color:red;text-decoration: underline}
        .top-nav{padding: 10px 10px 0;font-size: 12px;wight: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;
            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}
    </style>
</head>
<body>
 
<li><a href="#">课程中心</a><span></span> </li>
<li><a href="#">学习中心</a><span></span> </li>
<li><a href="#">关于我们</a><span></span> </li>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:hover{color:red;text-decoration: underline}
        #top{padding: 10px 10px 0;font-size: 12px;font-wight:bold;
        margin: 1px 0 0 0;list-style: none;border-bottom:8px solid#DC4E1B;overflow: hidden ;background-color:#33b5e5 ;}
        #top nav{float: left;margin-right: 1px;
            line-height: 20px;text-decoration: none;background: #DDDDDD;color: #666666;display: block;
            width: 80px;text-align: center}
    </style>
</head>
<body>
<div class="top">
<div class="top nav" ><a href="#">课程中心</a></div>
    <div class="top nav" ><a href="#">学习中心</a></div>
        <div class="top nav" ><a href="#">关于我们</a></div>
</div>
</body>
</html>

css
级联样式表(Cascading Style Sheet)简称"CSS"，通常又称为"风格样式表(Style Sheet)"，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

王佳仪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-19 课堂笔记

导航栏实现两种方法方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{color: #FFFF99;tex...
复制链接

扫一扫