黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型

今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧!

碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打奉献给各位吧!

同时也希望喜欢的朋友能够多多关注我的这个小博客,要是有什么问题的话也可以在下方的评论区留言哦!

OK,接下来我就给大家直接步入正题:详解,设计师用div+css 必须知道的网页布局类型

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面黑客内参就给大家分别论述。


1、“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两 小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类 型。

2、拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接

3、标题正文型:这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。

4、左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清楚,一目了然。

5、上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。

6、综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。

7、封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至 直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,假如说处理的好,会给人带来心旷神怡的感觉。

8、Flash型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果假如处理得当,绝不差于传统的多媒体。

9、变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。

OK,今天就讲到这里吧!!基本上大家也都该了解了吧!

时间: 2024-08-25 06:44:16

黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型的相关文章

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记

一.盒子模型(box model) 一个盒子又4部分组成:content(内容).padding(填充).border(边框)和margin(外边界) 盒子模型有两种: (1)标准W3C盒子模型 (2)IE盒子模型(content包含padding和border) 为了统一标准,让网页能兼容各个浏览器,必须使用标准W3C盒子模型 如何才算使用?答:在网页的顶部加上DOCTYPE声明 二.盒子模型结构详解 1.CSS边框(border)属性 border有3个属性:border-width(宽度)

SEO为什么要求网页设计师用DIV+CSS布局网页?

通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+CSS布局网页?有什么好处之类的问题,其实SEO们考虑的问题就是如何让网页的内容更好的让搜索引擎抓取网页的内容,更容易评估网页内容的质量,这样有利于排名.这是SEO们的最基本的目的,当然CSS+DIV的好处并不局限于此,以下为详细的分析: SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页

div+css经典三行两列布局

写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说position 代码 闲来无事,就自己动手实现了一下,代码如下: 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width&qu

DIV+CSS盒子模型之网页排版

DIV+CSS 1.div是HTML里的一个标签,起块级作用的标签,可以设置该块级元素的宽和高.css是对该块级元素的样式设定.盒子模型,形象的理解为一个个的盒子在网页里面,这是编写样式,就可以让盒子放在一定的位置上,并给这个盒子设定一定的样式. 2.看看下面这段代码. HTML: css: 浏览器中的效果: 盒子模型,宽高分别为 内容(content) 边框(border) 内边距(margin) 外边距(pandding).   盒子在组合上css就可以很快速的做出网页想达到的那种效果.排版

div css左边固定右边自适应布局

web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin-right就可以搞定.方法有很多,这次就只介绍这种设置margin的. 代码: <!doctype html> <html>  <head>   <meta charset="UTF-8">   <title>Document&

div+css布局基础知识理解

牛腩新闻发布系统用到了很多的BS的技术,而我们看到的精美的网页很大一部分是由div+css技术实现的,div+css是一种网页布局方式.<div>是HTML的标签,它构成的是块级元素,在有它标记的内容的前后都会换行符,在web页面上表现为一个div元素的前后都会自动的换行.它可以将大的页面分解为多个部分.然后在css中可以分别的对这些部分进行样式的设置,而且和table布局相比div+css将内容和样式表现分离开. 要学习一样技术就要从掌握它的基础概念开始,就来看看在div+css中的基础概念

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

(转)一小时搞定DIV+CSS布局-固定页面开度布局

本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_2013929173533658 关于DIV+CSS布局中用到的CSS必备知识请看:http://www.kwstu.com/ArticleView/divcss_201442291125960 DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性

div+css 笔记

理解CSS盒子模型 什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性 (转载) 我们可以这样理解盒子模型:内容就是盒子里装的东西,填充就是盒子里面的填充泡沫,边框就是盒子本身了,至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出,所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边