上一篇CSS教程 文章：CSS高级技巧:网页布局CSS阴影效果 (Drop Shadows)一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧.原理:给<img />标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把<img />利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果. 备用的阴影图像 shadow.gifHTML代码如下:<div cla...
#css2中的选择器 1.元素选择器 *通配符选择符、html类型选择符、id选择符、class选择符 2.关系选择器 E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器) 3.伪类选择器 E:link(链接伪类选择器-默认链接) E:visited(链接伪类选择器-点击过的链接) E:hover(用户操作伪类选择器-鼠标滑过) E:active(用户操作伪类选择器-鼠标点击) E:focus(用户操作伪类选择器-过去光标) E:lang()(:lan...
本文的目标读者是入门级Web前端开发人员。 本文介绍了CSS选择符表达式引擎的基本原理。CSS选择符引擎几乎是前端开发人员每天在使用的工具。本文将逐一介绍实现该引擎的各种策略。首先，我们介绍基于W3C标准API的方法。 W3C标准的Slectors API能够支持的平台： Safari 3+, Firefox 3.1+, Internet Explorer 8+, Chrome and Opera 10+两个最常用的方法：querySelector，该函数接受一个CSS选择符字符串，返回找到的第一个元素，如果没...
CSS样式position的一个小实例代码如下： 复制代码代码如下:<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS样式position的一个小实例：z方向三层布局-成功志(www.ok12.net)</title> </head> <body> <div sty...
知识点： 1.建立框架集的方法 2.在框架和窗口之间链接的方法 3.使用内联框架的方法13.1 什么是框架： 框架是浏览器窗口中的一个矩形区域，每个框架显示的是一个完整的页面。 作者不建议使用框架，原因： 1.框架与Web的基础概念冲突 /*什么概念？*/ 2.框架化的网站的打印部分非常困难。 3.如果框架爱缺乏合适的编码，或者有合适的编码但是被用于邪恶的目的，用户可能在框架化的网站中无法看到框架外部的...
#cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. – 调整宽度大小可以调节三角形形状. 2.矩形 设置盒子的宽高度, 及上下左右边框 div { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; bord...
1.box-shadow:0 0 0 1px #feaa9e,0 0 0 5px #fd696f 2.border:1px solid #feaa9e; outline:5px solid #fd696f; 原文：https://www.cnblogs.com/huanghuali/p/11450995.html
比较选择器优先级检验方法如下将所有选择器应用到一个超链接上，观察结果，得出结论。输出结果为，说明行间style的优先级是其中最高的。去掉行间style代码：输出结果：后代选择器生效，注释其代码，继续比较：得出输出结果，注释代码。得出输出结果。 从上面结果不难看出 行间style > 后代 > id > class > 元素那么为什么会是这样的结果呢，判断优先级，以权重为指标，权重越大优先级越高：一般约定 id选择器的权重为100，类选择器...
尺寸属性：用来控制元素大小的属性，单位为长度单位。尺寸属性的使用场景 当使用相对长度单位定义尺寸时，元素的大小跟随窗口大小变化。 为保证元素的正常显示，需要设定元素的最大、最小长度。 手机端开发时需要声明元素的最大或最小长度，pc端通常使用像素。 最大或最小长度应使用像素单位。例： 1<style type="text/css"> 2 div{ 3 border: 2px black solid; 4 width: 30px;/* 或者30%等 */ 5 height: ...
@font-face语法规则@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}说明：YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指...
1、实例源码<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3的[att*=val]选择器</title> <style type="text/css">[id*=div_border]{background-color:#9F6;width:110px;font-family:微软雅黑;font-size:18p...
<html><body><p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><span style="cursor:auto"> Auto</span><br /><span style="cursor:crosshair"> Crosshair</span><br /><span style="cursor:default"> Default</span><br /><span style="cursor:pointer"> Pointer</span><br /><span style="cursor:move"> Move</span><br /><span style="cursor:e-resize"> e-resize</span><br /><span style="cursor:ne-resize"> ne-resi...
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。因此，编写灵活、稳定、高质量的 HTML 和 CSS 代码，是每一个技术人员的基本操守。HTML************************************************************************语法用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次（即两个空格）。对于属性的定义，确保全部使用双引号，绝不要使用单引号。不...
columns属性columns属性是一个简写属性column-count属性:定义列的数量column-width属性:定义列的宽度 column-count属性用于设置列的数量或者允许的最大列数auto:默认值，用于表示列的数量由其他css属性决定number:必须是正整数，用于表示定义列的数量 column-width 属性用于设置列的宽度或者列的最小宽度auto:默认值，用于表示列的宽度由其他css属性决定length:必须是正整数，用于表示定义列的宽度 列的间距column-gap 属性用于设置...
1，向上的三角 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>border-radius</title> 6 <style> 7 div{ 8 width:0; 9 height:0;10 border-left:20px solid transparent;11 border-right:20px solid transparent;12 border-bottom:20px solid #ccc;13 }14 </style>15 </head>16 <body>17 <div>18 </div>19 </body>20 </html>2，向下的三角 1 <!doctype html> 2 <html> 3 <head>...