第四篇《WEB标准能有多难?》专栏文章将结束关于文本部分的XHTML的讲解。那么这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换行等标签。 我们都知道网页的最大特性是“链接”,是的这个在我们现在看起来习以为常的东西,让我...
关于段落<p></p>相信大家已经都在自己的工作中开始关注并应用了。因为那真的是非常简单的事,只要你愿意你随时都可以开始让你的页面代码更为标准化。如果你已经开始跟着《WEB标准能有多难?》在自己的工作中循序渐进地运用WEB标准了,那么这...
遵循Web标准的思想,网页要表现出一种亲和力。那么,针对残障用户来说,其“阅读”器可不能读取图像上传递的信息的。所以我们会采用一种Using Background-Image to Replace Text的方法,也就是将图像以背景图像...
在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相似的标签,明确各个标签的用途。在前面我们已经讲过了strong与em的区别。除了strong与em之外还有一些相似的标签...
Web标准:讨论内容结构表现行为分离 内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div cssxhtml css纯代码的分离,思想上流程上,到底如何分离?古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去...
前言这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道,当一个团队开始指定并实行编码规范的话,错误就会变得更加显而易见。如果一段特定的代码不符合规范...
随着移动端用户的增加,我们希望设计出来的网页能同时使用PC和移动端设备,同一个网页增对不同的设备显示效果也不一样,这时需要用到响应式设计。这里我先介绍一下流式网格系统。如果了解过 Bootstrap和Foundation框架的读者就能发现这两个框架都提供了独特...
制作漂亮美观的面包屑导航栏 在开始之前,我要照例给大家科普一下啥叫面包屑导航栏 类似于下面这几种的 主页>栏目页>文章页面 主页/栏目页/文章页面 可以告诉访问者他们目前在网站中的位置以及如何返回的DOM叫面包屑导航栏 但是。。。。。。...
CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。我们可以使用 CSS 选择器,为选中的元素设置需要的样式。在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的...
开发过程中,表格单元格里的显示数据经常超出单元格的宽度。遇到这种情况一般会这样处理。 1、超出部分显示省略号(...) 解决办法:在css中设置 text-overflow: ellipsis; text-overflow: ...
一、margin可以为负值 在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-lef...
关于排版中经常见的问题及解决方法(分享) CSS Code复制内容到剪贴板 /*去除默认样式*/ -webkit-appearance:none; /*去掉手机上a、...
今天的课程加速了,比平时快了些,但觉得很不错。nice~ 属性选择符 E[att] 选择具有att属性的E元素。 XML/HTML Code复制内容到剪贴板 i...
1、特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: XML/HTML Code复制内容到剪贴板 p{color:red;} ...
我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中,也会有这样的三角形 当鼠标经过时,三角形会垂直翻转,如下 现在我分享制作三角形的做法,主要是利用边框做成的 首先,四...
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化。原理很简单,主要用到CSS中animation属性。 接下来,我以我目前的工程项目为例,实现文字和图片的动画效果。(效果如上图GIF) H...
不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。 css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。 我们可能会这样写上一行代码 ...
先来看看静态的效果图,动态效果更好 实例代码复制代码代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title&g...
其实很简单,只需要在尾部增加一个<i></i> ,然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle; 看看效果图 实例代码复制代码代码如下:<style&g...
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使...