当前位置: 首页 > 编程日记 > 正文

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

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

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

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

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

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


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

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

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

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

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



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

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

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

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

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

转载于:https://www.cnblogs.com/heikeboke/p/7784404.html

相关文章:

“史上最强”BigGAN公开TensorFlow Hub demo!

还记得前些日子轰动一时的 BigGAN 模型吗?生成对抗网络(GAN)作为当前最热门的技术之一,最近在图像生成方面的成果颇受人关注。近日,由 DeepMind 和赫瑞瓦特大学组成的科研人员公布的 BigGAN 模型,被称为“史…

chrome弱网_请你进行一下弱网模拟

使用chrome的webview调试工具,缺点是只适用于web页面的弱网模拟。方法二:chrome的webview调试工具弱网模拟使用chrome的webview调试工具,缺点是只适用于web页面的弱网模拟。具体步骤:(1)应用打开webview调试功能,具体如…

sql server 2005 T-SQL BEGIN TRANSACTION (Transact-SQL)

标记一个显式本地事务的起始点。BEGIN TRANSACTION 使 TRANCOUNT 按 1 递增。 Transact-SQL 语法约定 语法 BEGIN { TRAN | TRANSACTION } [ { transaction_name | tran_name_variable }[ WITH MARK [ description ] ]] [ ; ] 参数 transaction_name 分配给事务的名称。transac…

redis之 centos 6.7 下安装 redis-3.2.5

前期准备: 1. 操作系统需要安装 gcc 包 与 TCL 库, 通过配置本地 yum 源 ,yum -y install gcc 、 yum -y install tcl安装 2. 下载 redis 安装包,上传至 linux 下。 网址: http://download.redis.io/releases/ [rootm…

JVM中强引用,弱引用,软引用和幽灵引用的代码

上代码: 1 public class ReferenceTest {2 public static void main(String[] args) {3 //test1();//软引用4 //test2();//弱引用5 //test3();//幽灵引用_16 test4();//幽灵引用_27 8 }9 public static void test1(){10 …

springboot取yml中的值_SpringBoot 中从yml配置文件中读取常用的参数值

SpringBoot现在基本上都是使用application-XXX.yml(生产环境为pro,开发测试环境为dev)来配置项目中的一些配置条件,在springboot中还可以通过从yml文件中将yml中的数据直接读取出来。1.yml文件(这里设置参数的时候往往设置两层前缀,避免在调用…

用AI帮你找工作,领英是如何做的?

领英人工智能研发总监 张梁11 月 8-9 日,CSDN 和 AICamp 联合举办的AI开发者大会在京举行。领英(LinkedIn)人工智能研发总监张梁发表了《AI 在大规模招聘求职上的应用》的主题演讲,并接受了 AI科技大本营的专访。张梁在分享中表示…

Web APi之消息处理管道(五)

前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成。我们知道请求信息存在 RequestMessage 中,而响应信息则存在 ResponseMessage 中,当请求信息进入…

delphi 判断鼠标 左右_外设评测HyperX Pulsefire Haste游戏鼠标分享

HyperX家的外设产品我使用较多的是游戏耳机和键盘,鼠标给我的印象还停留在两年前的首款逆火鼠标上,倒不是说HyperX的鼠标不好,主要是我不喜欢太大、太重,以及扁平外型鼠标,以至于HyperX近年发布的几款鼠标都没能结缘。…

先发制人!Waymo将首推商用载人自动驾驶服务,Uber们怕不怕?

编译 | 费棋出品 | AI科技大本营“真的,真的很难。”在 11 月 13 日《华尔街日报》举办的一场会议上,Alphabet 旗下 Waymo CEO John Krafcik 对做自动驾驶汽车技术的艰难不无感慨。在他看来,未来几十年内,自动驾驶汽车将一直存在限…

如何进行绩效考核

这是项目管理书中的一段摘要,年底到了,在这里我把它发出来,希望能对各位即将进行绩效考核的项目经理有帮助。项目经理小赵最近有两个棘手的问题,第一个问题是测试小组有些人抖机灵,对一些他们认为不那么重要的测试用例…

欧盟剑指科技巨头,意欲上调税款

科技公司和税收之间的博弈, 在欧盟早已是一场台面上的战争。 雷锋网了解到,最近法国、德国、意大利和西班牙四国的的财政部长联名致信欧盟轮值主席和欧盟委员会,要求对科技巨头的收入征税,而不仅仅只是利润部分征税。 此外&#x…

mysql 5.7 编译_Mysql5.7版本编译安装及配置

配置yum安装方式1、配置本地yum源1 vim /etc/yum.repos.d/rhel-source.repo2 [rhel-source]3 nameRed Hat Enterprise Linux $releasever - $basearch -Source4 baseurlfile:///mnt5 enabled16 gpgcheck02、清除yum缓存yum clean all3、更新yum源yum update allyum安装 …

程序员,快通知你们老板上吴恩达的最新AI课

是的,吴恩达老师又出新的 AI 课程了,不愧是劳模中的劳模。新课程的名字叫 AI For Everyone,一听就知道不是特别的技术。因此,本课程也适用于商业人士,帮助他们理解如何建立可持续的 AI 战略。吴恩达老师说了&#xff0…

mysql分组和where条件查询_【MySQL】:分组查询where和having

分组查询之前学习聚合函数,知道聚合函数在默认情况下,将会把所有的记录当成一组,让我们在对列求值,计算时更方便了一些。但是,在某些情况下,我们需要显式地对记录进行分组,使用的是group by [co…

百度研究院再升级,迎来9位世界级科学家

美国时间11月13日,百度研究院在美国硅谷召开会议,宣布百度研究院顾问委员会正式成立,并宣布在2018年陆续迎来9位世界级科学家加盟。 新成立的百度研究院顾问委员会包含5名成员,包括AT&T和贝尔实验室前副总裁及首席科学家Davi…

《Linux From Scratch》第二部分:准备构建 第三章:软件包与补丁- 3.1. 简介

本章列出了一个需要下载的软件包列表,它们用来构建一个基本的 Linux 系统。所列出来的版本号对应着该软件的确定可以正常工作的版本,本书是以它们为基础的。我们强烈反对使用更新一些的版本,因为某个版本能用的编译指令可能并不适用于新版本。…

和老同事的谈话:关于职业生涯以及MDA

应该是bigtall在2007年度的最后一篇了,虽然2007年欠了大家很多帐,但是继续写应该是在2008年的事情了,很多时候非常有想法的东西,真正到落笔的时候,还是会发现欠缺许多东西,所以很多时候犹豫再三&#xff0c…

太嚣张了!会Python的人!

随着计算机语言的发展,Python也跻身于语言排行的常青树。在当下的人工智能浪潮中,Python可以说是C位出道,成功引起了大家的注意。国内不少大公司都已经在使用Python,如豆瓣、搜狐、金山、腾讯、盛大、网易、百度、阿里、淘宝、热酷…

Oracle笔记 六、PL/SQL简单语句块、变量定义

1、简单SQL语句,HellWorld示例 --输出信息 begin dbms_output.put_line(Oracle Hello World!); end; 2、变量的定义、使用 --定义变量 declare sName varchar2(20); begin sName : jack; dbms_output.put_line(sName); end; --常用类型 declare sNum number(1); sCo…

mysql 5.6 uf8mb4_MySQL5.7升级到8.0过程详解

前言:不知不觉,MySQL8.0已经发布好多个GA小版本了。目前互联网上也有很多关于MySQL8.0的内容了,MySQL8.0版本基本已到稳定期,相信很多小伙伴已经在接触8.0了。本篇文章主要介绍从5.7升级到8.0版本的过程及注意事项,有想…

modules黑名单

http://www.linuxsir.org/bbs/thread321140.html今天刚看了udev的资料,说可以用blacklist禁用掉,写在/etc/modules.d/blacklist中,如:blacklist pcspkrblacklist via_agp更多的内容,还是看udev的资料吧。modules.auto…

基于tcp和udp的socket实现

2019独角兽企业重金招聘Python工程师标准>>> 本文介绍如何用Java实现Socket编程。首先介绍Java针对Socket编程提供的类,以及它们之间的关系。然后分别针对TCP和UDP两种传输层协议实现Socket编程。 1 Java中的Socket编程接口介绍 Java为Socket编程封装了几…

mysql 5.7编译安装重启_mysql5.7源码编译安装

安装mysql前的准备:一、安装依赖的库:yum install gcc-c ncurses-devel perl-Data-Dumper python-devel openssl openssl-devel二、 安装cmake(因为mysql5.7的编译由cmake来实现)安装cmake:cd cmake-2.8.8/预编译和安装:./bootst…

公开课 | 详解CNN-pFSMN模型以及在语音识别中的应用

近年来,在深度学习技术的帮助下,语音识别取得了极大的进展,从实验室开始走向市场,走向实用化。基于语音识别技术的输入法、搜索和翻译等人机交互场景都有了广泛的应用。 Librispeech是当前衡量语音识别技术的最权威主流的开源数据…

属蛇人一生运势

一生总运势 巳年生人,其性稳和才智,好安排进退,甚喜交际。有高尚的品质,受朋友好评,但其内心常有阴毒与忌妒心,致难以保持永久交情,心情易造多疑之虑,而且好色,好与人争论…

mysql邮箱配置文件_SQL-数据库邮箱配置

一、启用数据库邮件手动启用数据库邮件功能,需执行以下脚本:exec sp_configure show advanced options,1RECONFIGUREexec sp_configure Database Mail XPs,1RECONFIGURE With Override二、配置数据库邮件1、启用配置向导如果事先没有手动启用数据库邮件功…

开源可视化日志分析软件-Gource

Gource可以将代码版本控制系统里面的日志全部可视化,也就是说可以看见每个成员在系统里面提交代码的行为,Gource目前支持git、hg、svn。 静态的图片看着不过瘾,下面我将录频的效果(gourcegltail)给大家分享: http://www.tudou.com…

AI入侵机械设计,苦逼的“机械狗”还有未来吗?

作者 | Loren Grush译者 | 刘旭坤编辑 | 非主流出品 | AI科技大本营近几年,机械行业的平均薪资一直被 IT 碾压,更不用说 IT 行业里炙手可热的人工智能。现如今,AI 一路攻城略地,已经深入里很多行业和领域,其中就包括制…

[MySQL FAQ]系列 -- mysql是否支持跨库事务

作/译者:叶金荣(Email: ),来源:http://imysql.cn,转载请注明作/译者和出处,并且不能用于商业用途,违者必究。是可以支持的,例如这么用:start transaction; in…