网页设计怎么换行

良好的网页设计是件很难实现的事情。一个好的网页设计，不仅吸引眼球，也是实用的、直观的、层级简单却足够复杂到保持用户的兴趣。接下来小编告诉你网页设计怎么换行。

换行

在HTML中不支持自动换行,所以要想在输出中加入一个回车符的话,只能使用换行标记。文本水平方向的对齐文本的水平方向对齐主要使用一个叫做ALIGN的属性。这个属性的使用方法如下:等号右边的3个值分别表示文本靠左边、中间和右边对齐

分段

HTML中用

来标记一个段落,

表示段落的开始,

表示段落的结束。段落的缩进、第一个词前面的空格以及其他特征主要由浏览器决定,也可能受其他元素或版面风格的影响。通常的浏览器会给一个段落前后加一个或半个窄,在有的浏览器中可能是第一行缩进的。单独一个

会添加一个空行。结束标记符

在没有ALIGN属性时可以省略不写。

没有足够的空白

空白可以说是设计中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间。

太多的字体

一般一个简单的网页设计，一般字体不超过3种。多则乱

太多的色彩

背景一种颜色，内容文本一种颜色，链接一种颜色，页头和lightbox一种颜色，图案和页脚各一种颜色。这很好，因为它帮助区分了有用的内容。但是，多重渐变、几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白、灰、黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。

没有内容层次

用户的眼睛喜欢有秩序的设计，如头部包含导航和LOGO，特定内容使用lightbox，三列分栏，页脚。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩、价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。

不考虑用户的分辨率

你的屏幕分辨率有2560像素，这非常好。但很多人还在屏幕上用1024像素的分率，有些还在用640*480或800*600。虽然这种分辨率的显示器正在减少，但采用更小的分辨率的手机设备也来了。现在的网页设计宽度标准是960像素，虽然没有照顾到每一种分辨率，但在主流分辨率上可以呈现的最好。假如你希望面对大量的手机用户，最好考虑一个手机版设计。

对比的问题

你考虑过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好，其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字，考虑一下改变字体大小或方式。成为一个大师级网页设计师的秘诀：对比，对比，对比。

同一件事情做的不够多，或做的太多(过犹不及)

多重导航非常好，如一个在页头一个在页脚。在页脚加一个”返回顶部”的按钮也很好。但是，太多指向同一目标的途径会降低可用性。让你的奶奶用下你的网站，如果她搞不定，想想哪些东西让初次访问的用户拒绝使用这个网站。

不一致

一致性是网页设计的关键。它是把网页设计组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的情况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体、大小和色彩，用户很快会觉得不知所措。

内容流

随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。如果你习惯了使用像素和点进行设计，可能会觉得这个有点难掌握。不过没关系，习惯了就很好理解了。

相对单位

你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度50%就是表示宽度占屏幕大小(或者叫视区，也就是指所打开浏览器窗口的大小)的一半。

断点

断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示3栏，在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如，如果一句话要换行，你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。

最大和最小值

有时候内容占满整个屏幕宽度(例如在移动设备上)是好事，但如果相同的内容在电视屏幕上也撑得汇成商学院的，貌似就不太合理了。这就是为什么要有最大/最小值。例如，如果宽度为100%，最大宽度1000px，那么内容就会以不超过1000px的宽度填充屏幕。

嵌套对象

还记得相对位置吗?如果一大堆要素彼此都紧密联系，那么必将难以控制。因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

移动优先还是台式桌面优先

严格来说，项目从小屏幕入手过渡到大屏幕(移动优先)，还是从大屏幕入手过渡到小屏幕(台式桌面优先)区别不大。但是，从移动端着手可以给你带来一些额外的限制，帮助你进行决策。通常情况下大家会从两方面同时着手，所以你还是要看哪种方式最适合你。

web字体vs系统字体

想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧。尽管web字体看起来很炫酷，但你要记住，这些字体都需要用户下载，字越多，用户加载页面的时间也就越长。另一方面，系统字体加载速度则快得多(前提是用户本机就有)，但太过普通。

位图vs矢量图

你的图标是否有很多细节，并且应用了很多华丽的效果?如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。

第一、DIV网页排版要注意使用样式的种类和名字的规范。

id和class应该如何使用

在我们使用div+css排版的时候，每一个div我们都会给他一个样式，而样式有两种一种是id一种是class。有时候无论我们使用哪一种作为 标志都一样可以实现页面的css样式控制。但是为什么会出现id和class这两种呢?其实在一个网页里面我们可以做一个比喻：body我们可以认为是一 个学校，id我们可以认为是一个班级，class我们可以认为是一个人。那么在同一个学校里面，班级是不能重复的而我们每一个人的名字有可能是同名的。所 以在一个网页里面，一个id只能出现一次，一个class可以出现多次。而id的权限比class的权限要高，所以我们可以把一些不需要复制重复的div 使用id来表示把一些可以重复用到的样式使用class来表示。例如一个网页只有一个头部，中部，底部。所以这三个部分我们可以使用id。有一些博客中间 部分有分为左右，这一些板块在我们网页里面一般是不需要重复的，所以我们使用id来为他定义，而每一个板块里面的内容有时候是可以重复使用的，所以我们使 用class为他定义。有时候会有人问，如果我们全部单独使用一个也可以实现功能，为什么我们不单纯使用id和class呢?这个是因为如果全部使用id 的时候，我们网页的JS和PHP的函数调用都是使用到id的，如果我们在css样式就占用了那程序员会非常麻烦，如果全部使用class的时候可能会因为 权限不够而在同一个层里面的没有标志的元素例如ul，li，a等的会收到外面一层的样式影响到这样导致要要多写比较多的代码。

第二、DIV排版中要合理使用标签，有助于网站的收录和SEO优化

我们举一个例子，有时候一个新闻内容板块的html里面，很多人都会直接在div中间写上文字，然后给这一个div进行样式的控制。虽然这样子是完全可以实现功能，但是在搜索引擎眼中并不认为这个就是一个正文内容而是代码 之类的，所以我们在写这个的时候记住合理使用p标签，在我们合理使用标签的时候一方面可以让人感觉到你是用心来做这个网页的排版，更重要的是让这个网站后期 的优化事半功倍。

第三、DIV排版过程中代码要有层次

在我自己写代码的时候是非常注意这一方面的事情，因为一个页面做出来可以给客户看得舒服也能给自己看得舒服。我自己比较喜欢使用同级换行，下级 换行退格的方法。例如一个网页的头部可以分为上部分和导航条部分，然后上部分分为左右。我们可以和容易看出，上下部分这两个div是同级的，而左右的 div是下级的，至于规划这一方面就是css的代码放到css文件里面，js代码放到js代码里面，而不实用嵌入式和捆绑式的书写方法。

第四、DIV排版的时候要注意到后台的调用

我们在排版一个页面的时候，我们使用无数个样式一个一个规定每一个div或者li的样式都是可以的，效果看上去也是一样但是这样是成功的代码那?我 们知道做出来的页面并非这样就放上网站上面运行，而是把页面做成模版加入后台调用标签进行调用。例如一个文章列表(ul)里面的非常多个文章题目 (li)。我们知道每一个文章题目都是从后台调用出来的，所以这些li是需要循环使用，如果我们每一个li都有一个不同的class的话，相信这个循环调 用是让程序员非常头痛的事情。所以在我们做这个的时候尽量使用统一样式。如果导航条的每个项目有一条竖线隔开的情况，我们一般把这条竖线放到每个li的左 边，然后给第一个首页的li加一个样式把这条竖线去掉，因为这样就可以顺利让后面的栏目进行后台调用。而首页是每一个网站都需要的所以这个做成静态也没有 关系。

而我们网页上面的图片也有两种，一个是样式图片一个是数据图片。样式图片指的是不需要变动的如导航条背景(我们平时在浏览器上无法保存下来的)他是 存放在css里面的，数据图片是可以随时变动的，他是从后台调用出来的如商品缩略图(我们平时在浏览器上可以保存下来的)。在我们写代码的时候要明确分辨 这些图片属于哪一种，这样才能更加专业的把一个页面排版出来。而关于logo这个有些人喜欢放在css里面有些人喜欢放在html里面，这个就根据自己需 要了。