2017年01月_北川Alex

12月 11月 10月 07月 06月 05月 03月 02月 01月

原创 [06]项目实战-PC 端固定布局(6)

一．分离 CSS本节课，我们将要创建一个新的页面：旅游资讯。那么，现在需要解决的问题是，如果把首页重复的部分移植到新的页面而减少冗余。最恰当的方法就是：将 CSS部分中重复的部分分离出来，单独创建一个 CSS，以便后续的页面重复调用。而首页的 HTML 重复的部分，一般是通过动态网页，比如 PHP 等解决重复问题，这里暂时不用解决。分离 CSS，引入到新的页面后，还要为子栏目创建一个标头，不能使用首

2017-01-18 23:51:00 370

原创 [05]项目实战-PC 端固定布局(5)

2017-01-17 01:35:29 446

原创 [04]项目实战-PC 端固定布局(4)

一．热门旅游区本节将探讨一下首页最核心的部分，旅游区。这块内容由两个部分组成，一个是大标题，表示热门旅游区域。其次就是旅游项目的图片展示区域。具体如下：//热门旅游区父元素<div id="tour"> ...</div>//旅游父元素#tour { width: 1263px; height: 1200px; margin: 30pxauto; te

2017-01-15 21:10:54 316

原创 [03]项目实战-PC 端固定布局(3)

一．搜索区本节接着 header 头部往下，来设计一块搜索区。这个区域，可以是广告大图，也可以是用户注册，也可以是一个搜索条，都是一个大幅背景，内嵌一个表单。具体造型如下：从表面上来分析，就是插入一张背景大图，然后居中一个搜索条。但是，我们要求最小在 1280 分辨率、最大在 1920 分辨率能保持最佳的观看效果。而对于超过 1920 分辨率还要保持大图的位置合理。二．插入大图首先，为了满足

2017-01-15 16:45:22 435

原创 [02]项目实战-PC 端固定布局(2)

一．大纲算法在 HTML5 中有一个很重要的概念，叫做 HTML5 大纲算法(HTML5 Outliner)，它的用途是为用户提供一份页面的信息结构目录。比如我们经常使用的手册就是一个非常好的大纲结构：合理的使用 HTML5 元素标签，可以生成一个非常清晰的文档大纲，我们可以通过各种工具去查看当前页面，比如谷歌和火狐的插件可以查看当前的 HTML5 大纲。这里我们推荐使用一个服务器端的测试工

2017-01-14 22:29:40 641

原创 [01]项目实战-PC 端固定布局(1)

一．准备工作1.为了达到最低效果，第一个项目将采用 1440 x 900 的分辨率录制；因为，1024 根本无法容纳最低宽度的页面；页面采用 1280 的最低宽度设计，去掉滚动条为 1263 像素。2.第一个项目是 PC 端的固定布局，会采用像素(px)单位。3.项目素材图片，是课外独立设计好的，课程不会去设计，至于怎么设计的，我会简单的说明一下，让不懂美工的程序员，能设计出还能看的格调。4.目前互

2017-01-12 23:18:08 614

原创 [26]CSS3 弹性伸缩布局(下)

一．新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现了统一。首先，设置伸缩盒的 display 有如下两个属性值：属性值说明 flex 将容器盒模型作为块级弹性伸缩盒显示（新版本） inline-flex 将容器盒模型作为内联级弹性伸

2017-01-12 22:47:27 481

原创 [25]CSS3 弹性伸缩布局(中)

一．混合过渡版混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是针对 IE10 浏览器实现的伸缩布局效果，其功能和旧版本的属性大同小异。我们还是采用上一节课的文件，然后使用混合过渡代码，实现 IE10 的伸缩布局。首先，设置伸缩盒的 display 有如下两个属性值：属性值说明 flexbox 将容器盒模型作为块级弹性伸缩盒显示（混合版本） inline-f

2017-01-12 22:38:57 379

原创 [22]CSS 传统布局(下)

一．定位布局在使用定位布局前，我们先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。属性说明 static 默认值，无定位。 absolute 绝对定位，使用 top、right、bottom、left进行位移。 relative 相对定位，使用 top、right、bottom、left进行位移。 fixed

2017-01-12 22:25:18 312

原创 [24]CSS3 弹性伸缩布局(上)

一．布局简介CSS3 提供一种崭新的布局方式：Flexbox 布局，即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中，可能还有各种改动，浏览器的兼容性还存在问题。所以，本节作为初步了解即可。首先，我们来看下旧版本的浏览器兼容情况：Flexbox

2017-01-11 00:53:03 424

原创 [23]CSS3 多列布局

一．早期多列问题HTML5 中 CSS3 提供的多列布局，通过多列布局我们方便的创建流体的多列布局。我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。因为它是区块性的，对于动态的内容无法伸缩自适应，基本无能力。/

2017-01-10 22:20:22 408

原创 [21]CSS 传统布局(上)

一．布局模型HTML5 中 CSS 早期所使用的传统布局，很多情况下，这些布局方式还是非常有用的。在早期没有平板和智能手机等移动设备大行其道的时期，Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率 1024 * 768 设

2017-01-08 19:02:43 312

原创 [20]CSS3 动画效果

一．动画简介HTML5 中 CSS3 的动画效果，可以通过类似 Flash 那样的关键帧模式控制运行。CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation属性实现。那么之前的 transition属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。 animation 实现动画效果主要由两个部分组成： 1.通过类似 Flash 动画中的关键帧

2017-01-08 18:35:01 542

原创 [19]CSS3 过渡效果

一．过渡简介HTML5 中 CSS3 的过渡效果，通过这个功能可以不借助JavaScript 来实现简单的用户交互功能。过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如下表：属性说明 transition-property

2017-01-07 00:31:53 580

原创 [18]CSS3 变形效果(下)

一．3D 变形简介HTML5 中 CSS3 的变形效果，主要接着上节课的 2D 平面变形转换到 3D立体变形。之前的元素的平移、旋转、缩放和倾斜等功能。这些效果只是单纯在二维平面图上的，我们称之为 2D。那么其实 CSS3也提供了三维立体的一些功能效果，并且目前较新的主流浏览器都比较支持，只不过比 2D 晚一些，对浏览器的版本要求也要高一些。由于 3D 是立体三维，在 x、y 轴的基础上一般会多出

2017-01-06 23:39:30 366

原创 [17]CSS3 变形效果(上)

一．transformHTML5 中 CSS3 的变形效果，通过变形效果，可以平移、缩放和旋转元素的功能。 CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform和 transform-origin。属性说明 transform 指定应用的变换功能 transform-origin 指定变换的起点对于 trans

2017-01-06 00:23:28 750

原创 [16]CSS3 边框图片效果

一．属性解释HTML5 中 CSS3 中边框图片背景的效果，通过这个新属性让边框更加的丰富多彩。CSS3 提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。 1.border-image-source //引入背景图片地址 2.border-image-slice //切割引入背景图片 3.border-image-width //边框图片的宽度

2017-01-05 23:08:40 3093

原创 [15]CSS3 渐变效果

一．线性渐变HTML5 中 CSS3 背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。 CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我们先看一下它的样式表，如下：属性值 linear-gradient(方位, 起始色, 末尾色) 方位可选参数，渐变的方位。可以使用的值有：to top、

2017-01-05 01:20:45 1560

原创 [14]CSS3 文本效果

一．文本阴影HTML5 中 CSS3 中文本效果，其中也包含一些之前讲过的 CSS3 文本属性。CSS3 提供了 text-shadow文本阴影效果，这个属性在之前用过，只是没有涉及浏览器支持情况。属性 Opera Firefox Chrome IE Safari text-shadow 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点：

2017-01-04 08:21:35 431

原创 [13]CSS3 前缀和rem

一．CSS3 前缀HTML5 中 CSS 在发展中实行标准化的一些问题，重点探讨 CSS3 中新属性前缀问题和新的单位 rem。在 CSS3 的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：浏览器厂商前缀 Chrome、Safari -webkit- Opera -o- Fire

2017-01-04 07:26:34 338

原创 [12]CSS 其他样式

一．颜色和透明度HTML5 中 CSS 其他剩下几个常用的样式，包括颜色、透明度、盒子的阴影轮廓以及光标的样式。颜色我们之前其实已经用的很多了，比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过，字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。属性值说明 CSS 版本 color 颜色值设置文本前景色 1p { colo

2017-01-01 09:50:40 379

原创 [11]CSS 表格与列表

一．表格样式HTML5 中 CSS 表格和列表，通过表格和列表的样式设置，让表格和列表显示更加多元化。表格有五种独有样式，样式表如下：属性值说明 CSS 版本 border-collapse 边框样式相邻单元格的边框样式 2 border-spacing 长度值相邻单元格边框的间距 2 caption-side 位置名称表格标

2017-01-01 09:14:14 338

TA关注的人

北川Alex的个人博客

原创 [06]项目实战-PC 端固定布局(6)

原创 [05]项目实战-PC 端固定布局(5)

原创 [04]项目实战-PC 端固定布局(4)

原创 [03]项目实战-PC 端固定布局(3)

原创 [02]项目实战-PC 端固定布局(2)

原创 [01]项目实战-PC 端固定布局(1)

原创 [26]CSS3 弹性伸缩布局(下)

原创 [25]CSS3 弹性伸缩布局(中)

原创 [22]CSS 传统布局(下)

原创 [24]CSS3 弹性伸缩布局(上)

原创 [23]CSS3 多列布局

原创 [21]CSS 传统布局(上)

原创 [20]CSS3 动画效果

原创 [19]CSS3 过渡效果

原创 [18]CSS3 变形效果(下)

原创 [17]CSS3 变形效果(上)

原创 [16]CSS3 边框图片效果

原创 [15]CSS3 渐变效果

原创 [14]CSS3 文本效果

原创 [13]CSS3 前缀和rem

原创 [12]CSS 其他样式

原创 [11]CSS 表格与列表

空空如也

idea的xml文件去除背景

请问for循环setTimeout radio 赋值问题求解答

vue 嵌套for循环问题如何得到这种结构的表格

java代码中读取properties 和在代码中写死配置这两者的性能差别有多大

idea 一打开java文件就出现这个错误了还有一些包没有导入

idea 一打开java 文件就报错了

jrebel热部署插件可以作用于xml和.properties文件吗

获取html原生表单验证的结果

html5验证重写问题急求

eclipse中用maven创建项目变成了这样了怎么办