首页 相关文章 网页教学网收集的优秀的CSS技巧与教程

网页教学网收集的优秀的CSS技巧与教程

照片画廊-

Not so simple photograph gallery
Not so simple photograph gallery - 基本的照片画廊,具有默认图像,一到两行说明文字,单击旁边的小图像后放大显示在中央屏幕上

Hoverbox Image Gallery
Hoverbox Image Gallery - Hoverbox照片画廊,完全基于CSS的照片画廊,鼠标移到图片上,在当前图片位置放大显示

CSS Sliding Photograph Galleries
C...[ 查看全文 ]

2016-02-19 标签:
  • 标签:Web开发
    尽管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求. 本文里面, 我们为大家介绍介绍两个 CSS代码精简工具 和相关的一些 CSS代码精简教程 : CSS代码精简工具 是一个免费的CSS 精简压缩工具...[ 查看全文 ]
  • 标签:Web开发
    输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。– 《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。 表单布局 考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户...[ 查看全文 ]
  • 标签:Web开发
    在曾经的 淘宝UED 招聘 中有这样一道题目: 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。 题目的难点在于两点 :垂直居中; 图片是个置换元素,有些特殊的特性。 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览...[ 查看全文 ]
  • 文字隐藏应用广泛,但常用的方法没有什么亲和力。常用文字隐藏方法的缺陷: 1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略; 屏幕阅读器会忽略被隐藏的文字。 2、visibility: hidden 这种方法隐藏了文字却仍然占据物理空间。 3、推荐大家使用这个更好的方法: overflow:hidden .class{ display:block;...[ 查看全文 ]
  • 标签:Web开发
    随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,webjx.com也成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法DIV+CSS...[ 查看全文 ]
  • 标签:Web开发
    关于CSS网页布局,随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——DIV+CSS。 CSS网页布局的优势体现在如下方面...[ 查看全文 ]
  • 标签:Web开发
    在 CSS网页布局 开发中,会有很多小技巧,webjx.com相关的文章也有很多,但新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以在进行搜索,扩展您所想要得到的知识,相信您会有很多收获! 一、ul标签在Mozilla中默认是...[ 查看全文 ]
  • 标签:Web开发
    上一篇 CSS教程 文章:CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做...[ 查看全文 ]
  • 标签:Web开发
        一种是把CSS文档放到<head>文档中:   <style type=“text/css”> …… </style> 其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。   另一种方法是把CSS样式表写在HTML的行内,比如下面的代码:   <p style=“font-size:14pt;color:blue”>蓝色14号文字</p> 这是采用<Style=“ ”>的格式把样...[ 查看全文 ]
  • 标签:Web开发
    例如定义了链接主样式如下: A:link { color:#FFFFFF; text-decoration:none } A:active { color:#FFFFFF; text-decoration:none } A:visited { color:#FFFFFF; text-decoration:none } A:hover { color:#FFFFFF; text-decoration:underline } 局部链接样式一般的写法是这样: .myClass:link { color:#000000 } .myClass:active { color:#000000 } .myClass:visited { color:#000000 } .myClass:hover ...[ 查看全文 ]
  • 标签:Web开发
    我们在网页教学网中向大家介绍过很多CSS经验与技巧,这些东西都发布在http://www.webjx.com/css/的文章中,相信对大家是有一些帮助与启发的。有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写最近的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。 一、用class_name方式写类名。 以前喜欢用class-name写,不过好...[ 查看全文 ]
  • 很多传统的大学都提供网络课程,为了让这些大学的课程能在网上显示,一大批线上教学网站如雨后春笋般蹭蹭蹭的冒尖。本期文章中,我们为您整理了十四个极好的网络教学网站,均在国外备受推崇哟,网页设计师和工程师快来看看吧。 怎样选择教学网站 当你选择网站进行学习时,有几点那你要注意: 教学者的资质.  很多网站都会公布讲师的信息,你要自习研究每个讲师的教学经历,然后选择你最需要的。...[ 查看全文 ]
  • 标签:Web开发
    CSS的常用技巧放送(一) 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width: 100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其...[ 查看全文 ]
  • 标签:Web开发
    1.marquee 滚动样式是IE独有的,FF不支持 2.css中的filter效果是IE的私有属性,同样所有的非IE浏览器都不认识的. 3.text-transform:capitalize 强制第一个字母大写;   text-transform:lowercase 强制所有字母小写   text-transform:uppercase 强制所有字母大写 4.按钮陷下去的效果   a:hover { position:relative; top:1px; left:1px} 5.禁止内容换行与强制内容换行   在表格...[ 查看全文 ]
  • 标签:Web开发
    CSS语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。   CSS,Cascading Style Sheets 串接样式表,网页外观的控制语法 World Wide Web最早是以文件的概念组成,希望透过网页与超链接,让文件与知识更容易连接援引。从HTML语法大量使用文件概念的标签(例如代表标题的<H1>,...[ 查看全文 ]
  • 标签:Web开发
    用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)。 static值是元素的默认值,它会按照普通顺序...[ 查看全文 ]
  • 标签:Web开发
    让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。 .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF } 经FF2、OP9.21、...[ 查看全文 ]
  • 标签:Web开发
    CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写: h2,.22333,.22333com { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。 CSS嵌套 CSS结构好的话,没有必要使用过多的类或者标识选择符。这是...[ 查看全文 ]
  • 标签:Web开发
    上一篇介绍了CSS语法 我们可以用以下四种方式,将CSS套用入HTML文件中:    行內套用(Inline) 行内套用(Inline) 嵌入套用(Embed) 嵌入套用(Embed) 外部連接套用(External Link) 外部连接套用(External Link) 匯入套用(Import) 汇入套用(Import)行內套用行内套用 我們可以在HTML 文件內直接宣告樣式。我们可以在HTML文件内直接宣告样式。 舉例來說,举例来说, p style='font-family:verd...[ 查看全文 ]
  • 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成...[ 查看全文 ]
手机页面 收藏网站 回到头部