200

3分钟学会建网站必备的网页样式

时间: 2016-10-09 15:03:26   点击数: 30732

建网站的同学应该都知道,写网站模板的时候必须要懂得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风格的网站模板,一键安装就可以搞定啦,喜欢的话,不妨试试。建站宝盒免费下载地址:http://www.szrwl.com/design/



上一篇:简称“H5”的Html5到底是个什么鬼? 下一篇:电商实体店相爱相杀背后,都是企业的撩粉套路
实在人网络 失恋网 自考网 © 中国 版权所有 本站程序界面、源代码受相关法律保护,未经授权,严禁使用
Copyright © 2000-2020 SZRWL.COM. All rights reserved
以下js为测试信息