简单的静态展示页面
2018-04-27 本文已影响0人
王伯卿
假设现在有一个简单的展示页面，不包含任何实际功能。可能是一个公司的展示页面。因此，我们需要完成的需求就是当用户点击a标签的时候，页面会展示正确的内容。因此我们可以这么做。（这里只做一个导航栏，也许其他的也是同样的道理）
我们先写一个index页面，当用户访问根目录“/”的时候，会跳转到这里。
<!DOCTYPE html>
<html>
<head>
<title>nav</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<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>
</body>
</html>
这里有4个a标签，点击不同的标签会链接到不同的地址。
然后下面是一个简单的css样式，呈现的是一个水平方式的导航栏。
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: green;
}
然后是我们的server文件。
我们需要将css文件等分开放置，比如放置在同目录下public文件夹下。
然后利用Express托管静态文件:
server.use(express.static(__dirname +'/public'))
html中相应访问的链接为：href="test.css"。（前面public已经指明好了，所以这里不用再加）
const express = require('express');
const consolidate = require('consolidate');
let server = express();
server.set('view engine' , 'ejs');
server.set('views' , './');
server.engine('html' , consolidate.ejs);
server.use(express.static(__dirname +'/public'));
server.get('/' , (req , res) => {
res.render('index.ejs' , {username:'eric'});
});
server.get('/about' , (req , res) => {
res.render('about.ejs' , {username:'eric'});
});
server.get('/news' , (req , res) => {
res.render('news.ejs' , {username:'eric'});
});
server.get('/home' , (req , res) => {
res.render('home.ejs' , {username:'eric'});
});
server.get('/contact' , (req , res) => {
res.render('contact.ejs' , {username:'eric'});
});
server.listen(3000);
这样，一个简单的展示页面就完成了。只要把html和css写好就可以了。
后记：
今天陪着父母去看了下房子，45平米的双层loft酒店公寓，附近有两条地铁，而且上下两层非常精致漂亮，好希望在大城市有一个小小的家，回去之后可以唱唱歌，弹弹琴，学学自己想学的，但是问了价格后，确实感受到一种无能为力的难过。
