会建网站的同学应该都知道，写网站模板的时分必须要懂得DIV+CSS，假如你不明白怎么写，那么这个网页你是极有可能写不出来的。没有建站技能是不是也想写出美丽的网页呢？小编也表示无能为力，毕竟这个东西还要系统的学，假如你想简单的搞定几个页面的话，小编给你漏几手瞧瞧。

让我们假设你现已完成了你想发布的内容，一起现已创建了一个空的style.css文件，什么是你能够写的第一条规矩?

居中

长文本很难解析，也因此不易阅览。每行设置字符限制，能够大大进步很多文本的可读性和吸引力。

body {

margin: 0 auto;

max-width: 50em;

}

在为文本容器增加了款式后，为文本自身增加款式可好?

字体

浏览器的默许字体为Times，可看起来缺乏吸引力(主要是因为它是“无款式”字体)。切换到一个无衬线字体，如Helvetica或Arial能够大大进步你网页的可读性。

body {

font-family: "Helvetica", "Arial", sans-serif;

}

假如你坚持要用衬线体，能够试试Georgia。

当我们让文本更具吸引力时，也需要让它更具可读性。

距离

当用户觉得一个页面崩坏的时分，通常来说都是距离问题。经过在文本周围和文本内设置恰当的距离就能够增加页面的吸引力。

body {

line-height: 1.5;

padding: 4em 1em;

}

h2 {

margin-top: 1em;

padding-top: 1em;

}

尽管到目前为止布局现已大大改进，但让我们增加更多细节处理。

颜色和对比度

白色布景上的黑色文字看起来会比较刺眼。为文本选择一款较软一点的黑色，让页面阅览起来更舒畅。

body {

color: #555;

}

为了保持一个杰出的对比度，让我们为重要文本选择一个更漆黑的暗影。

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;

}

现已改动了色调，为什么不同时改动外形/字体...

自定义字体

由于文本是网页的主要内容，运用自定义字体能使页面愈加引人注目。

当你能够嵌入自己的网页字体或运用类似Typekit的在线服务时，让我们运用免费谷歌字体Roboto：

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {

font-family: "Roboto", "Helvetica", "Arial", sans-serif;

}

在经过自定义字体凸显你的特性后，增加一千个单词又怎么办呢?

 header {

background-color: #263d36;

background-image: url("header.jpg");

background-position: center top;

background-repeat: no-repeat;

background-size: cover;

line-height: 1.2;

         padding: 10vw 2em;

text-align: center;

}

增加logo

图形和图标既可用来作为支持你的内容的装饰品，还能够在你想要传达的信息中担任活跃部分。让我们从Unsplash选择一张美丽的布景图片来美化header。

header img {

display: inline-block;

height: 120px;

vertical-align: top;

width: 120px;

}

让我们借这个时机，来进步文本风格。

header h1 {

color: white;

font-size: 2.5em;

font-weight: 300;

}

header a {

border: 1px solid #e81c4f;

border-radius: 290486px;

color: white;

font-size: 0.6em;

letter-spacing: 0.2em;

padding: 1em 2em;

text-transform: uppercase;

text-decoration: none;

transition: none 200ms ease-out;

transition-property: color, background;

}

header a:hover {

background:   #e81c4f;

color: white;

}

按照上面的语法去写，写几个简单的页面肯定是没啥问题的，不过想要做一个高大上，乃至是支持html5自适应效果的网站的话，主张你还是运用建站模板网这款会打字就建站的自助建站系统吧，里边为您准备了上千套html5风格的网站模板，一键安装就能够搞定啦，喜欢的话，不妨试试。