- 博客(93)
- 收藏
- 关注
RSS订阅原创 CSS网页布局开发小技巧24则
在CSS网页布局开发中，会有很多小技巧，新手朋友往往对此很不熟悉。在某一两个小问题上，或许纠缠很长时间才能搞明白，虽然在webjx.com的文档中，多次提及过这方面的内容，但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧，认真读一读，或许您并不能完全理解， 一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二、同一个的class选择符可...
2020-02-29 21:20:50
742
原创 学习CSS的背景图像属性background
CSS的背景属性“background”提供了众多属性值，如颜色、图像、定位等，为网页背景图像的定义提供了极大的便利。看看background提供的属性值：background :background-color|background-image|background-repeat|background-attachment|background-position...
2020-02-29 21:20:04
3174
原创 css教程:可读性可维护性良好的CSS文件
大多数文章中，我们并未特别注意CSS文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法，以此作为指南，以一种较好的CSS样式组织习惯来进行WEB前端开发。一、CSS样...
2020-02-29 21:18:37
649
原创 css教程:可读性可维护性良好的CSS文件
大多数文章中，我们并未特别注意CSS文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法，以此作为指南，以一种较好的CSS样式组织习惯来进行WEB前端开发。一、C...
2020-02-29 21:17:40
2941
原创 css技巧:经典CSS使用技巧几则
MacJi “偷懒”翻译了部分，下午冒着被 BOSS 开除的危险将其补完（原文链接）。使用 line-height 垂直居中line-height:24px;使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。清除容器浮动#main { overflow:hidden;}期前也提到过这样...
2020-02-29 21:16:54
622
原创 CSS初学：如何修改Zblog中的CSS
在学习应用css之前我们要先了解一下什么是css。CSS是Cascading Style Sheets(层叠样式表)的简称.* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).* 在标准网页设计中CSS负责网页内容(XHTML)的表现.* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.* 可以通...
2020-02-28 21:48:31
2008
原创 提高CSS的网页渲染效率11个注意点
CSS学习越深入，我们需要关注的细节之处就越多，今天我们通过11个注意点来提高CSS的网页渲染效率。 1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。 * 不赞成 - color:#f3a; ...
2020-02-28 21:46:31
578
原创 cookie和dom操作调用样式表实现网页换肤
Html代码部分:1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)<ul id="skin">...
2020-02-28 21:45:54
673
原创 css对边框的属性控制和链接的伪类选择器
边框(border): css控制的边框属性包括border-width, border-color, border-style.Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个“will soon be dead” 的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图:如上图所示,对...
2020-02-28 21:45:04
2915
原创 CSS网页布局网页制作技巧总结
CSS网页布局开发中，会有很多小技巧，这之类相关的文章有许多介绍，这里再扩展一下您所想要得到的知识，相信您会有很多收获！ 一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为...
2020-02-27 21:24:05
1099
原创 五种方法让CSS实现居中显示
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。<div id="wrapper"><div id="cell"><div class=...
2020-02-27 21:22:35
1788
原创 CSS样式表高效使用技巧充分利用样式表的强大性
为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会随着互联网经济的不断发展，互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长，各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信 息量，我们对网页中每一个栏目的增删，都会是一个很复杂的...
2020-02-27 21:21:14
3423
1
原创 XHTML+CSS教程:灵活运用HTML标记
div+css网页布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。 什么时候应该用DIV? 虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:<divid="header"&g...
2020-02-27 21:20:45
2202
1
原创 css代码优化的12个技巧
编写好的CSS代码，有助提升页面的渲染速度。本质上，引擎需要解析的CSS规则越少，性能越好。MDN上将CSS选择符归类成四个主要类别，如下所示，性能依次降低1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始，虽然该书中罗列的更加详细，但你也可以在这里查看完整的引用列表，也可以在...
2020-02-26 21:07:20
962
原创 CSS制作网页中的虚线
这里议决边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。 一、四边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例： CSS代码： .hackhome{border:1px dashed #000; height:50px;...
2020-02-26 21:06:21
3235
原创 愚人节巧用CSS开个极客式玩笑以chrome为例
愚人节到了，如果你想和那些要上网的朋友或同事开个极客式玩笑，那就来试试这些CSS吧。 免责声明：恶搞带来的所有后果，请恶搞者自行负责。本站不承担任何责任。注：本文以chrome为例1. 网页上下颠倒代码如下:body {-webkit-transform: rotate(180deg);}2. 网页旋转代码如下:body {-webkit-an...
2020-02-26 21:05:20
1047
原创 CSS去掉A标签（链接）虚线框的方法
当一个链接得到焦点时，默认会有个虚线框。如图：在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写：代码如下:a:focus {outline:none;-moz-outline:none;}顺便提一下，如果你用过 Safari 和 Chrome 可能会发现，当输入框得到焦点时边框会出现...
2020-02-26 21:04:11
1530
原创 css样式的动态添加及显示和隐藏等零碎用法
（其中红色字体是动态添加样式的语句），这是一个动态生成无序列表的函数，用来显示搜索到的wifi信号，其中有3个参数，wifi的名称、加密方式、信号强度。代码如下:// create a network list itemfunction newListItem(network, averageSignalStrength) {/*** A Wi-Fi list item h...
2020-02-26 21:03:28
1345
原创 17个有趣实用的CSS3悬停效果教程
HTML 5和CSS 3拓展了网页设计的可能性，它们引入了很多新属性来让你的网站变得丰富而饱满。在这篇文章中，我分享了18个CSS3悬停效果的教程，来让你的网站变得饱满并且传达更好的用户体验。本文介绍了CSS 3的动画属性，使用这个属性可以不用费多大力气就创建出一个悬停效果。我们希望你会觉得我们收集的CSS 3悬停效果教程合集是有用的，另外如果你知道任何CSS 3悬停效果教程的话，请在文章下方给我...
2020-02-26 21:02:18
1170
原创 网页切图的CSS和布局经验与要点
很多初学者在刚学完CSS基础要去实际操作进行网页切图的时候，总感觉无从下手。在这里我为大家简单总结一下，一些网页切图的经验与要点。第一点：一般我们网站LOGO部分通常使用H1+a链接的方式，在CSS上采用以图换字技术，指定对象的宽与高，把A元素设为块状元素。这样有利于后期的网站优化。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学...
2020-02-26 21:01:25
1082
原创 巧用CSS3制作时尚的网页加载动画效果
在现代网页设计中，预加载是一种很常见的情形。作为用户，我们希望网页快速并且流畅 — 我们不喜欢等待。当内容被加载时，预加载能提供视觉反馈，并管理用户期望，降低用户放弃浏览网站的几率。源文件代码：MissYuan_源文件.rar用CSS3创建预加载动画的准备条件在我们深入CSS3，创建预加载动画集之前，我们先讨论一些CSS3中非常重要的属性。伪元素（Pseudo Elements）:...
2020-02-26 21:00:39
2313
1
原创 10款Web程序员必备的CSS工具
对于web开发来说，CSS是最有效的美化页面、设置页面布局的技术。但问题是，CSS是一种标记性语言，语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或能够大量优化的地方。如果你经常使用静态编程语言(比如，Java，C语言)等，你会发现实用的IDE工具会给编程带来巨大的效率，像Eclipse这样的能够实时自动分析代码问题的集成开发环境就是一个典型的例...
2020-02-26 20:59:42
1305
原创 CSS中Font的一些基本知识点归纳总结
1、什么是字体 字体是文字的外在形式，就是文字的风格，是文字的外衣。比如行书、楷书、草书，都是一种字体。同样一个字每个人写起来都会有差异，可以说每个人都有一套潜在的字体库。对于web页面来说，字体就是计算机上存储的一套文字显示方式。通过对文字进行一些特殊处理（比如末端加强）来提高不同环境中文字的可读性。 比如同样大小的文字，在不同字体下的可读性是不同的。一般来讲，一款字库的诞生，要...
2020-02-26 20:58:42
3426
原创 使用css3绘制出各种几何图形
1、圆形示例: 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html:复制代码代码如下:<div class="size example1"></div>css:复制代码代码如下:.size{width:200px;height: 200p...
2020-02-25 18:58:57
2694
原创 30个优秀的CSS导航菜单和按钮教程
在web设计中，CSS是最重要的组成部分。为了让大家更好的了解如何通过CSS来设计，下面就分享30个优秀的CSS导航菜单和按钮。通过这些教程，你可以更好的从中学习。enjoy！01.Advanced CSS Menu : Webdesignerwall新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢...
2020-02-25 18:58:07
3087
原创 纯CSS3代码实现switch滑动开关按钮效果
html结构XML/HTML Code复制内容到剪贴板<divclass="container"> <divclass="bg_con"> <inputid="checked_1"type="checkbox"class="switch"/> <label...
2020-02-25 18:56:55
2849
原创 分享几个CSS小众但炫酷的技巧
1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？复制代码代码如下:img.desaturate {filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: gra...
2020-02-25 18:56:17
2554
原创 CSS3实现复选框动画特效示例代码
先看我们的第一个特效图实例代码复制代码代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CheckBox</title><style>.checkbox {width: 900px;...
2020-02-25 18:55:33
2956
原创 border-radius是向元素添加圆角边框的方法
border-radius:10px; /* 所有角都使用半径为10px的圆角 */border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。实心上半圆：方法：把高度(height)设为宽度(width...
2020-02-25 18:54:42
3057
原创 CSS控制div宽度最大宽度/高度和最小宽度/高度的方法
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度，但是在IE6中很多朋友都会遇到不兼容的头疼问题，包括我也经常遇到这样的问题，在百度查了很多都没法解决，后来在一个论坛上学习到，在这里跟大家分享下css3样式代码，经过时间完全兼容各大主流浏览器。CSS Code复制内容到剪贴板*最小寬度*/ .min_width{min-width:300px; /...
2020-02-25 18:54:01
3736
1
原创 利用CSS3实现平移动画效果示例代码
一、平移动画有关的CSS3属性以及相关的属性描述 1、transition-property：是用来指定当元素其中一个属性改变时执行transition效果（例如：长度，宽度，颜色等）。 2、transition-duration：是用来指定元素转换过程的持续时间（通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很生硬）。 3、transition-timing-func...
2020-02-25 18:53:14
4885
1
原创 利用css实现浮雕效果示例代码
前言最近在看百度地图看到了一个效果，感觉这个效果用在网页上应该蛮赞的，于是就学习了一下。效果图如下：浮雕效果需要用到伸缩盒的知识（flex）flex在chrome是完全支持的，要加-webkit-前缀，其他的浏览器有的支持有的不支持，自己去查css手册，今天主要想讲一下怎么制作出浮雕效果先附上代码：<div class="title"> &...
2020-02-25 18:52:18
5107
1
原创 web前端基础入门教程CSS实现三栏布局的四种方法示例
其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。...
2020-02-25 18:51:00
952
原创 html+css基础入门教程学习标记语言——再谈清单
假设你打算标记一个步骤清单,每个项目之前都有编号,我们将会研究两种能够达成这个目标的不同方法,同时说明为何某个方法比较适用.方法A:乱中有序<ul> <li>1. Chop the onions.</li> <li>2. Saute the onions for 3 minutes.</li> <l...
2020-02-24 20:24:40
857
原创 html+css零基础入门教程学习标记语言——精简标签
先前我们不断提到结构化内容能够把结构与设计细节分类并精简标签,该怎么做呢?我们可以使用符合标准的XHTML与CSS代替表格,图片制作我们所需要的版面.网页教学网使用标准技术制作网站(特别是十分依赖CSS的网站)的时候,我们常常会养成一个不太好的习惯,就是加上多余的标签和class属性,技术完全不需要它们.网页教学网通过在CSS中使用集成选择器(descendant select...
2020-02-24 20:23:14
1241
原创 html+css基础学习入门教程标记语言——网页应用CSS样式
现在要来探讨四种把CSS应用到文档上的不同做法,每个方法都有自己的优缺点,根据情况而定,四种方法都有可能是最佳选择.这边示范的每个方法都是用了合法的XHTML 1.0 Transitional 语法结构,<html>标签以及<head>配置.新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础...
2020-02-24 20:21:53
1222
原创 html+css基础入门教程标记语言——打印样式
讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看.网页教学网首先来看看media类型,以及它们与提供设备相关CSS的关系.如何指定打印时采用的样式?在回答这个问题之前,必须熟悉一个概念,那就是我们能为CSS指定媒体类型(media),声明媒体类型将能使样式针对特...
2020-02-24 20:20:01
893
原创 html+css基础入门教程学习标记语言——CSS布局
Chapter 12 CSS布局本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其他表格以便达成恰巧正确的间隔,视觉效果.这些庞大的排版内容不仅下载很慢,维护起来也很费心力,更别提文字浏览器,屏幕阅读器,小屏幕设备根本无法正确读取了.Webjx.Com在这一章内,将使用四种常见的做法,结合CSS于结构...
2020-02-24 20:17:56
821
原创 html+css基础入门学习教程标记语言——为文字指定CSS样式
Chapter 13 为文字指定样式我想以一章的篇幅来讨论用CSS设定文字样式的做法是个好点子.一般处理文字内容大概是应用CSS最多的地方,就算对没有完全遵守标准的网站来说也是一样.去掉网页中反复出现的<font>标签曾经是(现在也是)十分吸引设计者的事情,而且不难看出以CSS控制文字排印的巨大优势,也就是进一步分离内容和展示方式.Webjx.Com从先前的很多例子我...
2020-02-24 20:16:29
1301
原创 html+css基础入门学习教程标记语言——图片替换
Chapter 14 图片替换随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展着.网页教学网"图片替换" 可以说是这种变革的最佳范例,这是用CSS把普通文字置换成图片的技术.新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基...
2020-02-24 20:14:56
1400
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人