前端学习day2---导航栏、颜色

最新推荐文章于 2024-10-17 18:27:08 发布

惊呆了老铁

最新推荐文章于 2024-10-17 18:27:08 发布

阅读量1k

点赞数 10

文章标签：前端学习 css

本文链接：https://blog.csdn.net/2201_75994908/article/details/142255436

版权

垂直导航栏

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

这是垂直的导航栏；效果如下图：

删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

效果：

加上下面这段代码：

display:block 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度.

效果：

text-decoration:none 可以去除链接的下划线；

a:hover{background-color:颜色}可以设置鼠标悬停在某一项背景颜色改变的效果

全屏固定导航栏：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。这两种方法都很好，但如果你想链接到具有相同的大小，必须使用浮动的方法。

内联：

<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline;
}
</style>

浮动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

效果显示：

overflow:hidden overflow 属性用于控制内容溢出元素框时显示的方式

float:会使元素向左或向右移动，其周围的元素也会重新排列。`float:left;`在导航栏里的作用：如果屏幕/窗口足够容下导航栏的每一项，将从左往右依次排列；否则会将溢出的继续在第二行从左往右排列；从而把垂直的导航栏变为水平的从左往右依次排列的水平导航栏。

颜色

直接用英文颜色名称表示（不区分大小写）
HEX值（不区分大小写）：#和十六进制数组成,表示形式为#RRGGBB,R表示红色，G表示绿色，B表示蓝色，值介于00~FF之间，用于指定颜色的强度。比如：#0000FF表示蓝色（blue），#000000表示黑色，#FFFFFF表示白色，#FF0000表示红色（简写#F00）
RGB值：书写格式为rgb(0,0,0)，括号里的数值范围为0~255，同样表示三种颜色的强度。另外，为RGB值添加alpha值就可以定义透明度了，方法为rgba(0,0,0,x)第四个值的范围为0.0~1.0，0.0是最小值表示完全透明，1.0是最大值表示不透明。
HSL值：三个数值分别表示色调、饱和度和亮度。表示方法为：hsl(x,y%,z%)
- 色调：是色轮的度数，值的范围是0~360，0表示红色，120表示绿色，240表示蓝色。
- 饱和度：表示色彩的纯度。饱和度越高，色彩越纯，100%是纯色，没有灰色阴影，0%是完全灰色，无法看到颜色。
- 亮度：值越高越亮，越接近白色；值越小越暗，越接近黑色。0%是黑色，100%是白色。
关键字：transparent和currentColor(CSS3之后)

transparent :表示全透明黑色，类似于rgba(0,0,0,0)这样的值
currentColor:***