本文入选最受欢迎的黑客新闻文章。几分钟内让你学会编写一个简单的HTML网页：
假设您有一个产品，一个产品组合，或者只是一个想与自己网站上的所有人共享的想法。在将其发布到Internet上之前，您希望使其看起来有吸引力，专业或至少看起来不错。
内容
设计的目的是增强所应用内容的表示。听起来似乎很明显，但是内容是网站的主要元素，不应将其作为事后考虑。
书面内容（例如您当前正在阅读的段落）占Web的90％以上。样式化此文本内容将有很长的路要走。
假设您已经完成了要发布的内容并刚刚创建了一个空style.css文件：
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<html>
<body>
这里是正文内容
</body>
</html>
|
长行文本可能难以解析，因此很难阅读。设置每行字符数限制可以大大提高文本墙的可读性和吸引力：
body {
margin: 0 auto;
max-width: 50em;
}
|
将上面代码贴入第一份代码的style之间。
浏览器的字体默认为"Times"，看起来不那么吸引人（主要是因为它是“未样式化”的字体）。切换为Sans-Serif字体，例如"Helvetica"或"Arial"可以大大改善网页的外观。（中文字体切换为微软雅黑）
body {
font-family:'Segoe UI',SegoeUI,'Microsoft YaHei';
}
|
当页面看起来“破碎”时，通常是间距问题。在内容的周围和内部提供空间可以增加页面的吸引力。
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
|
在白色背景上的黑色文本在眼睛上可能很刺眼。为正文选择较柔和的黑色阴影会使页面阅读更舒适:
为了保持适当的对比度，让我们为重要的单词选择较深的阴影
h1,
h2,
strong {
color: #333;
}
|
只需进行一些其他操作即可校正页面的平衡：
code,
pre {
background: #eee;
}
code {
padding: 2px 4px;
vertical-align: text-bottom;
}
pre {
padding: 1em;
}
|
大多数品牌的原色都具有视觉上的重心。在网站上，这里强调诸如链接的交互元素。
强调色可以用更微妙的阴影进行补充，以用于边框，背景，甚至是正文。
body {
color: #566b78;
}
code,
pre {
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}
pre {
border-left: 2px solid #69c;
}
|
以上是原文简单的CSS，可以通用美观，总结如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0 auto;
max-width: 50em;
font-family:'Segoe UI',SegoeUI,'Microsoft YaHei';
line-height: 1.5;
padding: 4em 1em;
color: #555;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
h1,
h2,
strong {
color: #333;
}
code,
pre {
background: #eee;
}
code {
padding: 2px 4px;
vertical-align: text-bottom;
}
pre {
padding: 1em;
}
a {
color: #e81c4f;
}
body {
color: #566b78;
}
code,
pre {
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}
pre {
border-left: 2px solid #69c;
}
</style>
</head>
<html>
<body>
这是<a href="/">正文</a>
</body>
</html>
|
