
前台设计
文章平均质量分 92
菲雨雾歌
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
网页Css+Div排版常见问题总结
<br /><br />这个是我对于网站样式写排版时候遇到问题后处理了获得的经验,分享给大家。<br />1.开发工具部分。<br /> 我推荐使用Dreamweaver,至于版本不重要。我用的是8.其他开发工具不是不可以,不过个人感觉Dreamweaver更高效。他的代码提示真的很好用。<br />2.对于处理排版<br /> 开始处理网页,首先需要定义布局。目前定义布局的方法有2种,目前比较常用的Div+Css方法,这种通过写Div块来排布样式,很方便,也很实用。容易扩展。并且如果理解原创 2010-07-27 11:56:00 · 3255 阅读 · 0 评论 -
Css3学习笔记(七):布局
1. 多栏布局div[id='test1']{ width:400px; column-count:2; margin:2px; background-color:#f33a3a; border:solid 1px #a50a0a;}使用多栏布局的时候width的宽度是元素的总宽度。column-count: 将一个元素分为多栏显示。column-width: 每栏的宽度。原创 2012-12-19 16:26:33 · 841 阅读 · 0 评论 -
一起来学习《响应式Web设计-HTML5和CSS3实战》吧
《响应式Web设计-HTML5和CSS3实战》是一本不错的前台设计书。书里主要以一个页面入手,涵盖了HTML5和CSS3的所有知识。下午我根据http://www.andthewinnerisnt.com 这个网页上的资源下载下来了所需的一些图片,然后构建了主页index.html。这里放上代码,这是本人写的HTML4+CSS2.1的东西。这里分享给大家。大家可以根据上面给的网站自己去下载图片原创 2012-12-20 17:41:07 · 3421 阅读 · 0 评论 -
继续学习-拥抱流式布局
今天,继续学习《响应式Web程序设计-HTML5和CSS3实战》。根据昨天的代码进行了修改。边学边改,加入了媒体。基本步骤就是:1.将固定的像素元素宽度改为百分比。公式:目标元素宽度 / 上下文元素宽度 = 百分比宽度。2.将固定的文字像素大小改成等量相对尺寸。使用em。公式:目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸。3.图像加入width、max-width,使图像平滑缩原创 2012-12-21 17:18:38 · 2434 阅读 · 0 评论 -
《jQuery基础教程》-- AJAX篇
jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7)1.基于请求加载文件数据这里的请求通常都是网页的某些操作,如点击等。而其加载数据的类型归类为以下四种:a.加载HTML文件;b.加载JSON文件;c.加载Javascript文件;d.加载XML文件。其对应的原创 2013-01-09 16:54:38 · 24930 阅读 · 6 评论 -
《jQuery基础教程》--选择器
1.jQuery目前的最新版支持CSS3的选择器,可以参考CSS3的选择器的使用方法。2.jQuery遍历DOM树的方法:2.1 filter方法。可以利用例如:$('a').filter(function(){//一些代码})这里的filter内含有一个function,这就可以指定dom匹配的过滤功能。2.2 next与nextAll方法例如:$('td:c原创 2013-01-06 11:12:42 · 962 阅读 · 0 评论 -
《jQuery基础教程》-- 事件
1.通过bind方法,绑定事件到元素上。例如:$(document).ready(function(){ $('#switcher-large').bind('click',function(){ $('body').addClass('large'); });});这个例子中,绑定了click(点击事件)到id为switcher-large这个元素上。运行的函数是给body添加原创 2013-01-06 17:47:09 · 1389 阅读 · 0 评论 -
《jQuery基础教程》-- 样式与动画
1.使用css方法来设置或获得样式。例如:var $speech = $('.speech');var defaultSize = $speech.css('font-size');这里使用css方法,仅带了一个参数,所以这里就是获得样式,类似于getter方法。如果带了两个参数,那就类似于setter方法了。用途就是设置样式。例如:$speech.css('fo原创 2013-01-07 17:56:47 · 860 阅读 · 0 评论 -
jQueryUI1.10.0新版本学习(widget-Tabs)
本来打算学习jQueryUI的,然后去买了一本书,《jQueryUI开发指南》。结果那天一跑例子,各种跑不通。后来一看官网,原来从jQueryUI从1.10.0开始对之前很多控件的方法都进行了一定程度的调整,删除了大量原1.9.2以下的方法。所以,没办法,本人这就直接从官网上去学习新的jQuery1.10.0吧。widget-Tabs(选项卡)本小节学习选项卡Tabs的各种使用方法:先原创 2013-02-03 19:42:47 · 5712 阅读 · 2 评论 -
jQueryUI1.10.0新版本学习(widget-Accordion)
本次学习的主要内容是关于新版jQueryUI的可折叠面板控件Accordion1.默认功能的可折叠面板默认功能的可折叠面板提供了通过鼠标点击标题栏来展开或者收起面板内容的功能。如图:构建这个可折叠面板十分简单。HTML如下: jQueryUI学习 折叠面板1 面板内容A 折叠面板2 面板内容原创 2013-02-06 09:49:50 · 1957 阅读 · 0 评论 -
《jQuery基础教程》-- 操作DOM
1.操作属性之前的css方法还有addClass、removeClass、toggleClass都是对DOM元素进行style属性的操作。而对于其他属性则可以使用attr和removeAttr来实现。例如:$('a[href*="wikipedia"]').attr({ rel:'external', title:function(){ return 'Learn m原创 2013-01-08 11:48:25 · 1639 阅读 · 0 评论 -
jQueryUI1.10.0新版本学习(widget-Autocomplete)
本篇文章记录了新版jQueryUI中自动完成控件的用法,更多的可以参见官网。1.基本用法为HTML的input标签加入自动完成功能。所需要编写的HTML格式如下: jQueryUI学习 标签索引: 然后在js中为input使用自动完成控件Autocomplete$(document).ready(原创 2013-02-20 10:59:13 · 1364 阅读 · 1 评论 -
Css3学习笔记(六):动画
1. TransitionsTransitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值从而实现动画功能。格式:transition: property duration timing-functionproperty表示指定的属性duration表示完成过渡的持续时间timing-function表示执行过渡的方法div{ back原创 2012-12-19 15:10:07 · 572 阅读 · 0 评论 -
Css3学习笔记(五):背景与边框
1. 背景1.1 背景的显示范围:background-clip(不起作用)border背景范围包括边框区域(默认),padding背景范围不包括边框区域。div[id='test1']{ background-clip:border;}div[id='test2']{ background-clip:padding;}1.2 背景图像的绘制起点:background-o原创 2012-12-19 11:43:58 · 1116 阅读 · 0 评论 -
Extjs4表格宽度和高度自适应
开发Extjs的时候难免会遇到宽度和高度不合浏览器的情况,这种情况导致的问题是:1.如果表格数据多了以后,右侧滚动条不出现。2.如果表格较长的话,无论页面如何缩放,都没办法看全整个表格。作者使用的情况是在一个tabPanel里放一个gridPanel,想让这个grid随着tabPanel的变化而自动适应窗口宽度和高度。在Extjs4中,经过前段时间的摸索,走了很多弯路。网上有些人说使用原创 2012-12-10 09:35:21 · 15679 阅读 · 0 评论 -
Extjs4表单布局经验
在使用Extjs4的时候,对于表单设计的默认布局,在表单项很少的时候还是比较好用的。但是表单项多了以后就难免需要将表单分块、分类等等。Extjs4提供了vbox和hbox来处理这些。不过,其实有一些更加简单的方法来处理这种布局需求。Extjs4的表单默认布局是纵向的,原form类型的布局,现在form关键字去掉了,这个布局就是默认布局了。先上图:这个图是冒险商人项目的其中一个f原创 2012-12-10 15:49:07 · 3637 阅读 · 0 评论 -
继续学习-页面的HTML5改造
之前设计的页面是纯粹HTML4.01搭建的。下面我们根据步骤一步一步将HTML4.01升级到HTML5。(不考虑IE9以下的老版本浏览器,如果想老版本浏览器支持,可以使用腻子脚本。)步骤:1.修改文件头代码段。这个lang=“en”,是对应英文。本人查了一下,对应中文的很多,但是一般用“zh”就可以了。2.按照自己的喜好定义link等连接标签。HTM原创 2012-12-24 11:14:35 · 2745 阅读 · 0 评论 -
继续学习-CSS3页面美化之静态美化
之前的网页通过修改,使用了HTML5的元素后,我们进行页面美化。这篇文章先进行页面的静态部分美化。话不多说,先上图:已经很好看了是不是?怎么实现的?别着急,慢慢来。1.将标题通过:last-child,:first-child对齐nav。nav ul li:last-child{ text-align:right;}nav ul li:first-child{ te原创 2012-12-24 17:45:24 · 3455 阅读 · 0 评论 -
继续学习-CSS3页面美化之让页面动起来
继昨日的美化一轮以后,页面也是蛮好看的了。但是还缺乏些动态响应。今天带来的是CSS3的动态响应。由于CSS3对于动画和变形这一部分,某些浏览器支持不好(IE),所以这里仅仅是使用Chrome来写的,使用的前缀是-webkit-,效果还是蛮赞的。话不多说,首先我们来改造按钮,让它在鼠标移动后加入动画效果。当鼠标移入以后,会缓慢变化:修改后的content a的样式为:原创 2012-12-25 11:29:52 · 1969 阅读 · 0 评论 -
继续学习-HTML5+CSS3之表单搭建
之前的学习都是页面的一些HTML5+CSS3。还没有涉及表单Form的处理。下面就为大家展示HTML5与CSS3配合下强大的表单表现和处理。优点:使用HTML5来进行表单验证,可以尽可能的加快网页处理速度。缺点:支持的浏览器有限。话不多说,先上图,看看效果吧:还是之前写的网站,今天下午加入了一个新的页面,这个页面在点击“QUOTES”后出现的quotes.html原创 2012-12-25 17:34:46 · 1805 阅读 · 0 评论 -
JavaScript实现startWith、endWith效果函数
String.prototype.startWith=function(str){ var reg=new RegExp("^"+str); return reg.test(this); } String.prototype.endWith=function(str){ var reg=new Re转载 2012-12-13 16:09:38 · 813 阅读 · 0 评论 -
Css3学习笔记(一):选择器篇
CSS3学习笔记:选择器1. 属性选择器使用[att=val]、[att*=val]、[att^=val]、[att$=val]来分别代表选择属性的相等、包含、以……开头、以……结尾的元素。如:[id="section1-2"]{background:red;}[name="tool1"]{background:pink;}[id*="section2"]{background原创 2012-12-17 16:47:10 · 763 阅读 · 0 评论 -
Css3学习笔记(二):在页面中插入内容
1. 插入文字A. 使用选择器来插入内容h2:before{ content:"前缀";}h2:after{ content:"后缀";}B. 指定个别的元素不进行插入h2.sample:before{ content:none;}2. 插入图像A. 在标题前插入图像文件h2:before{ content:url(anwy.jpg);}B. 将a原创 2012-12-17 17:58:18 · 1602 阅读 · 0 评论 -
Css3学习笔记(四):盒模型
1. 类型分类1.1 基本类型Block:宽度占满整个浏览器,每行只允许容纳一个block元素。Inline:宽度由内容决定,每行可以并列容纳多个inline元素。1.2 inline-blockinline-block 属于block类型盒的一种,但是显示的时候具有inline类型盒的特点。div.inlineblockType{ display:inline-bloc原创 2012-12-18 17:37:52 · 565 阅读 · 0 评论 -
Css3学习笔记(三):文字与字体
1. 给文字添加阴影text-shadow[id="section1-2"]{ color:navy; text-shadow: 5px 5px 5px gray; font-size:50px; font-weight:bold; font-family:微软雅黑;}指定多个阴影:[id="section1-2"]{ color:navy; text-shadow: 5p原创 2012-12-18 10:20:37 · 686 阅读 · 0 评论 -
HTML5 新元素列表
本文仅针对HTML5的新元素做一个归纳总结。1.较成型的shuru原创 2014-07-30 02:11:53 · 921 阅读 · 0 评论