-
CSS编写的网页打开流畅相关知识与注意点
所属栏目:[系统] 日期:2020-06-17 热度:99
我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响,因此我们常常关注JavaScript是不是会占用客户端较多的资源,然而大部分都会忽略的一件有趣的事情,CSS也会对Web页面载入的效率产生影响。 我们罗列了十几条相关的知识与注意点,大家可以[详细]
-
acronym标记和abbr标记的不同之处
所属栏目:[系统] 日期:2020-06-17 热度:144
acronym从字义上理解,是取首字母的缩写词,abbr是缩写,在应用过程中,两个标签看起来差不多,但个人觉得还是有区别的。看下面的例子: Internet Explorer acronym title=IEInternet Explorer/acronym Cascading Style Sheets acronym title=cssCascading[详细]
-
你知道CSS中长度单位pt、px、dpi的意思吗?
所属栏目:[系统] 日期:2020-06-17 热度:140
在印刷排版中point是一个绝对的单位,它等于1/72英寸。可以用尺子丈量的,物理的英寸。 但在CSS中pt的含义却非如此,例如我们指定一个字体是9pt,浏览器会以CSS规范解释,它等于: 9*1/72=1/8inch 这是一个误解,因为我们的显示器被分割为了一个个的像素,[详细]
-
CSS页面布局中HTML结构化
所属栏目:[系统] 日期:2020-06-16 热度:83
您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理。 在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告[详细]
-
CSS选择器的使用技巧
所属栏目:[系统] 日期:2020-06-16 热度:60
前面一篇文章介绍了CSS页面布局中HTML结构化,本节讲解如何使用巧妙的使用CSS选择器。 id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、[详细]
-
dl、dt、dd 标记来改造163邮箱的广告条
所属栏目:[系统] 日期:2020-06-16 热度:86
打开网易邮箱的登录界面,我们会发现,在首页的底部有这样一个最新动态的广告条,其设计代码如下:HTML代码 [Ctrl A 全部选择 提示:你可先修改部分代码,再按运行] 在这里,网易采用了table来设计这个页面效果,当然table用在这里并没有什么不妥。但是今天[详细]
-
CSS教程:网页图片垂直居中的使用技巧
所属栏目:[系统] 日期:2020-06-16 热度:179
在曾经的 淘宝UED 招聘 中有这样一道题目: 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。 题目的难点在于两[详细]
-
英文教程:鼠标悬停(hover)效果
所属栏目:[系统] 日期:2020-06-16 热度:113
前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果,今天给大家来一篇很不错的鼠标悬停效果,也是用CSS实现的。 这是一个很棒的鼠标悬停(hover)效果。从国外的网站上看到了,转载过来。没有作任何翻译与编辑,大家可以偿试阅读英文教程,加油! 注[详细]
-
dl,dt,dd标记在网页中要充分利用
所属栏目:[系统] 日期:2020-06-16 热度:127
我们在制作网页过程中用到列表时一般会使用ul或者ol标签,很少用刑dl标签,但是这个三个标签却有着不可忽视的作用,毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是: dl /dl用来创建一个普通的列表, dt /dt用来创建列表中的上层项目, dd /dd用[详细]
-
CSS设计网页时的一些常用规范
所属栏目:[系统] 日期:2020-06-16 热度:100
CSS命名规范 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright[详细]
-
CSS教程:汇总CSS初学者的几个技巧
所属栏目:[系统] 日期:2020-06-16 热度:194
这几则CSS技巧都是从网络收集来的,作为老手就当作温故而知新,本文主要面对CSS新手朋友,有一些东西或许不是搞的很明白。而这十则CSS技巧能促进你的学习与编码技巧,更多的知识浏览CSS教程频道内容。希望大家能认真阅读。一、CSS字体属性简写规则 一般用C[详细]
-
CSS设计网页边框的几个实例
所属栏目:[系统] 日期:2020-06-16 热度:117
掌握CSS网页布局技术,网页边框效果的定义是基础内容,其中也涉及到CSS盒模型知识以及CSS属性简写知识。 相关文章阅读:CSS设计网页时的一些常用规范 实例一: CSS: p {padding: 15px; border: 1px solid black; } h5{padding: 0px; border: 1px solid re[详细]
-
CSS初学者常犯错误汇总
所属栏目:[系统] 日期:2020-06-16 热度:134
前面文章介绍了给CSS初学者收集的技巧,这篇汇总下CSS初学者容易犯的错误。推荐阅读本站的XHTML教程专题内容。 在编写CSS样式时,常常会出现一些问题,有些问题可以很快得已解决,而有些问题可能会浪费我们很多的精力和时间。特别是新手朋友,对各方面的知[详细]
-
网页设计中典型的header代码结构
所属栏目:[系统] 日期:2020-06-16 热度:94
页面中header部分一般位于最上端(有时根据需要也会位于某一侧,不管它在页面中的位置如何,在XHTML代码中它总是优于其它元素先加载),内容主要包括网站名称(Logo,次级标题可能是网站的一句口号等)和网站的导航部分。在推行Web标准的现代网络中,Web中[详细]
-
CSS网页布局:div水平居中的各种方法
所属栏目:[系统] 日期:2020-06-16 热度:56
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:一、ma[详细]
-
CSS教程:简化CSS中属性的示例
所属栏目:[系统] 日期:2020-06-16 热度:194
在工作中编写CSS代码时,经常会出现冗余的代码,特别是用可见即可得工具来编写,为了提高代码的质量及文件压缩到最小,使代码具有可读性,我们不得不把CSS代码简化。 下面用一些比较常用的属性来做示例:margin margin-top:1px; margin-right:1px; margin-[详细]
-
CSS Div网页布局中的结构与表现
所属栏目:[系统] 日期:2020-06-16 热度:194
在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式。一旦一个标准的XHTML代码写完之后,那么CSS可以实现其实百变面孔。其实XHTML[详细]
-
CSS 常用中文字体 Unicode 编码表
所属栏目:[系统] 日期:2020-05-13 热度:148
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。 为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。 例如: font-f[详细]
-
css3 响应式媒体查询的示例代码
所属栏目:[系统] 日期:2020-05-13 热度:164
/* 将body的背景颜色设置为tan */body { background-color: tan;}/* 在992px或更低的屏幕上,将背景颜色设置为蓝色 */@media screen and (max-width: 992px) { body {background-color: blue; }}/* 在600px或更低的屏幕上,将背景颜色设置为橄榄色 */@medi[详细]
-
CSS3动画之利用requestAnimationFrame触发重新播放功能
所属栏目:[系统] 日期:2020-05-13 热度:122
css3中引入了animation模块,自此css动画进入了我们的视野。css动画名符其实,会写css样式就可以创作动画,对一些不怎么会JS的设计师也是比较包容的。但也正因为如此,当你需要重新播放或者说手动触发动画时,css的局限性就突显出来了,毕竟它不是一门编程语[详细]
-
CSS背景图片实现自适应、全屏、填充与拉伸的方法
所属栏目:[系统] 日期:2020-05-13 热度:188
div id=formbackground style=position:absolute; width:100%; height:100%; z-index:-1 img src=http://www.jb51.net/css/pictures/background.jpg height=100% width=100%/ /div div id=formbackground style=position:absolute; z-index:-1;img src=htt[详细]
-
浅谈CSS 浏览器样式重置终结版
所属栏目:[系统] 日期:2020-05-13 热度:173
副标题#e# 浏览器的一些默认样式,有时候真的是特别丑; 虽然现在有现成的 UI 框架,但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题,最后将给出完整的重置样式表; 如果有遇到其它样式问题,评论区提建议,我将持续更新 样式问[详细]
-
CSS实现标签效果的示例代码
所属栏目:[系统] 日期:2020-05-13 热度:69
这里以制作图片右上角标签为例,用CSS以最简单、直接的方式实现效果。 实现效果 实现思路 准备两个div(一个父容器,一个标签div),分别设置宽高,并设置相对布局。 使标签div居于父容器右上角,设置内容居中显示,设置背景和字体颜色,旋转该div。 将父[详细]
-
CSS实现带箭头的提示框效果【示例代码】
所属栏目:[系统] 日期:2020-05-13 热度:102
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了; 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形;只不过它这个尖角是通过两个三角形来实现的;[详细]
-
使用css创建一个优惠券的方法
所属栏目:[系统] 日期:2020-05-13 热度:155
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]