- 博客(66)
- 收藏
- 关注
RSS订阅原创 CSS小结：一行内文本超出指定宽度溢出的处理
看到标题你一定很容易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像还有很多人不记得遇到这样的情况该如何处理。 一般的文字截断（适用于内联与块）：.text-overflow {display:block;/*内联对象需加*/width:31em;word-break:keep-all;/* 不换行 */white-spac...
2020-03-03 21:38:11
3708
1
原创 WEB标准中细线表格的实现方法
随着web标准的广泛传播,表格渐渐被我遗忘,但是表格还是有它优秀的一面,数据处理用表格的确省了不少麻烦!这个是细表格的代码,并且通过了标准验证!<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>细线表格简单实现</title>...
2020-03-03 21:37:31
3586
原创 网页制作知识之详细讲解CSS选择符
一.选择符模式模式/含义/内容描述*匹配任意元素。(通用选择器)E匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)E F匹配元素 E 的任意后代元素 F 。(后代选择器)E > F匹配元素 E 的任意子元素 F 。(子选择器)E:first-child当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-chi...
2020-03-03 21:36:49
987
原创 详细讲解CSS特殊选择符伪类的应用技巧
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。1. 语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class {property: value}（选择符:伪类 {属性: 值}）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随...
2020-03-03 21:36:14
842
原创 web前端基础入门学习教程之DIV和CSS布局入门
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束...
2020-03-03 21:34:56
1006
原创 网页中使用CSS样式表的五种方法
一、使用STYLE属性将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如：<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中，但是缺点...
2020-03-02 20:34:28
3152
原创 CSS网页制作时实现自动换行的小技巧
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;w...
2020-03-02 20:33:21
882
原创 CSS制作网页时的优化与技巧
使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0...
2020-03-02 20:32:34
845
原创 CSS特点及加入网页的四种方法
CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheet...
2020-03-02 20:31:34
1329
原创 CSS控制网页中文本的技巧
控制文字的样式包括文字大小写、文字修饰两个部分。 1.文字大小写 文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 基本格式如下: text-transform: 参数 参数取值范围: ·uppercase:所有文字大写显示 ·lowercase:所有文字小写显示 ·capitaliz...
2020-03-02 20:30:48
1023
原创 实践DIV＋CSS网页布局入门指南
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无...
2020-03-02 20:29:54
777
原创 web设计和制作中虚线的实现
在设计和制作网页过程中，常常需要加入虚线分割线，像腾讯、搜狐、新浪首页都有灰色虚线的应用。但是虚线的实现，无论在设计中还是后面的制作中都不太容易。（一）设计中实现虚线总结以下photoshop画虚线的几种方法（只讨论直线）： （1）使用画笔—点击“画笔笔尖形状”，调整“间距”这种方法简便，制作出的虚线点分布均匀，通过描边路径可以画出任意形状的虚线。...
2020-03-01 20:01:46
7178
1
原创 如何设计一个吸引访问者的网站主页？
1.你的网站首页应该有什么？你网站的主页必须包含清晰的信息。最重要的主页应该遵循新的趋势。不应该有不必要的信息干扰用户或与网站目的无关的信息。所有的数据必须整洁有序，最好是段落，以便用户更容易和舒适地阅读和处理信息。如果广告产品或服务，使用图片和视频，让用户更好地了解你的产品或服务是什么，它提供什么。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，...
2020-03-01 19:58:49
4119
1
原创 Web设计之颜色设计 让你的网站熠熠生辉
今天给大家讲讲Web Design中的颜色设计（Color Design）。当你第一次点进一个网页时，吸引你的第一眼是什么？内容？字体？布局？都不是，最吸引你第一眼的，是颜色。为什么会这样？科学的解释是，颜色是通过眼、脑和我们的生活经验所产生的对光的视觉感受，而且是直接的，没有进行任何思考的感受，而网页中的其他部分，很多都是要经过我们大脑过滤以后才会被记住。Web设计中为什么对主题色设...
2020-03-01 19:58:07
2255
原创 CSS语法缩写规则,减少CSS文件的大小
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bot...
2020-02-29 21:11:49
703
原创 Web开发期待的CSS的一些功能
著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks,Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括...
2020-02-29 21:11:03
793
原创 CSS网页设计时关于字体大小的设计
在设计网络应用时，您必须决定如何编辑字体。使用CSS时存在大量选项，每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。在开发网络应用时，没有比外观更重要的事情了。所以，如果发现设计人员十分关注字体及字体大小，我不会感到奇怪！新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 字...
2020-02-29 21:10:14
1450
原创 div+css在思路和流程上实现结构与表现的分离
内容与表现分离，从标准到国人重视那天起，就已经讨论了，但是停留在div+cssxhtml+css纯代码的分离，思想上流程上，到底如何分离？古老的话题：一首古诗的分离 1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它的内容，进行结构的处理。用word排版之后，他有了结构 2.这个结构其实包含了语义和表现 3.用html进行结构化，抛开一切的表现形式，只考虑语义 4....
2020-02-29 21:09:32
3287
原创 CSS+XHTML制作的简单网页下拉菜单
CSS和JS一样深不可测,也许花十天时间就能学会,但如果想完全通透,或许要付出几百个十天.永远不要认为自己比别人聪明,自以为比别人懂的人其实什么都不懂.学无止尽,亘古不变.上下求索,孜孜不倦.自勉.闲来无事,琢磨着写了个下拉菜单,纯CSS的.最初灵感来自于Discuz头部导航中的"我的"下拉效果.大致分析了一下,实现原理很简单,鼠标未触发事件时定义一个样式只显示父级菜单,而隐藏掉其子级菜单.再...
2020-02-29 21:07:49
2964
原创 css实用技巧及必须得注意的事项
个人总结的一些css实用技巧及必须得注意的事项:1.注释须知:html中注释不能这样写:<div></div><!--------这是错误写法-------><div></div><!--=======这是正确写法========-->这种写法,FF中会忽略其下面的内容.2.CSS注释切记在/*之后及*/之前...
2020-02-29 21:06:58
575
原创 WEB前端涉及的布局、结构化和标准化
WEB标准是什么？呵呵，说是WEB标准，不过我这里主要是对XHTML1.1 和 CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了——DI...
2020-02-28 21:54:57
1695
原创 CSS零基础入门教程缩写优化CSS文件的体积
Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几...
2020-02-28 21:52:47
628
原创 CSS学习基础入门教程：了解熟悉css语法
宣告CSS样式的语法如下：選擇器{ 选择器{屬性：設定值； 属性：设定值；...}在一個選擇器(Selector) 中，可以設定的屬性數目沒有限制。在一个选择器(Selector)中，可以设定的属性数目没有限制。選擇器主要有三種：型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种：型类(Type)选择器、Class选择器、和ID选择器。型類選...
2020-02-28 21:51:27
716
原创 CSS零基础入门教程：CSS放入网页的几种方式
我们可以用以下四种方式，将CSS套用入HTML文件中：行內套用(Inline)行内套用(Inline) 嵌入套用(Embed)嵌入套用(Embed) 外部連接套用(External Link)外部连接套用(External Link) 匯入套用(Import)汇入套用(Import) 行內套用行内套用 我們可以在HTML 文件內直接宣告樣式。我们可以在HTML文件内...
2020-02-28 21:50:31
3425
原创 CSS网页布局中文排版的9则技巧
CSS网页布局中文排版有别于国外所介绍的英文排版，由于汉字的特殊性，所以有一些地方是需要大家注意的。今天webjx.com的这个文章或许对大家对排版的控制有所帮助。一、如何设定文字字体、颜色、大小—使用font font-style设定斜体，比如font-style:italic; font-weight设定文字粗细，比如font-weight:bold; font-si...
2020-02-27 21:17:16
1382
原创 CSS网页设计参考:把HTML标记分类
p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间） 《CSS权威指南》中文中：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的...
2020-02-27 21:16:32
1157
原创 CSS学习教程之玩转CSS3色彩
传统来说，大家在CSS中使用的颜色要么是16进制格式，要么是rgb格式，就像rgb(171,205,239)。CSS3带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们...
2020-02-27 21:15:47
3953
原创 总结学习web标准的十个重要理由
如果你是一个新接触web标准这个概念并且还犹豫是否应该花时间去学习它的web开发者或者设计者，这里有一些让你去学习它的重要理由。对于已经使用web标准的web专业人士，当你需要很好的论据的时候这份清单可能可以派上用场，并且随意添加任何你所想到的好处1. 让自己看起来更专业其他web开发者和潜在的雇主将可以看看你的工作，知道你一个喜欢跟上技术的变化的人，并确保你的知识和技能的总是最新的。它将...
2020-02-27 21:14:54
1002
原创 纯CSS实现图片列表悬停放大效果的方法
复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&...
2020-02-26 20:55:22
1654
原创 三个很特别的CSS小技巧分享
种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。 1.在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现，...
2020-02-26 20:54:01
1011
原创 使用CSS代码的空格实现中文对齐的方法
使用一些空格实现个数不等的中文对齐或等宽。见下表：其中的 和 ，由于具有某一超赞的特性，使其可以登上web届的舞台！什么特性呢？如上表加粗展示，1. 透明； 2. 宽度正好跟中文正好是1:2和1:1的关系，于是，一些中文排版对齐什么的，直接就可以使用这两个空格调节，如：XML/HTML Code复制内容到剪贴板<ul> <li c...
2020-02-26 20:53:18
1807
原创 CSS实现定位元素居中的方法
绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; ...
2020-02-26 20:52:17
2368
原创 使用CSS3制作饼状旋转载入效果的实例
今天，要实现一个长任务等待提示效果。 然后设计师就把做好的gif效果图给我，就是下面这个： 按照大众做法，我应该是把图片直接按图索骥，调调布局，然后早早回家抱老婆。 但是，我这个人，天生不安分守己。想到是用在客户端，客户端又是用的webkit内核，于是，立马决定使用CSS3来折腾一番。 外面的光环很好实现，360度转转转就OK. 但是，中间那个鸡蛋转转转的可不是好啃的骨...
2020-02-26 20:51:32
3401
原创 利用CSS3实现文本框的清除按钮相关的一些效果
search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个： 这是不错的体验! 当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微...
2020-02-26 20:50:30
1314
原创 在浏览器加载CSS时防止影响页面渲染的方法
本文展示了一种技术，它能通过异步下载样式表，以阻止它们的下载阻塞页面的渲染，从而尽可能快的让访问者获取到信息内容。警告! 我发这篇帖子全是好意，但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ，而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用，许多开发者在 IE 和 Firefox 中都遇到了问题(...
2020-02-26 20:49:39
1054
原创 使用CSS3制作一个简单的Chrome模拟器
可以看出，Chrome标签的基本特点如下：梯形有圆角宽度自适应用图片可以轻松搞定，但是怎么能用图片呢？作为一个有追求的前端，肯定要用纯CSS3实现啊！标签的HTML很简单：XML/HTML Code复制内容到剪贴板<ulclass="tabs"> <li>新标签页</li> <liclass="selected">百度...
2020-02-26 20:48:38
960
原创 CSS中下拉菜单和表单以及弹出层的简单笔记
下拉菜单display：block，盒子会由收缩包围元素变为扩展填充父元素position：absolute是相对于父元素的绝对位置，其坐标都是相对于父元素的，比如对齐下拉菜单CSS Code复制内容到剪贴板.mene li ul{ display:block; position:absolute; left:0; top:100%; }表单input的type：t...
2020-02-26 20:47:57
1075
原创 利用SVG和CSS3来实现一个炫酷的边框动画
当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。 首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。 请注意，我们将在SVG上使用CSS过渡，可能无法得到所有浏览器的支持。 乍眼一看可能不明白这...
2020-02-26 20:46:52
2141
原创 如何提高CSS网页渲染效率
如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多，而这些细节之处也是影响CSS的网页渲染效率的重要因素，黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法，一起来学习一下。 1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位...
2020-02-25 20:14:08
801
原创 实例讲解使用CSS实现多边框和透明边框的方法
Backgrounds & Borders Level 3 还是一份草案的时候，CSS WG 就在是否支持多重边框的问题进行了大量的探讨，就像是讨论多重背景图片一样。不幸的是，当时认为多重边框的用处并不大，即使需要也可以使用border-image属性来模拟。不过，WG显然忘记了在 CSS 代码中灵活地调整边框，才是我们需要的，现在开发者只能使用一些Hack手段来模拟多重边框，比如使用多...
2020-02-25 20:13:10
3595
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人