2019年12月31日

IT兄弟连 HTML5教程 栅格布局 盒子模型

摘要:在为大家介绍栅格布局原理之前,先带领大家了解一般的HTML页面布局。在页面布局中依次拥有以下几个板块:页头header、滚动图片banner、主体部分main、页脚footer。其中页头包含logo及导航栏nav,主体部分左右排布分为左侧content主题内容板块及右侧sideBar侧边栏板块。正如 阅读全文

posted @ 2019-12-31 09:08 老码农的一亩三分地 阅读 (5) 评论 (0) 编辑

2019年12月30日

IT兄弟连 HTML5教程 栅格布局 栅格

摘要:说到栅格布局,可能有些读者不太清楚。不过说到栅格,脑子里总会有相应的一些画面,比如: 图1 原始栅格图 图1上显示的就是以前人为了保护某部份土地,特意用竹子包围起该块土地。我们把这种编织筑起的竹子围栏就称之为篱笆或栅格。不管之前有没有了解过栅格的读者们,相信看了图5.1所示,会对栅格这个词有一个概念 阅读全文

posted @ 2019-12-30 08:41 老码农的一亩三分地 阅读 (8) 评论 (0) 编辑

IT兄弟连 HTML5教程 初识Sass 小结及习题

摘要:小结 Sass完全兼容CSS语法,并且添加了一些编程的特性,编写的Sass代码在编译之后最终生成的是CSS文件。Sass具有维护性高、可扩展性强、复用性高的优点,提高我们的编码效率。Sass是使用Ruby语言编写的,Sass的运行是依赖于Ruby环境的,所以在安装Sass之前我们首先要安装Ruby环 阅读全文

posted @ 2019-12-30 08:39 老码农的一亩三分地 阅读 (5) 评论 (0) 编辑

IT兄弟连 HTML5教程 初识Sass Sass使用实例

摘要:在了解基本的Sass语法之后,那么笔者给各位读者抛出一个需求,使用Sass语法实现七色板,效果图1所示: 图1 七色板示意图 在初步了解Sass之后,可能在思路上还没有从CSS转换过来,那么笔者就带领各位读者一起来分析这个需求的特点。 Ø 七色板由七种颜色组成,分别为红橙黄绿蓝灰紫 Ø 每一种颜色都 阅读全文

posted @ 2019-12-30 08:38 老码农的一亩三分地 阅读 (21) 评论 (0) 编辑

2019年12月27日

IT兄弟连 HTML5教程 初识Sass Sass基本语法

摘要:本文重点在于HTML5与CSS3的学习和使用,HTML与CSS不属于编程范畴,更偏向于设计,而Sass是编程化的CSS的扩展语言,对于没有接触过编程的读者可能会有点吃力,这里不做对语法详细介绍,仅作为基本介绍,让读者了解Sass的优越性,如果对Sass感兴趣,请自行查阅相关资料。 Sass基本语法 阅读全文

posted @ 2019-12-27 08:31 老码农的一亩三分地 阅读 (21) 评论 (0) 编辑

2019年12月26日

IT兄弟连 HTML5教程 初识Sass Sass的使用和编译

摘要:Sass作为一门具有编程性质的CSS扩展语言,它具有独立的文件名称,因为其历史原因,它的后缀名可以有两个选择,分别为sass和scss,其中sass的编写格式不符合CSS编程语法规范,其不能使用大括号和分号,需要的严格的缩进来做定界。如下所示: body background: #eee font- 阅读全文

posted @ 2019-12-26 08:26 老码农的一亩三分地 阅读 (24) 评论 (0) 编辑

2019年12月25日

IT兄弟连 HTML5教程 初识Sass Sass的安装

摘要:在使用之前,我们应该学会如何去安装sass的依赖环境,就像HTML依赖于浏览器一样。Sass是使用Ruby语言编写的,Sass的运行是依赖于Ruby环境的,所以在安装Sass之前我们首先要安装Ruby环境。接下来笔者以windows 7为32位系统环境为例,对Ruby环境进行安装,步骤如下。 步骤1 阅读全文

posted @ 2019-12-25 08:57 老码农的一亩三分地 阅读 (30) 评论 (0) 编辑

2019年12月24日

IT兄弟连 HTML5教程 初识Sass Sass的作用

摘要:在了解完Sass之后,相信大多数人更期望了解它到底如何将我们编写CSS代码的效率提高的?到底是如何让我们的CSS代码更具有可维护性的?到底如何让我们编写的CSS代码更具有重用性的?那么笔者就来讲述一个Sass编码的实例,来解答这些疑问。 首先我们先拟定一个需求,让HTML中按钮有相同的大小和不同的款 阅读全文

posted @ 2019-12-24 08:49 老码农的一亩三分地 阅读 (20) 评论 (0) 编辑

2019年12月23日

IT兄弟连 HTML5教程 初识Sass Sass是什么

摘要:是不能称的上是一门编程语言的,因为CSS不包括编程语言的最基本特性,比如变量、数据类型、流程控制语句等。这样前端开发者在编写CSS代码,只能通过一行一行的码代码,并且这种CSS代码重用性低,基本上是一次性,同样它的扩展性低和维护性较低。于是,Sass应运而生。Sass作为CSS扩展语言,它能让前端开 阅读全文

posted @ 2019-12-23 08:34 老码农的一亩三分地 阅读 (4) 评论 (0) 编辑

IT兄弟连 HTML5教程 响应式布局小结及习题

摘要:小结 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式Web设计中的大部分技术都可以用在WebApp开发中。响应式布局面对不同分辨率的设备灵活性强,能够快捷解决多设备显示适应问题。响应式布局可以节约开发成本,方便 阅读全文

posted @ 2019-12-23 08:33 老码农的一亩三分地 阅读 (11) 评论 (0) 编辑

IT兄弟连 HTML5教程 响应式网站的设计流程

摘要:当客户提出产品功能移动化的需求时,虽然响应式站点并不能算是一种纯粹的移动化解决方案,但是,在某些情况下,这种方式是非常值得考虑的。需要先花些心思将原本的网站打造得更具弹性,使其在各种主流移动设备中都拥有尽量优秀的用户体验。响应式网站设计需要考虑以下流程。 第一步:确定需要兼容的设备类型、屏幕尺寸。 阅读全文

posted @ 2019-12-23 08:31 老码农的一亩三分地 阅读 (23) 评论 (0) 编辑

2019年12月20日

IT兄弟连 HTML5教程 响应式网站的内容设计

摘要:基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片,我们可以准备多张不同尺寸的图片,然后 阅读全文

posted @ 2019-12-20 09:06 老码农的一亩三分地 阅读 (18) 评论 (0) 编辑

2019年12月19日

IT兄弟连 HTML5教程 在移动设备上设置原始大小显示

摘要:在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式。例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看到的结果,并不是从上到下排列显示,而是和计算机显示器访问的布局相同。为什么会这样?因为在iPhone 阅读全文

posted @ 2019-12-19 08:48 老码农的一亩三分地 阅读 (11) 评论 (0) 编辑

IT兄弟连 HTML5教程 Media Queries的使用方法

摘要:在上例中,我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。例如,widt 阅读全文

posted @ 2019-12-19 08:45 老码农的一亩三分地 阅读 (3) 评论 (0) 编辑

2019年12月17日

IT兄弟连 HTML5教程 响应式布局实例

摘要:在学习Media Queries模块前,先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用。在本例中,使用HTML5的结构元素定义了5个盒子。当浏览器窗口尺寸不同时,页面会根据当前窗口的大小选择使用不同的样式。当窗口宽度在1000px以上时,页头和页脚分别在页面的 阅读全文

posted @ 2019-12-17 08:36 老码农的一亩三分地 阅读 (21) 评论 (0) 编辑

2019年12月16日

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

摘要:小结 DIV+CSS布局页面的优势:表现和内容相分离、代码简洁,提高页面浏览速度、易于维护和改版、提高搜索引擎对网页的索引效率。每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式。一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过定位和浮动的设置,就可以对整个页面进行布局 阅读全文

posted @ 2019-12-16 09:30 老码农的一亩三分地 阅读 (19) 评论 (0) 编辑

IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

摘要:首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息。另外,首页的高度最好不要超过三个屏幕,页面中使用的颜色最好也不要超过三种。通常一个网站首页包含页眉、Logo、Banner、主导航菜单、主内容栏目和次内 阅读全文

posted @ 2019-12-16 09:28 老码农的一亩三分地 阅读 (8) 评论 (0) 编辑

IT兄弟连 HTML5教程 使用盒子模型设计页面布局

摘要:布局所涉及的技术非常很多,足以另写单独的一本书了。在本节中主要介绍网站中最常用的布局方案,包括区块框居中、两列浮动、三列浮动及多列浮动的区块框。 1 居中设计 区块框居中的设计是在网页布局中常用的技术,例如将网页内的主体内容设置为一定的宽度,然后在页面内居中占据屏幕的一部分显示,而不是横跨整个屏幕宽 阅读全文

posted @ 2019-12-16 09:25 老码农的一亩三分地 阅读 (20) 评论 (0) 编辑

2019年12月13日

IT兄弟连 HTML5教程 使用盒子模型设计页面布局

摘要:布局所涉及的技术非常很多,足以另写单独的一本书了。在本节中主要介绍网站中最常用的布局方案,包括区块框居中、两列浮动、三列浮动及多列浮动的区块框。 1 居中设计 区块框居中的设计是在网页布局中常用的技术,例如将网页内的主体内容设置为一定的宽度,然后在页面内居中占据屏幕的一部分显示,而不是横跨整个屏幕宽 阅读全文

posted @ 2019-12-13 08:29 老码农的一亩三分地 阅读 (19) 评论 (0) 编辑

2019年12月12日

IT兄弟连 HTML5教程 DIV+CSS的兼容性问题

摘要:使用DIV+CSS布局网页其实是很容易的事情,但各种浏览器之间的不兼容性问题,加大了页面布局的难度,给程序员带来很多不便,于是需要花费更多的时间在调试各种浏览器的兼容性上。因为部分CSS属性在不同的浏览器之间解析的结果会有差异,这是由于个别浏览器的开发商对一些CSS属性的解析没有按W3C的标准设计。 阅读全文

posted @ 2019-12-12 09:38 老码农的一亩三分地 阅读 (14) 评论 (0) 编辑

2019年12月11日

IT兄弟连 HTML5教程 使用盒子模型的浮动布局

摘要:虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止。并且由于浮动的盒子模型不在文档的普通流中,所以文档的普通流中的盒子模型表 阅读全文

posted @ 2019-12-11 08:35 老码农的一亩三分地 阅读 (25) 评论 (0) 编辑

2019年12月10日

IT兄弟连 HTML5教程 和页面布局有关的CSS属性

摘要:使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过定位和浮动的设置,就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面,每个虚线框代表一个盒子 阅读全文

posted @ 2019-12-10 09:05 老码农的一亩三分地 阅读 (18) 评论 (0) 编辑

2019年12月9日

IT兄弟连 HTML5教程 和页面布局有关的CSS属性

摘要:使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过定位和浮动的设置,就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面,每个虚线框代表一个盒子 阅读全文

posted @ 2019-12-09 08:48 老码农的一亩三分地 阅读 (3) 评论 (0) 编辑

IT兄弟连 HTML5教程 W3C盒子模型

摘要:日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中。网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁、更美观、有很好的用户体验,则也需要按类别划分到不同的区块中,划分出来的每个区块就可以看作一个装东西的盒子。而每个HTML元素都可以看作 阅读全文

posted @ 2019-12-09 08:46 老码农的一亩三分地 阅读 (9) 评论 (0) 编辑

IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

摘要:HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们的应用十分广泛。需要记住的是,div和span是“无意义”的标签,它们的存在 阅读全文

posted @ 2019-12-09 08:44 老码农的一亩三分地 阅读 (20) 评论 (0) 编辑

2019年12月6日

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

摘要:标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别。通过使用DIV盒子模型结构将各部分内容划分 阅读全文

posted @ 2019-12-06 08:36 老码农的一亩三分地 阅读 (13) 评论 (0) 编辑

2019年12月5日

IT兄弟连 HTML5教程 CSS3属性特效 小结及习题

摘要:本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置。文字的CSS3特效有文字阴影、文字描边、文字排版和文字省略等。另外,CSS3增加了弹性盒模型,我们可以为盒模型增加阴影和倒影。CSS3的分栏布局让WEB开发人员轻松的让文本 阅读全文

posted @ 2019-12-05 13:39 老码农的一亩三分地 阅读 (31) 评论 (0) 编辑

2019年12月4日

IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

摘要:CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation。前面已经介绍过Transform和Transition了,这里我们来学习Animation动画。通过CSS3,我们能够创建动画,可以在许多网页中取代动画图片、flash动画以及JavaScript。 阅读全文

posted @ 2019-12-04 08:44 老码农的一亩三分地 阅读 (17) 评论 (0) 编辑

2019年12月3日

IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

摘要:5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转。为此,CSS3新增了三个旋转函数:rotateX()、rotateY()和rotateZ()。使用rotateX()函数允许一个元素围绕X轴旋转;使用rotateY()函数允许一个元素围绕Y轴旋转;使用rotateZ()函数允许一个元素围绕Z轴 阅读全文

posted @ 2019-12-03 08:37 老码农的一亩三分地 阅读 (18) 评论 (0) 编辑

2019年12月2日

IT兄弟连 HTML5教程 CSS3属性特效 3D变换2

摘要:3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素。 perspective-origin属性的使用语法如 阅读全文

posted @ 2019-12-02 08:45 老码农的一亩三分地 阅读 (3) 评论 (0) 编辑

IT兄弟连 HTML5教程 CSS3属性特效 3D变换1

摘要:3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-st 阅读全文

posted @ 2019-12-02 08:43 老码农的一亩三分地 阅读 (3) 评论 (0) 编辑

IT兄弟连 HTML5教程 CSS3属性特效 2D变换2

摘要:3 scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数。缩放scale()函数让元素根据中心原点对对象进行缩放。默认值是1,因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素显得更大。缩放scale( 阅读全文

posted @ 2019-12-02 08:42 老码农的一亩三分地 阅读 (13) 评论 (0) 编辑

2019年11月29日

IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

摘要:通过CSS3转换,能够对元素进行移动、缩放、转动、拉长或拉伸。它如何工作?转换是使元素改变形状、尺寸和位置的一种效果。CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法。 转换属性包含transform和transform-origin,它们的介绍如表1: 表1 转换属性 其中, 阅读全文

posted @ 2019-11-29 08:53 老码农的一亩三分地 阅读 (7) 评论 (0) 编辑

IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

摘要:CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。 transition属性是一个简写属性,用于设置四个过渡属性,这四个过渡属性的描述如表1-21: 表1-21 tran 阅读全文

posted @ 2019-11-29 08:51 老码农的一亩三分地 阅读 (18) 评论 (0) 编辑

2019年11月27日

IT兄弟连 HTML5教程 CSS3属性特效 遮罩

摘要:CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。遮罩有三个属性可以设置,分别是mask-image、mask-position、mask-repeat。 首先我们需要一个合适的遮罩图片。在ps里操作很简单,制作步骤如下: 1. 阅读全文

posted @ 2019-11-27 08:34 老码农的一亩三分地 阅读 (13) 评论 (0) 编辑

2019年11月26日

IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景

摘要:CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性新增了background-clip、background-origin、background-size,这三个属性描述如表1: 表1 CSS3新增背景属性 阅读全文

posted @ 2019-11-26 08:40 老码农的一亩三分地 阅读 (5) 评论 (0) 编辑

2019年11月25日

IT兄弟连 HTML5教程 CSS3属性特效 渐变3

摘要:4 径向渐变 CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。 径向渐变的格式如下: radial-gradient([<起点>]? [<形状> || <大小>,]? <点>,<点>…) 径向渐变的参数描述如表1: 表 阅读全文

posted @ 2019-11-25 08:50 老码农的一亩三分地 阅读 (10) 评论 (0) 编辑

IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例

摘要:3 线性渐变实例 一、颜色从顶部向底部渐变 制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”;第二种方法起点参数设置为“top”;第三种起点参数使用“-90deg”关键词。为top_bottom设置从顶部向底部的渐变,三种方法的CSS代码如下: 第一种方法 阅读全文

posted @ 2019-11-25 08:48 老码农的一亩三分地 阅读 (9) 评论 (0) 编辑

IT兄弟连 HTML5教程 CSS3属性特效 渐变1

摘要:渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异。事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在 阅读全文

posted @ 2019-11-25 08:46 老码农的一亩三分地 阅读 (15) 评论 (0) 编辑

2019年11月22日

IT兄弟连 HTML5教程 CSS3属性特效 边框

摘要:通过CSS3,我们能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框。并且不需使用设计软件,比如photoshop。 1 边框图片border-image border-image为边框应用图片,顾名思义就是为图片应用背景图片。它和我们常用的background属性比较相似,但是又比背景图片复杂一 阅读全文

posted @ 2019-11-22 08:34 老码农的一亩三分地 阅读 (12) 评论 (0) 编辑

导航