前端练习 静态网页（一）：导航栏
文章目录
- 一 静态网页
- 1.1. 导航栏
- 1.1.1 不带logo的导航栏
- 实现过程
- 实现效果
- 1.1.2 带logo的导航栏
- 1.1.3 导航栏优化
- 字体优化
- （未解决）提示效果优化
- 栏目间隔（在1.1.4之后阅读）
- 1.1.4选中效果
- 附录
- CSS样式表基础
- CSS变量
- js绑定事件
- 目标A：绑定点击事件
- 目标B：通过循环获取列表项
- （有疑惑）目标C：点击事件中改变样式
- 完整代码：
一 静态网页
完成静态网页，也就是不需要点击事件。
所以大概需要的内容即：html+css
大概需要：制作导航栏、布局方式、底部栏
1.1. 导航栏
需要的效果制作如下：
1.1.1 不带logo的导航栏
实现过程
Part I: html部分
<ul>
<li><a href="#">一级菜单a>li>
<li><a href="#">一级菜单a>li>
ul>
实际上html部分的代码就是简单的用ul和li定义标签列表
- html中
标签指示超链接，例如：W3School为指向w3school的超链接 href代表链接地址，常见的有：代表链接到当前目录下的myStyle.css文件。#符号代表链接当前页面
比如：我们把链接设置为跳转到导航页
Part II:css样式部分
我们需要使标签列表横向排列，参见文章：
.top ul {
/* 清除ul标签的默认样式 */
/*宽度也改为自动*/
width: auto;
list-style-type: none;
margin-left: 5%;
padding: 0;
}
.top li {
/* 使li内容横向浮动，即横向排列 */
float: right;
/* 两个li之间的距离*/
margin-left: 2%;
position: relative;
}
- 列表横向排布
float属性介绍： float 属性定义元素在哪个方向浮动。 - 列表项标志类型
属性list-style-type介绍：使用none表示无标记 - 定位方式
position属性介绍：relative生成相对定位，相对于其正常位置进行定位。
ps. 用fixed和absolute定位方式情况：
实现效果
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
head>
<body>
<div class="top">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">天恒网络a>li>
<li><a href="#">天恒智家a>li>
<li><a href="#">关于我们a>li>
<li><a href="#">在线商城a>li>
<li><a href="#">个人中心a>li>
ul>
div>
body>
html>
.top {
/* 设置宽度高度背景颜色 */
height: auto;
/*高度改为自动高度*/
width: 100%;
margin-left: 0;
/*固定在顶部*/
position: fixed;
/*离顶部的距离为0*/
top: 0;
margin-bottom: 5px;
background: rgb(237, 240, 245);
}
.top ul {
/* 清除ul标签的默认样式 */
width: auto;
/*宽度也改为自动*/
list-style-type: none;
margin-right: 5%;
padding: 0;
}
.top li {
/* 使li内容横向浮动，即横向排列 */
float: right;
/* 两个li之间的距离*/
margin-right: 2%;
position: relative;
}
.top li a {
/* 设置链接内容显示的格式*/
display: block;
/* 把链接显示为块元素可使整个链接区域可点击 */
color: black;
text-align: center;
padding: 3px;
overflow: hidden;
text-decoration: none;
/* 去除下划线 */
}
.top li a:hover {
/* 鼠标选中时背景颜色 */
background-color: rgb(46, 158, 253);
}
1.1.2 带logo的导航栏
- 首先在
.top li中把元素浮动方向改为float: right;，然后在.top ul中让元素离右侧间距为margin-right: 5%;效果如下：
- 然后易于理解的，我们设置一个样式属性名为
logo，使得li元素从左开始排布.
- 接着将登陆按钮完成，设置登录框的样式(下图和上图分辨率不同）
<div class="top">
<ul>
<li class="logo"><img src="logo.png">li>
<li>
<input type="submit" value=登录 ">li>
<li><a href="# ">首页a>li>
<li><a href="# ">天恒网络a>li>
<li><a href="# ">天恒智家a>li>
<li><a href="# ">关于我们a>li>
<li><a href="# ">在线商城a>li>
<li><a href="# ">个人中心a>li>
ul>
div>
/* logo：设置位置、留白 */
li.logo {
float: left;
margin-left: 20%;
position: relative;
overflow: hidden;
}
/* 登录框，设置字体、边框*/
.top li input {
color: rgb(76, 178, 252);
border-color: rgb(76, 178, 252);
border-style: ridge;
border-width: 1px;
}
}
1.1.3 导航栏优化
字体优化
字体涉及到的内容如下，详见参考文章
| 属性 | 说明 |
|---|---|
| font-family | 设置文本的字体系列 |
| font-size | 设置文本的字号大小 |
| color | 设置文本的色彩（前景色） |
| font-weight | 设置文本的粗细 |
| font-style | 设置文本的风格（斜体样式） |
| font | 复合属性，在一个字体的声明中设置字体的常用属性 |
/* 登录框，设置字体、边框*/
.top li input {
border-color: rgb(76, 178, 252);
border-style: ridge;
border-width: 1px;
/* 此处字体与其他部分不同 */
color: rgb(76, 178, 252);
font-size: 18px;
font-weight: bold;
}
/* 字体 */
.fontStyle {
font-family: SimHei;
font-weight: bold;
}
（未解决）提示效果优化
| 情况 | 效果展示 |
|---|---|
| 我的 |  |
| 预期 |  |
可以看到两个易见问题：
- 我的导航文字偏上
- 我的提示填充效果与预期不同
- 使
li元素中的a标签填充导航栏div块的高度，使提示填充满高度，使文字居中。参考文章（并不满意的实现方式）
- 在上面的实现效果上看，登录按钮的高度异常。但假如用上述的方式设置登录按钮，则边框就会被拉伸，效果不尽人意；所以这里我们用
margin-top来设置高度（但是不是自动居中，不够好）
:root {
--nav_height: 97px;
--nav_textWidth: 78px;
--nav_loginMarginTop: 60%;
--nav_fontSize: 18px;
--nav_backgroudColor: rgb(237, 240, 245);
--nav_hoverColor: rgb(46, 158, 253);
}
.top li a {
/*前略*/
/* 调整元素占据的空间，使之填满父组件 */
height: var(--nav_height);
line-height: var(--nav_height);
width: var(--nav_textWidth);
}
.top li input {
/*前略**/
/* 调整登录组件高度 */
margin-top: var(--nav_loginMarginTop);
}
栏目间隔（在1.1.4之后阅读）
这是因为我设置间隔的方式是如下：
.top li {
/* 使li内容横向浮动，即横向排列 */
float: right;
/* 两个li之间的距离*/
margin-right: 2%;
}
这里不用margin设置间隔，将元素的宽度设置得宽一点，而不使用margin
.nav li a {
/*略*/
width: 110px;
}
1.1.4选中效果
当前实现中，点击任意栏目无高亮效果，如下图所示。我们参考文章来实现选中高亮的效果。
实现的思路：
- 在css样式表中，设置一个属性表示“被选中”样式。在html代码中默认“首页”一栏被选中
- 为导航栏中的栏目注册点击事件，当点击任意导航栏项目时，将该项属性设置为被选中，将其他项的被选中属性清空
那么如何实现呢？
见附录js绑定事件
附录
CSS样式表基础
- 更改元素整体样式
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
- 嵌套元素
只有在li元素内部的strong元素会根据样式表进行样式改变
li strong {
font-style: italic;
font-weight: normal;
}
- 定义属性
.yellow {
background: rgb(236, 11, 11);
}
<div class="yellow">
<ul>
<li><a href="example.html">跳转到导航页a>li>
<li><a href="#">一级菜单a>li>
ul>
div>
- 属性嵌套
.yellow {
background: rgb(228, 231, 7);
}
.yellow li {
font-size: 50px;
}
CSS变量
简单用法如下：
:root {
--nav_height: 97px;
--nav_textWidth: 110px;
--nav_loginMarginTop: 52%;
--nav_fontSize: 18px;
--nav_backgroudColor: rgb(237, 240, 245);
--nav_selectColor: rgb(46, 158, 253);
}
.nav li a:hover {
/* 鼠标选中时背景颜色 */
background-color: var(--nav_selectColor);
}
js绑定事件
以此为例子：
<html>
<body>
<script>
script>
<div>
<ul>
<li><a href="#">firsta>li>
<li><a href="#">seconda>li>
ul>
div>
body>
html>
目标A：绑定点击事件
绑定点击事件，使点击first时，终端输出first，点击seconde时，终端输出seconde
对first和second做绑定，使js根据id拿到他们的（这里该用什么专业名词呢？），然后通过onclick设置绑定事件
<html>
<body>
<div>
<ul>
<li id="first"><a href="#">firsta>li>
<li id="second"><a href="#">seconda>li>
ul>
div>
<script type="text/javascript">
var first = document.getElementById("first");
var second = document.getElementById("seconde");
bindClick("first");
bindClick("second");
function bindClick(idName) {
let li = document.getElementById(idName);
li.onclick = function() {
console.log(idName);
}
}
script>
body>
html>
目标B：通过循环获取列表项
在A题中，通过为每一个li设定一个唯一id的方式来完成。但是假如这里有100个列表项怎么办呢？
同时，我的输出first和second是和名字相同的而不能根据规则自定义，比如第一个项输出1，第二项输出3，第三项输出7这样的等差数列。
该如何通过循环获取列表项呢？将id赋给包含列表项的元素，我们就可以拿到一个列表了。然后通过childNodes()方法来获取列表中的元素们。获得了nodes之后，就可以循环注册绑定事件了
<html>
<body>
<div>
<ul id="List">
<li><a href="#">firsta>li>
<li><a href="#">seconda>li>
ul>
div>
<script type="text/javascript">
var outputNum = 1;
var list = document.getElementById("List");
console.log("list中包含" + list.childElementCount + "个元素");
var nodes = list.childNodes;
for (let i = 0; i < nodes.length; i++) {
let node = nodes[i];
bindClick(node);
}
function bindClick(node) {
node.onclick = function() {
console.log(outputNum);
outputNum++;
}
}
script>
body>
html>
（有疑惑）目标C：点击事件中改变样式
通过绑定的事件改变样式
js中是通过哪种方法来改变样式的呢？（这里有疑惑，为什么不能单独删除一个属性）通过clearNode.className = ' '来设定样式属性，通过node.classList.add('fontSize')增加样式属性
完整代码：
Part I html代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
head>
<body>
<div class="nav">
<ul class="top" id="navigator">
<li class="logo"><img src="./images/logo.png">li>
<li>
<input type="submit" value="登录">li>
<li><a href="# ">个人中心a>li>
<li><a href="# ">在线商城a>li>
<li><a href="# ">关于我们a>li>
<li><a href="# ">天恒智家a>li>
<li><a href="# ">天恒网络a>li>
<li class="selected"><a href="# ">首页a>li>
ul>
div>
<script>
var list = document.getElementById("navigator");
console.log("list中包含" + list.childElementCount + "个元素");
var nodes = list.childNodes;
for (let i = 0; i < nodes.length; i++) {
if (i === 0 || i === 1) {
// 为什么login没有跳过去？
} else {
let liNode = nodes[i];
bindClick(liNode);
}
}
/*注册绑定事件*/
function bindClick(node) {
node.onclick = function() {
// 还原非选中项
for (let i = 0; i < nodes.length; i++) {
if (i === 0 || i === 1) {
// 如果是logo和login，则不需要清空属性
} else {
console.log("test");
let clearNode = nodes[i];
clearNode.className = ' ';
}
}
node.className = 'selected';
}
}
script>
body>
html>
part II css代码
:root {
--nav_height: 60px;
--nav_textWidth: 110px;
--nav_loginMarginTop: 10%;
--nav_backgroudColor: rgb(237, 240, 245);
--nav_selectColor: rgb(46, 158, 253);
--nav_fontSize: 20px;
--nav_fontTypeface: FangSong;
--nav_fontWeight:bold;
}
.nav {
/* 设置宽度高度背景颜色 */
height: auto;
/*高度改为自动高度*/
width: 100%;
position: fixed;
/*离顶部的距离为0*/
margin-bottom: 5px;
background-color: var(--nav_backgroudColor);
}
.nav ul {
width: auto;
list-style-type: none;
white-space: nowrap;
margin-right: 10%;
padding: 0;
}
.nav li {
/* 使li内容横向浮动，即横向排列 */
float: right;
position: relative;
}
.nav li a {
margin-right: 3%;
/* 设置链接内容显示的格式*/
display: block;
/* 把链接显示为块元素可使整个链接区域可点击 */
color: black;
text-align: center;
/* 去除下划线 */
text-decoration: none;
/* 调整元素占据的空间，使之填满父组件 */
height: var(--nav_height);
line-height: var(--nav_height);
width: var(--nav_textWidth);
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
.nav li a:hover {
/* 鼠标选中时背景颜色 */
background-color: var(--nav_selectColor);
}
body {
background: #eff3f5;
}
/* logo：设置位置、留白 */
li.logo {
float: left;
margin-left: 20%;
position: relative;
}
/* 登录框，设置字体、边框*/
.nav li input {
border-color: rgb(76, 178, 252);
border-style: ridge;
border-width: 1px;
/* 此处字体与其他部分不同 */
color: rgb(76, 178, 252);
padding-left: 15px;
padding-right: 15px;
/* 调整登录组件高度 */
margin-top: var(--nav_loginMarginTop);
margin-left: 35px;
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
/* 被选中栏目的样式 */
li.selected {
background-color: var(--nav_selectColor);
}