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