本文入选最受欢迎的黑客新闻文章。几分钟内让你学会编写一个简单的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>
|