前端练习 静态网页（四-END）：底部菜单
文章目录
- 一、导航栏
- 二、分割线
- 2.1 直觉方式
- 三、底部信息
- 附录
- 当前所有代码
- 待解决的问题
一、导航栏
导航栏的完成通过列表形式完成。
- 这里注意到导航栏的点。一般来说是可以通过设置
list-style-type标签完成的，但是这里我们看到，只有部分列表项有point，这可如何是好呢？
我设置一个点形格式，设置左右边距达到。
div.bottom {
background-color: var(--bottom_backgroundColor);
height: 100px;
}
div.bottom ul.bootomNav {
list-style-type: none;
margin-left: 25%;
}
div.bottom ul.bootomNav li {
float: left;
position: relative;
width: auto;
}
/* 设置间隔点 */
div.bottom ul.bootomNav li.point {
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;
color: white;
font-size: 12px;
font-weight: normal;
}
div.bottom ul.bootomNav li a {
margin-top: 40px;
/* 设置链接内容显示的格式*/
/* 把链接显示为块元素可使整个链接区域可点击 */
display: block;
color: white;
/* 去除下划线 */
text-decoration: none;
width: auto;
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
<div class="bottom">
<ul class="bootomNav">
<li><a href="#">首页a>li>
<li class="point">•li>
<li><a href="#">天恒网络a>li>
<li class="point">•li>
<li><a href="#">天恒智家a>li>
<li class="point">•li>
<li><a href="#">关于我们a>li>
<li class="point">•li>
<li><a href="#">在线商城a>li>
<li class="point">•li>
<li><a href="#">个人中心a>li>
ul>
div>
二、分割线
2.1 直觉方式
注意到这里有一条白色的分割线
直觉通过设置两各元素间的1px间隔来完成，效果如下：
感觉有点不尽人意不过暂时没找到更好的方案。用了这篇文章的分割线方式依然感觉不是很好。
三、底部信息
这一块儿就是涉及到，文字居中的制作，使用text-align: center
结果在事件的过程中，遇到问题：底部的div跑到了顶部。没有找到合适的解决方案，使用了固定高度的方式解决了问题。
附录
当前所有代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
head>
<body>
<div class="nav">
<ul 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>
<div class="top">
<a href="#"><img src="images/top.png" />a>
div>
<div class="body">
<div class="infrastructure">
<p class="subtitle right">The infrastructure 基础架构p>
<div>
<a href="#"><img class="left" src="images/FWQ.png" />a>
<a href="#"><img class="right" src="images/LYJH.png" />a>
<a href="#"><img class="left" src="images/XNH.png" />a>
<a href="#"><img class="right" src="images/GDCP2.png" />a>
div>
div>
<div class="security">
<p class="subtitle left">Information security 信息安全p>
<div>
<a href="#"><img class="left" src="images/NWAQ.png" />a>
<a href="#"><img class="right" src="images/YAQ.png" width="395px" height="481px" />a>
<a href="#"><img class="left" src="images/WWAQ.png" />a>
<a href="#"><img class="right" src="images/GDCP.png" />a>
div>
div>
<div class="extra left extraLeftPadding">
<p class="h2">签约快讯p>
<div class="contract" id=contract_list>
<ul>
<li>
<a herf=#>天恒什么产品与什么什么签约成功a>
<p>2017-02-12p>
li>
<li>
<a herf=#>天恒A句a>
<p>2017-02-12p>
li>
<li>
<a herf=#>天恒B句a>
<p>2017-02-12p>
li>
<li>
<a herf=#>天恒C句a>
<p>2017-02-12p>
li>
ul>
div>
div>
<div class="extra left extraLeftPadding">
<p class="h2">网络解决方案p>
<a href="#"><img src="images/bottomleft.png" width="100%" />a>
<p class="extraFooter">关于天恒网络解决网上速度的问题p>
div>
<div class="extra left">
<p class="h2">网络经典案例p>
<a href="#"><img src="images/bottomright.png" width="100%" />a>
<p class="extraFooter">关于天恒网络解决网上速度的问题p>
div>
div>
<div class="bottom">
<ul class="bootomNav">
<li><a href="#">首页a>li>
<li class="point">•li>
<li><a href="#">天恒网络a>li>
<li class="point">•li>
<li><a href="#">天恒智家a>li>
<li class="point">•li>
<li><a href="#">关于我们a>li>
<li class="point">•li>
<li><a href="#">在线商城a>li>
<li class="point">•li>
<li><a href="#">个人中心a>li>
ul>
div>
<div class="bottom2">
<br>
<p>联系地址：江阴市滨江西路8号507室p>
<p>联系电话：0510-80615711 邮箱：[email protected]p>
<p>Copyright @ 2010 江阴速苏瑞达有限公司版权所有p>
div>
<script src="myJavaScript.js">
script>
body>
html>
:root {
--page_lineMargin: 150px;
/* 导航栏部分 */
--nav_height: 60px;
--nav_logoMarginLeft: 10%;
--nav_logoMarginTop: 10px;
--nav_textWidth: 110px;
--nav_loginMarginTop: 10%;
--nav_backgroudColor: rgb(237, 240, 245);
--nav_selectColor: rgb(46, 158, 253);
--nav_fontSize: 16px;
--nav_fontTypeface: FangSong;
--nav_fontWeight: bold;
/* 主体内容部分 */
--body_lineMargin: 199px;
/* 子标题字体 */
--body_Subtitle_fontTypeface: FangSong;
--body_Subtitle_fontSize: 28px;
--body_Subtitle_fontWeight: bold;
/* 额外内容部分 */
--extra_width: 285px;
--extra_rightPadding: 15px;
/* 二级标题 */
--extra_h2_fontTypeface: FangSong;
--extra_h2_fontSize: 28px;
--extra_h2_fontWeight: bold;
/* 签约部分文字 */
--extra_contract_fontTypeface: FangSong;
--extra_contract_fontSize_a: 18px;
--extra_contract_fontSize_p: 14px;
--extra_contract_fontWeight_a: bold;
/* 底部部分 */
--bottom_backgroundColor: rgb(4, 54, 113);
}
/* 整体缩进部分 */
body {
background: #eff3f5;
margin-right: var(--page_lineMargin);
margin-left: var(--page_lineMargin);
}
.left {
float: left;
}
.right {
float: right;
}
div.nav {
/* 行内元素垂直居中*/
height: var(--nav_height);
line-height: var(--nav_height);
text-align: center;
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: 2%;
/* 设置链接内容显示的格式*/
/* 把链接显示为块元素可使整个链接区域可点击 */
display: block;
color: black;
/* 去除下划线 */
text-decoration: none;
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);
}
/* logo：设置位置、留白 */
li.logo {
float: left;
margin-left: var(--nav_logoMarginLeft);
margin-top: var(--nav_logoMarginTop);
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-left: 35px;
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
/* 被选中栏目的样式 */
li.selected {
background-color: var(--nav_selectColor);
}
div.top {
height: 650px;
}
.top img {
width: 100%;
}
/* 主体内容部分 */
div.body {
height: 1850px;
margin-left: var(--body_lineMargin);
margin-right: var(--body_lineMargin);
}
/* 基础架构部分 */
div.body div.infrastructure {
/* 字体 */
font-family: var(--body_Subtitle_fontTypeface);
font-size: var(--body_Subtitle_fontSize);
font-weight: var(--body_Subtitle_fontWeight);
}
div.infrastructure p.subtitle {
width: 100%;
text-align: right;
}
div.body div.security {
/* 字体 */
font-family: var(--body_Subtitle_fontTypeface);
font-size: var(--body_Subtitle_fontSize);
font-weight: var(--body_Subtitle_fontWeight);
}
div.security p.subtitle {
width: 100%;
text-align: left;
}
div.extra {
width: var(--extra_width);
}
div.extraLeftPadding {
padding-right: var(--extra_rightPadding);
}
.extra p.h2 {
/* 字体 */
font-family: var(--extra_h2_fontTypeface);
font-size: var(--extra_h2_fontSize);
font-weight: var(--extra_h2_fontWeight);
}
/* 签约部分 */
.extra div.contract {
position: relative;
border: none;
width: 100%;
height: 180px;
overflow: hidden;
}
.contract ul {
position: relative;
left: 0;
padding: 0px;
margin: 0px;
}
.contract ul li {
list-style: none;
float: left;
width: 100%;
height: 30px;
padding-bottom: 30px;
}
.contract ul li a {
font-size: var(--extra_contract_fontSize_a);
font-family: var(--extra_contract_fontTypeface);
font-weight: var(--extra_contract_fontWeight_a);
}
.contract ul li p {
margin-top: 5px;
margin-bottom: 0px;
font-size: var(--extra_contract_fontSize_p);
font-family: var(--extra_contract_fontTypeface);
/* font-weight: var(--extra_contract_fontWeight_p); */
color: rgba(000, 000, 000, 0.6);
}
p.extraFooter {
font-family: var(--extra_contract_fontSize_p);
}
div.bottom {
background-color: var(--bottom_backgroundColor);
height: 80px;
}
div.bottom ul.bootomNav {
list-style-type: none;
margin-left: 25%;
}
div.bottom ul.bootomNav li {
float: left;
position: relative;
width: auto;
}
/* 设置间隔点 */
div.bottom ul.bootomNav li.point {
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;
color: white;
font-size: 12px;
font-weight: normal;
}
div.bottom ul.bootomNav li a {
margin-top: 40px;
/* 设置链接内容显示的格式*/
/* 把链接显示为块元素可使整个链接区域可点击 */
display: block;
color: white;
/* 去除下划线 */
text-decoration: none;
width: auto;
/* 字体 */
font-family: var(--nav_fontTypeface);
font-size: var(--nav_fontSize);
font-weight: var(--nav_fontWeight);
}
div.bottom2 {
background-color: var(--bottom_backgroundColor);
height: 120px;
margin-top: 1px;
}
.bottom2 p {
margin-top: 0px;
margin-bottom: 10px;
color: #FFFFFF;
text-align: center;
}
var list = document.getElementById("navigator");
var nodes = list.getElementsByTagName('li');
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';
}
}
window.onload = function () {
var oDiv = document.getElementById('contract_list');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var timer = null;
//由于单列高度60，每次移动1，当移动达到60的时候，进行一次暂停。
var iSpeed = -1;
// 为了避免轮播时内容空缺
oUl.innerHTML += oUl.innerHTML;
// 设置ul实际高度
oUl.style.height = aLi.length * aLi[0].offsetHeight + 'px';
// 定期执行
timer = setTimeout(fnMove, 10);
console.log(oUl.offsetTop);
console.log(oUl.offsetHeight);
oDiv.onmouseover = function () {
clearInterval(timer);
}
oDiv.onmouseout = function () {
clearInterval(timer);
timer = setInterval(fnMove, 10);
}
function fnMove() {
console.log(oUl.style.top)
if (oUl.offsetTop <= -oUl.offsetHeight / 2) {
oUl.style.top = 0;
}
oUl.style.top = oUl.offsetTop + iSpeed + 'px';
console.log(oUl.offsetTop);
if ((oUl.offsetTop % 60) == 0) {
clearInterval(timer);
timer = setTimeout(fnMove, 2000);
} else {
clearInterval(timer);
timer = setTimeout(fnMove, 10);
}
}
}
待解决的问题
- 块级元素、行内元素分别有哪些？他们的垂直居中、水平居中分别如何完成？
- 自适应如何做到？我的这套代码恐怕只能在1600*900分辨率的情况下正常使用吧。缩放如何保持样式
- （与上相关）如何做到非指定的，元素高度定位。
- 轮播中的
元素无法点击 - 重构代码
上面的这些问题因为我现在不往前端发展，所以只要找到前辈去问一下，知道解决问题的方向就好了。