纯css简单导航栏的制作及问题
导航栏的总体制作
效果演示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: aliceblue;
}
.demu>ul>li {
float: left;
}
nav {
position: relative;
background-color: hsl(240, 67%, 53%);
width: 100%;
height: 40px;
/* text-align: center; */
}
nav>ul {
width: 900px;
/* display: inline-block; */
height: 40px;
margin: auto;
}
.demu ul li a {
width: 160px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 40px;
background-color: hsl(240, 67%, 53%);
transition: all 2s;
}
.demu ul li a:hover {
background-color: rgb(26, 102, 196);
}
.demu ul li:hover .suplist {
display: block;
}
.suplist {
position: absolute;
width: 160px;
display: none;
opacity: .9;
}
.box {
clear: both;
}
/* 此box为导航栏下方的div可用作测试，代码效果为清除浮动（float） */
.line {
height: 40px;
width: 1px;
opacity: .6;
}
.one {
background-image: linear-gradient(transparent, #031733, transparent);
}
.two {
background-image: linear-gradient(transparent, #afc4e8, transparent);
}
style>
head>
<body>
<nav class="demu">
<ul>
<li><a href="">首页a>li>
<li class="line one">li>
<li class="line two">li>
<li><a href="">其他部分a>
<ul class="suplist">
<li><a href="">下拉列表1a>li>
<li><a href="">下拉列表2a>li>
<li><a href="">下拉列表3a>li>
ul>
li>
<li class="line one">li>
<li class="line two">li>
<li><a href="">公司简介a>
<ul class="suplist">
<li><a href="">内容自改a>li>
<li><a href="">下拉列表02a>li>
<li><a href="">下拉列表03a>li>
ul>
li>
<li class="line one">li>
<li class="line two">li>
<li><a href="">摸鱼睡觉a>
<ul class="suplist">
<li><a href="">下拉列表01a>li>
<li><a href="">下拉列表02a>li>
<li><a href="">下拉列表03a>li>
ul>
li>
<li class="line one">li>
<li class="line two">li>
<li><a href="">导航栏a>
<ul class="suplist">
<li><a href="">下拉列表01a>li>
<li><a href="">下拉列表02a>li>
<li><a href="">下拉列表03a>li>
ul>
li>
ul>
nav>
body>
html>
知识点小结
1. float 需要将li左浮动让所有导航栏在同一排
.demu>ul>li {
float: left;
}
代码出自上方导航栏
效果演示：
未浮动
浮动后
2.a标签的css reset
a {
text-decoration: none;
color: aliceblue;
/* 设置颜色为白色以及去除下划线*/
}
效果
3.下拉列表的隐藏以及位置固定
.demu ul li:hover .suplist {
display: block;
}
/* demu为nav的类选择器在小编代码中两者为一个可以直接替换*/
.suplist {
position: absolute;
/* 定位 */
width: 160px;
display: none;
opacity: .9;
}
4.渐变颜色的产生以及延时动画
/* 颜色渐变*/
.one {
background-image: linear-gradient(transparent, #031733, transparent);
}
.two {
background-image: linear-gradient(transparent, #afc4e8, transparent);
}
/* 延时动画*/
div{
width: 40px;
height: 40px;
background-color: aqua;
transition: all 3s;
}
div:hover{
width: 50px;
height: 50px;
background-color: aquamarine;
}
效果展示
5.导航栏不随页面的放缩移动，但始终处于屏幕中间位置
nav>ul {
width: 900px;
/* display: inline-block; */
height: 40px;
margin: auto;
}
```/*设置ul为固定宽度但是能装下所有的li */
nav {
position: relative;
background-color: hsl(240, 67%, 53%);
width: 100%;
height: 40px;
/* text-align: center; */
}
/* 设置nav宽度为百分比*/
优势 这样的导航栏放缩后背景颜色不会随放缩而不在页面中央，且li位置固定不会随放大页面被挤出来
6.透明度
opacity: .9;
效果演示
