前端新手记录自己在网络上找到的前端练习项目。
项目简介
项目包含红、绿、黑3个简单的按钮和一个导航栏，通过点击按钮改变导航栏和网页背景的颜色。
网页换肤.gif
html部分
html部分主要是2个无序列表，前者用来生成改变颜色的按钮，后者用来生成导航栏。
<body>
<div id="outer">
<!--换肤按钮-->
<ul id="skin">
<li id="red" title="红色"></li>
<li id="green" class="current" title="绿色"></li>
<li id="black" title="黑色"></li>
</ul>
<br />
<!--导航栏-->
<ul id="nav">
<li><a href="javascript:">新闻</a></li>
<li><a href="javascript:">娱乐</a></li>
<li><a href="javascript:">体育</a></li>
<li><a href="javascript:">电影</a></li>
<li><a href="javascript:">音乐</a></li>
<li><a href="javascript:">旅游</a></li>
</ul>
</div>
</body>
一个小知识点是链接<a>尽管不想跳到其他地方，其中还要添加href属性，这样做的好处是：
- 让<a>够响应键盘事件并获得焦点。
- 优雅降级，在网络连接很差，还没有加载到CSS的时候，<a>依然有手型与正常的link样式。
这时为了让<a>不跳到其它页面，可以采用以下方法：
<a href="#"></a><a href="javascript:;"></a>
前者的问题是有时会跳到网页顶部，后者则没有这个问题。
CSS部分
该网页的CSS较简单，大部分直接放在了网页中，另外关于需要改变的颜色部分分别放在了单独的文件中，方便用来引用。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>网页换肤</title>
<style>
* { /* 删除网站的默认样式，重置样式*/
margin: 0;
padding: 0;
}
li {
list-style: none; /* 无列表样式*/
float: left; /*向左浮动, 使元素块状显示，显示在一行*/
}
a {
text-decoration: none; /* 无下划线 */
color: #333;
}
body, html { /* 自适应浏览器高度 */
height: 100%;
}
#outer {
width: 500px;
height: 60px;
margin: 50px auto;
}
#skin li{
width: 10px;
height: 10px;
padding: 5px;
margin-right: 10px;
cursor: pointer;
}
#skin li:nth-child(1) { /* 第一个li标签 */
background:red;
}
#skin li:nth-child(2) { /* 第二个li标签 */
background:green;
}
#skin li:nth-child(3) { /* 第三个li标签 */
background:black;
}
#nav {
border: 1px solid #fff;
margin-top: 10px;
overflow: hidden; /* 元素溢出后隐藏 */
height: 30px;
background: green;
}
#nav li a {
padding: 0px 25px;
line-height: 30px;
color: #fff;
border-right: 1px solid #fff;
}
#nav li:last-child a {
border-right: 0; /* 删掉最后一个右侧边框 */
}
</style>
<link rel="stylesheet" href="./css/green.css" />
生成颜色的CSS文件
绿色
body {
/* 背景渐变颜色*/
background: -webkit-linear-gradient(top, #83bf72, #fff);
}
#skin li.current {
border: 5px solid green;
padding: 0;
background: #fff;
}
红色
body {
background: -webkit-linear-gradient(top, #e57585, #fff);
}
#nav {
background: #da101f;
}
#skin li.current {
border: 5px solid red;
padding: 0;
background: #fff;
}
黑色
body {
background: -webkit-linear-gradient(top, #999, #fff);
}
#nav {
background: #555;
}
#skin li.current {
border: 5px solid black;
padding: 0;
background: #fff;
}
list-style属性
list-style 属性在一个声明中设置所有的列表属性,可以包含list-style-type(列表项标记的类型) 、list-style-position(列表项标记的位置)、 list-style-image(使用图像来代替列表项标记)，也可以不设置某个值。
float属性
float 属性定义元素在哪个方向浮动。可选的值包含left（向左）、right（向右）、none（默认，无）、inherit(继承)。浮动元素会生成一个块级框,所以该属性常被用来将多个元素放在同一行。
:nth-child(n) 选择器
:nth-child(n) 选择器匹配属于其父元素的第n个子元素，不论元素的类型。n可以是数字、关键词或公式。
linear-gradient()函数
linear-gradient()函数用来表示线性变换，标准用法是background: linear-gradient(direction, color-stop1, color-stop2, ...);。 -webkit-linear-gradient()表示在webkit内核浏览器（谷歌和safari下支持）。
其它小知识
另外 * {margin: 0; padding:0;}常被用来消除浏览器的默认样式，但是一般大型网站不会使用，因为该语句会递归遍历所有标签，比较消耗性能。
html, body { height: 100% }用来适应浏览器高度。一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的，所以需要为body设置一下宽度。元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，所以不能只设置body，还要设置html。
javascript部分
javascript部分主要是为3个按钮添加点击事件，根据按钮来修改加载的css文件。此处主要学习如何使用javascript操作html标签。
<script>
//window.onload用来在文档加载完成后在调用js
window.onload = function() {
var oLink = document.getElementsByTagName("link")[0];
var aSkins = document.getElementById("skin").getElementsByTagName("li");
for(var i = 0; i < aSkins.length; i++) {
aSkins[i].onclick = function() {
for(var j in aSkins) {
aSkins[j].className = "";
}
this.className = "current";
oLink['href'] = "./css/" + this.id + ".css";
}
}
}
</script>
一个很简单的小程序，记录我的前端学习之旅。项目源码可以查看https://github.com/yunkai123/WebProjectStudy。
网友评论