网页样式(web网页设计)
大家好，今天给各位分享网页样式的一些知识，其中也会对web网页设计进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
网页常见的布局样式
1.“国”字形布局
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2.“匡”字形布局
这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
3.“三”字形布局
这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。
4.“川”字形布局
整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。
5.海报型布局
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
6.Flash布局
这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。
7.标题文本型布局
标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。
8.框架型布局
采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。
教你5分钟设计一个网页样式
你想要在自己网站上分享一个产品，或者是一个作品集，又或者仅仅只是一个灵感。在你发布到网上之前，你想让它看起来有吸引力，更加专业，下文将教给你具体的实现方法，快来一起操作吧~
文本
设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事，但内容是一个网站的主要元素，它不应该在发布后才想到要调整。
编写的内容，就像你目前正在阅读的文章，组成了超过90%的网页。为这个文本内容添加样式将有一个很长的路要走。
让我们假设你已经完成了你想发布的内容，同时已经创建了一个空的style.css文件，什么是你可以写的第一条规则?
居中
长文本很难解析，也因此不易阅读。每行设置字符限制，可以大大提高大量文本的可读性和吸引力。
1
body{
2
margin: 0 auto;
3
max-width: 50em;
4
}
在为文本容器添加了样式后，为文本本身添加样式可好?
字体
浏览器的默认字体为Times，可看起来缺乏吸引力(主要是因为它是“无样式”字体)。切换到一个无衬线字体，如Helvetica或Arial可以大大提高你网页的可读性。
1
body{
2
font-family:
Helvetica
,
Arial
, sans-serif;
3
}
如果你坚持要用衬线体，可以试试Georgia。
当我们让文本更具吸引力时，也需要让它更具可读性。
间隔
当用户觉得一个页面崩坏的时候，通常来说都是间距问题。通过在文本周围和文本内设置适当的间距就可以增加页面的吸引力。
1
body{
2
line-height: 1.5;
3
padding: 4em 1em;
4
}
5
<!-- H1{ color: green; font-family: impact} P{ background: yellow; font-family: courier} --> </STYLE> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML> 植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你想对网页一次性加入样式表，就可采用该方法。 你可能注意到代码中有两处很奇怪： TYPE="text/css"属性和注释标签。 TYPE="text/css"设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。 注释标签(<!-- and-->)更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE="text/css"属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。 链接到样式表上 这里是样式表功能发挥得淋漓尽致的地方。你可以将多个HTML文件都链接到一个中心样式表文件。这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的额某一细节，所有页面都会随之改变。如果你维护的站点很大，则这项功能绝对会有其用武之地。 它的使用方法：产生一个普通的网页，但使用<STYLE>规则，而是在<HEAD>内使用<LINK>标签： <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML> (使用链接的样式表时，你无须使用注释标签。) 现在生成一个单另的文本文件，起名mystyles.css(或者其任何你喜欢的名字)。文件内容如下： H1{ color: green; font-family: impact} P{ background: yellow; font-family: courier} 如同发布HTML文件那样，将这个CSS文件布到你的服务器中。在浏览器中观看网时，你会发现浏览器将依照链接标签将有链接了的HTML网页按照样式表的规则示，在HREF属性中你可以选择使用绝对相对URL。 输入样式表 输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可以。例： <HTML> <STYLE TYPE="text/css"> <!-- @import url(company.css); H1{ color: orange; font-family: impact} --> </STYLE> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML> 而其中输入的 company.css文件内容如下： H1{ color: green; font-family: times} P{ background: yellow; font-family: courier} 关于本次网页样式和web网页设计的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。