css

阅读 / 问答 / 标签

如何理解Css Specificity 除了浮动特性,CSS Specificity特性也是样式表中较为难理解的概念之一.在通常情况下,你认为一些应该应用到元素的CSS规则为何浏览器没有应用到.为了尽量花少时间去排错,你需要去了解浏览器是如何解释你的样式代码;另外,你还需要系统地理解CSS Specificity特性是如何工作的.类似此类问题大多数原因是在样式表中的另一个位置定义了更特殊的选择器.Css Specificity虽不简单,然而,还是有办法用简单直观地方式介绍它.Css Specificity概览Specificity特性决定哪些CSS规则应用于客户端浏览器.优先级是你的CSS规则通常应该不到一些元素的原因，包括你认为应该应用到的。每个选择符都有它自身的层级数。如果两个选择符属性同时应用于同一个元素，优先级高的生效。可分为四种明显的优先级类别：inline style,IDs,classes+attributes,elements如你喜欢星球大战的话可看看：CSS Specificity Wars如你喜欢纸牌游戏的话可看看：CSS Specificity for Poker Players当Speficity值相等时，后来选择符居上。当Speficity值不相等时，Speficity值高的选择符生效。越具体的选择符越有更高的优先级数最后的CSS规则将覆盖任何之前或冲突的CSS规则。嵌入式样式的Speficity值高于其它。ID选择符比属性选择符Speficity值要高。你可用IDs去提高选择符的Speficity值class选择符高于大部分的元素选择符The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.另外，!important规则高于一切，慎用；继承的样式属式不参与优先级数值计算，低于其它规则。因为每种选择符都有它自身的优Speficity值，下面看看具体的计算规则：Inline style(嵌入式样式)，即直接写在元素里面，加1,0,0,0，E.g. <h1 style=”color:#fff;”>IDs(ID选择符)，加0,1,0,0，E.g.#divclasses+attributes(Class选择符、属性选择符和伪类)，加0,0,1,0，E.g. .classes、[attributes]、:hover,#focuselements(每个元素或伪元素），加 0,0,0,1。E.g. :firstchildOthers(其他选择符），加 0,0,0,0。 E.g. * >如何计算Speficity值？记住如何计算Speficity值，“从0开始，加1000给style属性，加100给每个ID选择符，加10给每个属性选择符、Class或伪类，加1给每个元素名或伪元素。因此body #content .data img:hover的Speficity值就为：122(0,1,2,2 或0122)：100给#content ，10给.data，10给:hover，1给body，1给img.”另外可选择一种计算方式：计算每个ID选择符（=a），计算每个属性选择符(=b)，计算每个元素或伪元素(=c)，连接这三个值 a-b-c 即得出Speficity值。

css3动画有哪些实现方式？ css3动画有哪些实现方式？Transitions 、transforms和 AnimationsTransitions特点：平滑的改变CSS的值transforms特点：变换主要实现（拉伸，压缩，旋转，偏移）Animations特点：适用于CSS2，CSS3

如何使用JavaScript控制CSS Animations和Transitions $().css()

freemarker怎么引入css文件麻烦告诉我 先找到当前界面的上一级目录../css.css ：其中“../”指当前目录的上级目录,其中CSS文件为上上级目录中文件找到其他目录以此类推------解决方案--------------------------------------------------------这个{base}是你再模型中定义的，你没定义当然不可用了啊，假设你再freemarker模型中定义了一个变量叫 base，这个base是, request.getContextPath()，其中request.getContextPath()是你项目的根目录，;那么您的在ftl文件中引用css就可以通过<link rel=stylesheet href=${base}/css/您的.css这里base是您的项目根目录，css是项目根目录下的css文件夹。

freemarker怎么使用CSS样式表以及JS文件 html里边怎么用freemarker用，一样的

freemarker怎么使用CSS样式表以及JS文件 freemarker文件还是html代码占多数，即使是freemarker代码，也会经过服务器翻译成html代码返回到浏览器端，所以说，你可以在freemarker文件里，直接用html的语法引入CSS和JS。说白了，freemarker只是辅助你写html文件而已，你当做写html文件就行了，不用想那么复杂。如下代码，只有标记到的地方是freemarker语法，其余都是html语法<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>${webSite.title!}</title><script src="${base}/resource/plugin/require/require.js"></script></head><body><h1>欢迎您，${user.name}</h1><#include "body.html"></body></html>

css知多少（8）--float上篇_html/css_WEB-ITnose 1. 引言对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人??你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的??float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程《CSS深入理解之float浮动》，讲的很好很透彻。 2. 重新认识float 2.1. 误解和“误用”既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。这样一问大家，我想绝大多数用float都是为了??横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float??要不然你就用table。但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于??文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于SEO，然后发现float+div是一个很不错的排版解决方案，于是乎??过去几年“css+div”页面排版一直是一个热门话题，也是各种高大上的面试题必考的一项。初学float的同学，你如果没有从最基础的知识入手，而是从网络的零散之后或者同事同学的零散代码学起的话，你可能只知道float是用来排版的，但是你却不知道float的许多个特性，这就导致了你在使用float时的许多问题。不信请看下文。 2.2. 破坏性首先大家来看两个demo，如下图。第一个demo是一个简单不过的例子，显示效果也很正常。第二个demo，唯一的区别就在于加了float:left，上层的却出现了“坍塌”现象。不过，这就是float的“破坏性”??float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。初次接触“脱离文档流”的朋友可以这样理解：div是父亲，img是它的儿子，原本好好的父子关系，原本爷俩可以体面的展示一个包含关系的效果。直到有一天，img被设置了float。老天爷（浏览器）规定，任何float元素都不允许再呆在自己的家族中，于是img被逐出家门，断绝和div父子关系。于是乎，div没有了img儿子，也就不能再展示这种父子的包含关系，于是两者就各过各的，互不相干。??这样一说，容易理解了吧？但是，永远都不要忘记float被设计的初衷??实现文字环绕效果。当div中有文字时，文字还是会环绕在img周围的。如下图：好了，大家现在已经知道了float具有破坏性，可能也有很多朋友之前就知道这一特性，但是你有没有思考一下：float为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！其实原因非常简单??为了要实现文字的环绕效果？有人可能会问：啊？你刚才不是说了float的初衷就是实现文字环绕效果吗？和破坏性有啥关系？这时我会反问你：如果float不让父元素坍塌，能实现文字环绕效果吗？给你两个图看看你就知道了。看不明白的可以给我留言讨论。 2.3. 包裹性“包裹性”也是float的一个非常重要的特性，大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起：如上图，普通的div如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“王福朋”三个字包裹了??这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。说道这里咱们回顾一下，在之前的博客中，也提到了“包裹性”，是哪些样式？你可以在此思考一下，我会在博客的评论中给出答案。知道了包裹性之后，我们还是继续思考：float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？道理很简单，你也可能是那种一点即通的聪明人，但是关键在于思考。 2.4. 清空格float还有一个大家可能不是很熟悉的特性??清空格。按照管理，咱还是先举例子说明。上图中。第一个例子，正常的img中间是会有空格的，因为多个标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。如果大家之前没注意，现在想想之前写过的程序，是不是有这个特性。为什么float适合用于网页排版（俗称“砌砖头”）？就是因为float排版出来的网页严丝合缝，中间连个苍蝇都飞不进去。“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。（float内容比较多，咱们分上、下两篇来介绍，这是上篇。下篇将马上发出，敬请期待）-------------------------------------------------------------------------------------------------------------欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》也欢迎关注我的开源项目??wangEditor，简洁易用的web富文本编辑器-------------------------------------------------------------------------------------------------------------

css知多少（2）--学习css的思路_html/css_WEB-ITnose 两周之前写过该系列的第一篇，其实当时只是一个想法，这段时间迟迟未更新，是在思考一个解决过程。现在初有成效，就开更吧。 1．一个段子开题不必太严肃，写博客也不像写书，像聊天似的写东西是最好的表达方式。记得之前看过一个段子，也可能是一件真事儿，这不重要。大体内容如下：一个香港的教授说：我们香港的大学和大陆的大学差的很远啊，大陆的大学连看门保安都懂得哲学，因为当你想要进入校园时，保安都会问你一个很哲学的问题“你是谁，你从哪里来，你到哪里去？”。看完段子的第一反映肯定是很自嘲的笑了，笑了之后就忘了，该干嘛干嘛去了。但是我觉得这句话确实有那么一点高达上的意思，虽然我不知道什么是哲学。“你是谁，你从哪里来，你到哪里去”，如果映射到我们这次CSS教程上，可以提这么几个问题：CSS是什么，如何深入理解，它和html是个怎样的关系； CSS有几种来源（5种来源）； CSS要干什么事情，如何结合html实现的；看过我其他教程的朋友都知道我的原则：我要写东西，必须又一个我觉得很特别而且很合理、高效的思路，如果没有我宁可不写。大部分写CSS的人一上来可能写选择器，但是我不会那样。闲话不说。要想从根上了解这些问题，还是先从浏览器开始吧。 2．浏览器是如何工作的之前看过一篇文章，叫做《浏览器的工作原理：新式网络浏览器幕后揭秘》。文章言简意赅的介绍了浏览器的工作过程，web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》，笔者很早就关注这本书，已列入近期的读书计划。文章中的内容暂且不详细提，我们先“断章取义”的只说CSS相关的部分。上图是webkit内核渲染html和css的流程图。大家可以从图中看到，html的解析是一条线，css的解析是一条线，两者会在某一点结合，形成最终的视图。如果我们以CSS为重点看，从上图中我们可以总结出学习CSS的三个突破点。浏览器如何加载和解析CSS??CSS的5个来源； CSS和html如何结合起来??选择器； CSS能控制那些显示方式??盒子模式、浮动、定位、背景、字体等；看到这里，不知道有没有朋友觉得很兴奋？因为我们在学习CSS之前，首先是分析浏览器如何加载、处理、使用CSS的，我们按照这个思路去写CSS的教程。而不是一上来就照本宣科的从id选择器开始。我这段时间为何一直没有写博客，其实是在冥思苦想一个更加合理、高效的思路和框架。我如果写出来的东西和别人的一样，那我自己也觉得没意思。本系列文章也是按照这个思路和框架，一步一步展开的。 3． CSS的加载过程CSS??Cascading Style Sheets??层叠样式表。“样式表”大家比较好理解，那何为“层叠”呢？从字面意思来看，层叠肯定是需要多层叠加起来。而这个“多层CSS”到底有几层，每一层是什么，我们程序猿用到的将是哪些层？这几个问题将是我们讨论的重点。另外，这么多层次叠加，如果出现冲突怎么处理，以哪个为准？这也是我们讨论的重点。最后，在这些层次中有一个“浏览器默认样式”层，即浏览器默认的各个html元素的样式。这次我们像浏览器这位“机器人”学习一下，看看它写出来的css能给我们什么帮助。 4． CSS和HTML的结合CSS如何与html结合呢??当然是通过选择器。CSS提供了多种多样的选择器类型，而且每个级别都在不断的增加新的选择器类型，使得选择器更加灵活易用。本系列将拿出一篇文章专门讲解选择器。聪明的人类也通过css提供的选择器在其他临近的方面开疆拓土，例如jquery，zen-coding。对css选择器来说，有一个很重要的话题??级别。在大部分web前端面试题中，你都会看到css选择器级别的判断问题。《css设计指南》书中给出了一个概念??特指度，而且给出了计算公式和计算规则，还给出了一个简单的背诵口诀。想的真周到。最后，与选择器关联密切的还有伪类和伪元素，我们也将拿出一篇文章专门讲解伪类和伪元素，以及它们最典型的用法。 5．页面呈现页面呈现可以分为两类??文字，块。针对文字来说，我们可以设置字体、字号、加粗、斜体、背景色等等；对于块来说情况比较多，有盒子模型、浮动、定位、display、背景等；本系列会拿出很大的篇幅去讲解其中的基础知识，以及他们的一些重点应用。 6．布局布局是css的重头戏，每个系统的布局都有其各自的特点。无好无坏，肯定是各有优缺点，不妨拿出几个比较典型的例子来一起分析一下。例如：经典三列布局 Bootstrap栅格布局百度首页布局微博布局人人网布局瀑布流布局??7．下一步下面的文章将会一步一步展开本文的描述，从实例和代码中慢慢道来。继续期待吧！-------------------------------------------------------------------------------------------------------------欢迎关注我的微博。也欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》-------------------------------------------------------------------------------------------------------------

css知多少（5）--选择器_html/css_WEB-ITnose 1. 引言从本节开始，就进入本系列的第二个部分??css和html的结合??说白了就是选择器。CSS中定义了样式，如何将这些样式设置到相应的html节点上？就不得不通过选择器。让浏览器知道css选择了哪一个dom节点，浏览器就会乖乖的把相应的样式渲染成视图。至于css能把页面渲染成什么样子，这是本系列的第三部分。第一部分讲css样式的加载和层叠，第二部分讲选择器以及选择器的等级，第三部分讲呈现的各种样式（背景、字体、定位、浮动等）。这样一个思路，也正式浏览器使用css的流程，是最有效的学习思路。（第二节中讲过，此处再回顾一遍） 2. 选择器说道css选择器，大家都知道有许多种，但是真要你去掰着手指头数一数的话，你可能需要数几分钟。其实这么多选择器，完全可以分为两类：标签选择器（*是特殊情况），可但标签，也可上下文多标签；属性选择器（id和class都是属性，特殊的属性）；2.1. 标签选择器 2.1.1 通用选择 *通用选择器 * 大家应该都比较熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱们在上一节已经说过，box-sizing:border-box将在后面的盒子模型那块再详细描述。例如，我们在检测bootstrap3的样式时，也可以看到它用到了 * 选择器： 2.1.2 单标签单标签选择器是最基础的css知识了，在上一节的浏览器默认样式中，到处都用了单标签选择。这里不再赘述，css基础薄弱的朋友，可以先去补补课。 2.1.3 多标签多标签选择器一般和html上下文有关，它有以下集中分类选择一个祖先的所有子孙节点，例如 div p{?} 选择一个父元素的所有直属节点，例如 div > p{?} 选择某一个元素紧挨着的兄弟节点，例如 li + li{?} 选择某一个元素的所有同胞节点，例如 span ~ a{?} 以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）给大家列举一个比较典型的应用，如下图上图中的效果应该比较常见，在各个菜单之间加下划线。我之前的实现是：每个li都加一个border-bottom，在把最后一个li的border-bottom去掉。其实完全没必要这样麻烦，下面一个样式设置即可解决：有点意思吧？ 2.2. 属性选择器 2.2.1 特殊1：id选择器基础知识，不再赘述。按照许多css教程上讲的，id选择器和属性选择器是不同的两个类别，为什么要把id选择器放在属性选择器下面的呢？因为css选择器是根据html节点的特性来设置的，id也是一个属性，只是它是一个比较特殊的属性，每个html节点的id不能重复。由于特殊，而且比较常用，所以就单独给id选择器一个“#”，本质上就是一个属性选择器。下面两行代码的执行效果完全相同： 2.2.2 特殊2：class选择器基础知识，不再赘述。class也是一个特殊的属性，之所以把它放在属性选择器下，和上文将的id一样。 2.2.3 属性选择器属性选择器有两种情况：只通过属性名选择：img[title]{? } 通过属性名和属性值选择：input[type="text"]{?}这两个也是比较基础的，再次也就不再详细展开了，不了解的朋友可以去看看基础教程补补课。 3. 伪类和伪元素上文提到了若干种选择器类型，伪类和伪元素可针对任何一种选择器使用。 3.1. 伪类伪类分为UI伪类和结构化伪类。 3.1.1 UI伪类UI伪类都比较简单常用，我下面简单写几句代码，就不再详细说了。 3.1.2 结构化伪类（IE低版本不行）先问大家一个问题：如何实现一个表格间隔显示背景颜色，如图：最简单的方式莫过于使用结构化伪类，一句样式设置即可实现。结构化伪类有如下书写选项，至于什么意思，从字面意思即可理解： 3.2. 伪元素记住，伪元素是一个非常重要的概念！其中，:before和:after 非常常用。首先，咱们先看看:before和:after是怎么回事儿。上图中，我们可以看到，可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式，如下图：另外，除了可以添加内容外，你还可以自定义执行内容的样式，如下图：以上大体了解了两者的基本用法，下面给家介绍两个典型的应用场景：第一，大家都知道fontAwesome吧，web最流行的icon字体库。这些小图标的应用就是通过伪元素来实现的，如下图：（不知道fontAwesome也没关系，我们在讲到css字体时，会详细介绍）第二，清除浮动的样式大家都知道吧？这就是一个很典型的伪元素应用场景：（在讲到css浮动时，会专门讲解clearfix） 4. 选择器的扩展选择器本来是css的一种规则，用于为css选择html节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。 jQueryjQuery被推广流行的根本原因就是它的“Query”??基于css选择器的“Query”。现在的浏览器都支持querySelectAll()方法了，其实这就是W3C“抄袭”的jQuery的设计。相信各位web前端人员对jquery都比较熟悉了，这里点一下即可。 zen-Codingjquery可以通过一段css选择器表达式从既有的html结构中选择符合表达式的dom组，但是zen-coding反其道而行之??可以根据css选择器表达式创造出html节点。不得不佩服这帮人的创造力。如果你还没用过zen-coding，无论你以后用不用，建议你也一定要去体验一下！ 5. 总结本节总结了css的选择器知识，知道了选择器有若干种类型。但是类型多了不一定是个好事儿，下一节就给大家说说类型太多带来的一个问题，以及解决方案。-------------------------------------------------------------------------------------------------------------欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》也欢迎关注我的开源项目??wangEditor，简洁易用的web富文本编辑器-------------------------------------------------------------------------------------------------------------

css知多少（1）--我来问你来答_html/css_WEB-ITnose

1. 引言各位前端或者伪前端（比如作者本人）的同志们，css对你们来说不是很陌生。比如我，在几年之前上大学的时候，给外面做网站就用css，而且必须用css。这样算下来也得六年多了，有些功能可能轻车熟路，有些功能可能需要上网查查，看似能应付得了工作的事情??我之前也是（现在工作上不做开发了，只是业余还写代码）。世界上没有绝对简单的东西，只是我们认为它是简单的。就像我们公司现在的开发情况，开发的大环境刚刚转入B/S，开发领导以前都是用.net做C/S的，在我看来，他们就觉得js、css就是那么回事儿，没多高深。但是我还是抱着敬畏的态度，买了一本《CSS设计指南（第三版）》，不管自己会的，还是不会的，我都统统看一遍。书邮回来之后，我花了三个晚上看完了。我有个习惯，就是做一件事情一定要又一个结果，不能觉得自己脑子里明白了就算了，一定要写出来，甚至做出例子来才算完。于是乎，就写几篇博客呗。利己利人。下面我把在看书过程中遇到的自己认为比较重要的（掌握不牢固）或者之前不懂的，都先列出来，出几个题目，各位看官可以试着想想。如果您都会了，那您基础很牢固，没得说；如果你有些不会的，着急你就赶紧自己查查答案，不着急你就等着我后面的博客介绍。闲话说了很多，现在开始！ 2. 问题01. 有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？提示：Mo****zr02. 常用的html标签，它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline，这些标签显示的时候和block/inline有何区别？提示：table，input, textarea03. 是否用过@import？（比较简单）04. 一个表格的第一行显示红色背景，最后一行显示蓝色背景，中间行使用灰色/白色间隔的背景，如何写？提示：结构化伪类（比较简单）05. 伪元素 ::before、::after 是否用过？都是在哪些地方用的？提示：清除浮动、为一个div增加一个“三角” 重要 06. css??层叠样式表，其中的“层叠”该如何理解？重要提示：层叠，即一层一层叠加起来，关键是知道一共有几层，每一层都是什么07. 对“特指度（specificity）”了解多少，知道“I-C-E”的计算规则吗？重要提示：参考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html08. 特指度理解不是很麻烦，关键是分析多个css选择符和计算麻烦。有一个简单的解决方案，四句口诀，叫做“查理版简单层叠要点”，是否了解？重要提示：例如，“包含ID的选择符要胜过包含类的选择符...”09. 搜索“浏览器默认样式”，找到它，打开看看，里面是浏览器默认的所有样式，你是否都能看得懂。重要提示：例如 display:table 和 display:block 有何区别？10. 在你开发的系统的第一个css文件的第一行，就要写上 * {margin:0; padding:0} ，这是为何？提示：浏览器兼容性（比较简单）11. 样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少？提示：垂直外边距??水平外边距????比较简单的基础知识12. “盒子模型”大家都了解了（不知道赶紧去恶补！！），盒子模型的width其实是指内容的宽度，不包括padding、border、margin。其实这样对我们做css布局是很不利的，有什么方法可以让width是全部的宽度？重要提示：box-sizing（注意IE低版本的兼容性）13. float的一些影响会让我们经常哭笑不得（特别是初学者），其实了解了float的设计初衷，也许你就会理解这些东西。float的设计初衷是什么？提示：就简单的一句话??14. float具有“包裹性”??例如：abc 和 abc 两者的宽度是不一样的，不信可以为 p 加上背景色试试。是否理解这种“包裹性”？试着想想，还有哪些元素（或css属性）也有这种“包裹性”？重要提示：和第13问题有密切关系15. float还有一个表象是“破坏性”，它会导致父元素高度塌陷，这个大家应该都知道吧？那么这是为何呢？另外，还有哪个css属性，也导致这种“破坏性” 重要提示：float和absolute都将导致元素脱离文档流（针对13、14、15问题，可以参考教程http://www.imooc.com/learn/121和http://www.imooc.com/learn/192，讲的很好，只是讲师的声音很有“磁性”，要忍耐住）16. css清除浮动有三种方法，是否知道。你平时是怎么清除浮动的？业内最常用的经典清除浮动样式是什么？重要提示：搜索“clearfix”17. 相对定位relative如何理解，它和绝对定位absolute的最根本区别是什么？提示：一个在文档流内，一个在文档流外18. “定位上下文”是否知道？重要 19. 经典的网页三列布局如何实现？如果不考虑IE6、7，最好的实现多列布局的方式是什么？重要提示：table-cell20. 是否用过inline-block，IE6、7如何兼容？提示：比较简单，百度即可 3. 结束当前就总结了这么多问题，大家可以对照着问题想想答案。如果你觉得还有写比较重要的知识，可以给我留言，我将会考虑加入进来。另外，接下来我将写一个关于css重点知识的简短的系列文章，以及结合我做过的wangEditor富文本框以及对bootstrap框架的了解，把本文这些问题介绍一下。近期工作很忙，更新起来可能会很慢，敬请期待吧！-------------------------------------------------------------------------------------------------------------欢迎关注我的微博。也欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》-------------------------------------------------------------------------------------------------------------

css知多少（7）--盒子模型_html/css_WEB-ITnose 1. 引言从这一节开始，我们就进入本系列的第三部分??css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。第一类??文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值，这些东西在《css知多少（4）??解读浏览器默认样式》那一节已经说过了。另外还有一个重点，就是web端最流行的字体库fontAwesome，关于它我之前有一篇文章专门讲过，请参见《请用fontAwesome代替网页icon小图标》，这里就不再重复去讲了。第二类??块。这部分的知识点非常多，重要的有：盒子模型，float，position，display。本文章讲盒子模型，后面的文章会依次介绍其他的内容。 2. 什么是“盒子”说道“盒子”我还记得好几年之前，我还在上大学的时候，被人问道过“盒子模型”，我当时都不知道什么意思。回到宿舍急忙上网去查，原来就是我早就知道的margin，padding和border，但是我竟然不知道“盒子”这个词。??所以，不要只满足于网上查来的代码段、小技巧，要全面的了解一些知识体系。当然，后来我又知道，盒子模型不仅仅是margin，padding和border，还有其他的知识。在此插一句题外话，也是我这几天思考的一点东西。我在思考：web前端的这么知识应该是怎样的一个知识体系架构？之前我以为可以以W3C为纲要，把W3C的东西学会了就够了。后来发现我错了，W3C还不全面。真正全面的覆盖了web前端知识体系的东西是??浏览器内核??这并不是说让你去详细了解浏览器内核、做出一个浏览器。浏览器是web前端代码运行的一个平台，浏览器内核里有哪些模块，我们就需要去学习哪些东西。详细的先不说，以后有机会再分享。这里照顾一下初学者。初学css的朋友，一开始学css基础知识的时候一定学过padding，border和margin，即内边距、边框、外边距。他们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一个小小的iphone，收到的确实那么大一个盒子。因为iphone白色的包装盒和iphone机器之间有间隔层（内边距），iphone白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。如上图，真正的内容就是这些文字，文字外围有10px的内边距，5px的border，10px的外边距。看到盒子了吧？ 3. 盒子的宽度 3.1. 设置了固定宽度的情况下遇到这种问题，我建议在查询各种资料之前，不如先自己动手做一个实验：如上图，得到网页效果之后，我们可以用截图工具来量一下文字内容的宽度。发现，文字内容的宽度刚好是300px，就是我们设置的宽度。因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。没关系，这个东西不友好早就有人发现了，而且已经解决，下文再说。 3.2. 充满父容器的情况下默认情况下，div的display:block，宽度会充满整个父容器。如下图：但是别忘记，这个div是个盒子模型，它的整个宽度包括（内容宽度 + border宽度 + padding宽度 + margin宽度），整个的宽度充满父容器。问题就在这里。如果父容器宽度不变，我们手动增大margin、border或padding其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。 3.3. 包裹内容的情况下这种情况下比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和。 4. 再看盒子的宽度前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box如上图，div设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。建议大家在为系统写css时候，第一个样式是：大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，我们为什么不这样做呢？ 5. 纵向margin的重叠这里提到margin，不得不提一下margin的这一特性??纵向重叠。如下图，的纵向margin是16px，那么两个之间纵向的距离是多少？按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”（可以自己去实验）。 6. 用div画“三角”“三角”在日常的网页中是很常见的，例如百度首页：以及我的开源项目wangEditor（http://www.cnblogs.com/wangfupeng1988/p/4198428.html）中的页面效果：你当然可以使用背景图片、fontAwesome来实现这一效果，但是你也可以用div来实现这一效果，很简单，而且可以封装通用： 7. 总结这一节我们用不小的篇幅讲解了盒子模型的相关知识，比较适合初学者，但是更加适合那些没有系统学习过css的有经验的开发人员，还是那句话：建议大家系统的学习知识体系。下面我们将继续这一部分，再说一说float。-------------------------------------------------------------------------------------------------------------欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》也欢迎关注我的开源项目??wangEditor，简洁易用的web富文本编辑器-------------------------------------------------------------------------------------------------------------

《css知多少》系列完结_html/css_WEB-ITnose 《css知多少》系列就此完结了。常来光顾的朋友可能会觉得突然：css的知识点还有很多，怎么突然就完了，还没讲完呢？这样说是对的。不过凡事都有一个定位，如果盲目求多，定位模糊，那样就没有目的没有方向了。我的身份不是前端开发人员，而是产品经理。我规划的产品是一款项目管理软件，我也是一个PMP。我深知一个项目一定要有目标、范围、进度和质量要求。一旦达到，项目即可结束，准备下一个项目的启动。我接下来，要继续优化我的富文本编辑器wangEditor。还要把我之前写的《深入理解javascript原型和闭包》做一次修订，录制成视频教程。另外，我还想录制一个MS Project的使用教程，发挥一下我PMP的作用。Project是一款非常强大的项目进度管理软件，但是真正能用得好的项目经理，并不多。闲话不扯，书归正传。《css知多少》的读者建议是了解css基础知识（或者刚刚入门），但是没有系统学习、归纳、总结过的人，还有那些整天忙于coding、bug、加班当饭吃的，而没有时间去看书学习的码工们。《css知多少》里虽然内容不多，但是都是我觉得应该讲的基础，那些不需要讲的基础我就没有讲。所以，如果你是css大牛，那你不必看了（来给我指正一下我也欢迎啊！）；如果你css都没有入门，那你也不用看了，我是从来不会写入门教程的。我的经历告诉我：学习有捷径。学习的捷径之一就是多看看别人是怎么理解这些知识的。举两个例子。如果你喜欢《水浒》，千万不要只读原著当故事看，一定要读一读各代名家的批注和点评，看他们是如何理解的。之前学C#时，看《CLR via C#》晦涩难懂，但是我又通过看《你必须知道的.net》而更加了解了。因为后者就是中国一个80后写的，我通过他对C#的了解，作为桥梁和阶梯，再去窥探比较高达上的书籍和知识。??《css知多少》也是一样的。最后，真诚的希望你能借助别人的力量来提高自己。我也一直在这样要求我自己。该系列目录如下：css知多少（1）??我来问你来答 css知多少（2）??学习css的思路 css知多少（3）??样式来源与层叠规则 css知多少（4）??解读浏览器默认样式 css知多少（5）??选择器 css知多少（6）??选择器的优先级 css知多少（7）??盒子模型 css知多少（8）??float上篇 css知多少（9）??float下篇 css知多少（10）??display css知多少（11）??position -------------------------------------------------------------------------------------------------------------欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》也欢迎关注我的开源项目??wangEditor，简洁易用的web富文本编辑器-------------------------------------------------------------------------------------------------------------

css中怎么样才能使内容在div的底部中间 首先，不清楚你这个底部中间是什么意思比方说如果就是在底部，用margin-bottom就行。

css / js 控制文本溢出省略号显示 <!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文字截取</title> <style type="text/css"> body{font-size:13px;color:#8c966b;} div{clear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;} div a{color:#8c966b;text-decoration:none;} div a:hover{text-decoration:underline;} div a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left; -o-text-overflow: ellipsis; /* for Opera */ text-overflow:ellipsis; /* for IE */ } div:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */ </style> </head> <body> <div><a href="">用css来实现自动截取文字，不需要后台程序和JS的使用</a></div> <div><a href="">好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。</a></div> <div><a href="">不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div> <div><a href="">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></div> </body> </html>

什么是HTML5和CSS3 就是html+css的最新标准。就好比 Windows10，是一个意思。

css+div布局英文模版,将导航改为中文的,在浏览器就不能显示了,这问题怎样解决 注意编码转换

css怎么让两张图片叠加，不用background只用img叠加 可以使用绝对定位实现。首先创建一个父容器div，设置div的position为relative。然后在容器中创建两个img标签，分别展示两张图片，并且设置img的position为absolute；这样两个img就会根据div的左上角来显示了，然后可以通过设置top，left的值来调整图片的展示位置。

谈谈一些有趣的CSS题目（三）--层叠顺序与堆栈上下文知多少 开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。所有题目汇总在我的 Github 。3、层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结构如下： #divA display:inline-block #divB float:left它们的 CSS 定义如下：.container{ position:relative; background:#ddd;}.container > div{ width:200px; height:200px;}.float{ float:left; background-color:deeppink;}.inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px;}大概描述起来，意思就是拥有共同父容器的两个 DIV 重叠在一起，是 display:inline-block 叠在上面，还是float:left 叠在上面？注意这里 DOM 的顺序，是先生成 display:inline-block ，再生成 float:left 。当然也可以把两个的 DOM 顺序调转如下: #divB float:left #divA display:inline-block会发现，无论顺序如何，始终是 display:inline-block 的 div 叠在上方。Demo戳我。这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：运用上图的逻辑，上面的题目就迎刃而解，inline-blcok 的 stacking level 比之 float 要高，所以无论 DOM 的先后顺序都堆叠在上面。不过上面图示的说法有一些不准确，按照 W3官方的说法，准确的 7 层为：the background and borders of the element forming the stacking context.the child stacking contexts with negative stack levels (most negative first).the in-flow, non-inline-level, non-positioned descendants.the non-positioned floats.the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.the child stacking contexts with positive stack levels (least positive first).稍微翻译一下：形成堆叠上下文环境的元素的背景与边框拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）正常流式布局，非 inline-block，无 position 定位（static除外）的子元素无 position 定位（static除外）的 float 浮动元素正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）拥有 z-index:0 的子堆叠上下文元素拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）所以我们的两个 div 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。不过！不过！不过！重点来了，请注意，上面的比较是基于两个 div 都没有形成堆叠上下文这个为基础的。下面我们修改一下题目，给两个 div ，增加一个 opacity:.container{ position:relative; background:#ddd;}.container > div{ width:200px; height:200px; opacity:0.9; // 注意这里，增加一个 opacity}.float{ float:left; background-color:deeppink;}.inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px;}Demo戳我。会看到，inline-block 的 div 不再一定叠在 float 的 div 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 div 会叠在先添加的 div 之上。这里的关键点在于，添加的 opacity:0.9 这个让两个 div 都生成了 stacking context（堆叠上下文）的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。那么，如何触发一个元素形成堆叠上下文？方法如下，摘自 MDN：根元素 (HTML),z-index 值不为 "auto"的绝对/相对定位，一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，opacity 属性值小于 1 的元素（参考 the specification for opacity），transform 属性值不为 "none"的元素，mix-blend-mode 属性值不为 "normal"的元素，filter值不为“none”的元素，perspective值不为“none”的元素，isolation 属性被设置为 "isolate"的元素，position: fixed在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值-webkit-overflow-scrolling 属性被设置 "touch"的元素所以，上面我们给两个 div 添加 opacity 属性的目的就是为了形成 stacking context。也就是说添加 opacity 替换成上面列出来这些属性都是可以达到同样的效果。在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。意思就是父元素的 z-index 低于父元素另一个同级元素，子元素 z-index再高也没用。理解上面的 stacking-level 与 stacking-context 是理解 CSS 的层叠顺序的关键。所有题目汇总在我的 Github ，发到博客希望得到更多的交流。到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

CSS堆叠上下文（The stacking context） 堆叠顺序（stacking order）：HTML 内元素发生层叠的时候的特定垂直顺序,即元素在用户视线方向上的顺序。一般而言，div 以内在层叠顺序上对于视觉有影响的一般有以下几个：接下来，我们一个一个来测试一下他们的堆叠顺序。在日常写页面中，很大可能是这样的：一个 div 元素内有一个 background 和一个 border，它们两者是分开的吗？现在，将该 div 的 border 颜色改为半透明从上图可以看出来，内联元素和块级元素的堆叠顺序都是大于 background 的，那么他们与 border 相比较呢？想办法把这两个元素移动到与 border 相覆盖，就可以知道他们的堆叠顺序。往两个元素上分别加一个 margin-left：-10px; 可以知道，内联元素和块级元素的堆叠顺序都大于 border 的堆叠顺序。那么这两者之间的堆叠顺序呢？再往块级元素上加一个 margin-top:-10px; 先加一个浮动元素，背景色为蓝色。现在，先测试一次，蓝色的浮动元素与目前已知的最高级的内联元素哪个堆叠顺序比较大。给浮动元素加一个margin-top:-60px; 依然是加一个定位元素依然是加margin-top:-50px; 可以看到，position:relative; 的元素直接盖住了目前已知最高等级的内联元素，说明 position:relative; 的元素的堆叠顺序比内联元素的要大。接下来看一下 position:absolute; 将上面 position:relative; 改为 position:absolute; 从图片可以看出结果是一摸一样的，说明 position:relative和 position:absolute; 有一样的堆叠顺序。所以：定位元素 > 内联元素 > 浮动元素 > 块级元素 > border > background 首先要知道，z-index 生效的前提是该元素是 position 属性值是非static的元素，此时的 z-index为 auto。再添加一个元素，使它的 z-index生效接下来，继续给一个margin-top：-40px; 可以看到，橙色元素完全被盖住了。修改一下margin，试着让它显示出来。可以看到，即使不加margin负值，依然看不到。设置margin-top:70px; 可以看到，橙色有一部分被背景盖住了，说明: 综合上面所有内容，元素的堆叠顺序就出来了。就是下面这个：上面的顺序，越大的离用户越近。堆叠上下文：stacking context，类似与作用域，由不同的CSS属性造成的一类具有相同特征的东西，并没有特定的概念。堆叠上下文影响的是元素 CSS 属性中的 z-index，父元素是否是堆叠上下文，对具有z-index属性的子元素的堆叠顺序有影响。文档中的层叠上下文由满足以下任意一个条件的元素形成：接下来看一下堆叠上下文对 z-index 的影响：首先创建一个父元素的 div 作为容器，然后添加两个子 div ，两个子 div 里分别添加一个子 div 接下来，使用 CSS 添加样式，此时页面内有一个堆叠上下文=》html 元素接下来给 bbb 添加一个 z-index:1;并使它移动到 aaa 的位置。页面并没有变化，那么这时候修改一下 aaa 和 bbb 的z-index 大小呢？将 aaa 的 z-index 改为2 接下来让 parent 元素形成堆叠上下文,并给 a 和 b 一个负z-index 部分参考自：

css层叠规则 之前只是认为z-index只是简单的值越大就越靠近观察者，越在上层。直到今天因为面试才发现不是这么简单的。在css世界中z-index属性只有和定位元素（position不为static的元素）在一起的时候才起作用，可以是整数或者负数。理论上，数值越大层级越高，但实际上其规则要复杂的多。但随着css3的到来，flex盒子的子元素也可以设置z-index属性。要知道网页中绝大部分并不是定位元素，并且影响层叠顺序的不止z-index一个，z-index只是css层叠规则中的一叶扁舟。所谓的层叠规则是指的当前网页中的元素发生层叠时的表现规则。层叠上下文（stacking context）：是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。层叠水平（stackinge-level）：决定了同一个层叠上下文中元素在z轴上的显示顺序。所有的元素多有层叠水平，包括普通元素，包括层叠上下文环境。层叠顺序（stacking order）：表示元素发生层叠时有着特定的垂直显示顺序，层叠规则。默认的堆叠规则，即不含有 z-index 属性时：对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位元素与定位元素之间： z-index属性的值只能是整数（正负均可）在下一个例子中，所有的层都是用z-index进行排序的。元素div#5 的z-index无效，因为他没有被指定position属性在之前的[增加 z-index] 的例子中, 某些 DIV 的渲染顺序是由 z-index 的值影响的。这是因为这些 DIV 具有使他们形成一个层叠上下文的特殊属性。在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

[译]如何为Web应用的性能打包_html/css_WEB-ITnose 原文： Packaging for Performance 杰微刊兼职译者缪晨翻译，杰微刊审校及发布。最近有个很有趣的主题，是关于web应用的静态资源（JS/CSS）打包的。在当今前端界Craig Silverstein"s 和 Rebecca Murphey"s 在这个主题上的几篇文章表现出了对打包本质的深刻理解。现在面对的主要问题是：JavaScript与CSS的打包策略（基于现有最佳性能的实践）在迁移到HTTP/2的时候是否需要做一些改变？虽然在HTTP/2中打包的作用——减少HTTP请求数，变得毫无作用，但实际上我们还没有迁移到HTTP/2。以上的几篇文章证明了这个事实。在eBay 几个月前准备将网站迁移到到HTTPS时做过类似的测试。在这篇文章当中，我将简单介绍下我们打包的方法，以及我们的方法对性能的提高。 eBay的绝大多数页面遵循一个本地模板来打包静态资源。一个页面中的所有CSS跟JavaScript都被各自打包成一个资源，CSS在head标签中加载，而JS在底部加载。虽然这在减少HTTP请求数上做的很好，但依然有可挖掘的空间——最主要的一点是更有效的利用浏览器的缓存。当用户访问eBay的页面时，所有没访问过的页面都需要下载整个JS与CSS，但其中包含了前面页面中用过的核心类库（如jQuery）。当我们计划迁移到HTTPS（和HTTP/2）时，我们意识到这种粗粒度的打包策略是不行的。我们及其他人的研究都表明，这种整个打包在一起再每个页面单独加载资源的方式，在性能的优化上并不好。我们需要一个平衡，这时我们提出了我们自己的打包解决方案。 Inception 我们首先标注出了所有eBay页面都会调用的核心JS和CSS，然后把他们聚合为一个资源。为了达到这个目的，我们建立了个内部的Node.js 模块，叫做Inception。这个模块包含了所有公用的JS和CSS模块，而且会被所有团队（eBay各个页面的所有者）作为依赖添加。被标注的核心JS类库为：jQuery， marko （模板引擎）, marko-widgets （UI 组件抽象），以及内部的分析及跟踪类库。而CSS我们有我们自己的类库叫做Skin，从中我们提取了core、button、icons、dialog和form等模块。在eBay我们使用的打包工具叫作 Lasso。Inception模块作为Lasso的插件提供以下功能： 1、强制所有模块（购买，售卖，浏览，结算等）遵循准确的核心JS和CSS库的版本。不遵循话会构建失败。 2、将Inception 中的资源打包成一个URL，所有的模块都引用相同的URL，例如：inception-hashcode.js 和 inception-hashcode.css. 3、使各团队依然可以将Inception中的JS/CSS 作为他们自己模块依赖的一部分进行引用。Lasso的优化器会删除重复的加载，并确定只有一份会被发送到浏览器端。由于两个原因这个功能好到爆。首先，我们想要推广模块级的封装，因此当团队构建模块时，他们可以自由地将某个核心库作为依赖添加，而不必担心重复加载。这样可以保证这个模块可以独立运行。第二，各团队不需要追踪依赖是否在Inception当中。他们可以随意的添加依赖，工具可以处理这方面的优化。现在有了Inception，我们可以看下我们得到的好处： 1、浏览器缓存：关于将所有资源打包进一个URL，上文提到了一个缺点，就是不能很好的利用浏览器缓存。Inception解决了这个问题。因为核心的JS和CSS类库（顺带一提，这是主要的负荷）在不同的模块上都采用同一个URL进行引用，这样在用户各种浏览eBay的过程中，浏览器缓存都被很有效的利用了。这个缓存大大提升了性能，特别是连接缓慢的情况下。附带的，新的浏览器通过各种方式支持代码缓存，这样我们同时可以避免对Inception中的大量的JS进行重复的解析与编译。 2、库文件一致性：在之前的打包系统中我们发现在各个模块中核心类库的版本缺乏一致。由于各个团队维护自己的核心类库，例如当用户从一个模块跳转到另一个的时候，使用了不用版本的jQuery或者按钮样式。实际结果并不只是UI不一致，而且实现也是不一致的。Inception修复了这个问题，因为它是一个统一维护核心类库的地方。 3、通向先进的Web应用：当所有模块中的页面依赖于相同的核心类库时，他们支架你的过渡就变得非常容易，因为在浏览过程中只有这个应用单独需要的JS和 CSS需要下载。这样我们就可以使用应用壳架构来构建我们的web应用，为将eBay建设成为一个先进Web应用铺平了道路，我们过去已经（在一个模块中）探索过一个类似的途径——使用 Structured Page Fragments 的方法，我们可以看到感知性能的明显提升。 4、简单的升级方式：最后，Inception使我们可以在一个核心的地方将核心类库升级到一个更新的版本。Inception本身遵从语义化版本，因此所有使用Inception的团队Inception 都可以根据一个语义的方式来获得更新。升级在之前是很有问题的，因为我们必须在挨个团队进行手工升级。模块现在核心类库已经由Inception来管理了，那页面中的其它资源呢？就是那些应用/模块中特定的CSS和JS。对于每个模块我们采用另一种打包的方式，我们把分为两组：常量和变量。常量：在所有的请求当中不变的CSS和JS 被定为常量。这些主要适用于各个模块中在不同的请求参数时不变的UI组件。常量模块打包成一个资源，这样又可以继续利用浏览器缓存。当一个用户重复浏览同一个页面的时候，这个包一般都会命中浏览器缓存，进而获得性能上的优势。变量：一小部分资源在各个页面中会根据请求的参数不同而变化。这些变化是由于实验，用户登录状态，业务逻辑等原因。这种资源被分入变量组，在运行时单独打包。这些只有极低的缓存命中率，可能每个会话都要通过网络重新下载。总结作为总结，每个页面会有6个资源包（3个JS和3个CSS），每个包都有各自的用途。所有的URL都根据内有进行哈希，这样缓存会自动过期。 1.Inception —打包核心JS和CSS，最高的负载。 2.常量 —打应用中包不变的CSS和JS。中级的负载。 3.变量 —打包应用中变化，最低的负载。现在的状态下，这个打包策略貌似是最符合性能需求的。他在HTTP请求次数与浏览器缓存之间找到了一个正确的平衡点。明年我们将迁移到HTTP/2，我们也将继续改进这个方法，尝试更细粒度的打包方案，当然，性能是关键。 ------------好久不见的分隔线------------ 杰微刊旨在分享优质的内容。我们水平有限，但理想高远。也同样期待有理想的您对这个世界的贡献。欢迎任何目的的联系。欢迎关注杰微刊

joomla 2.5 的问题，我用的T3模板怎么改注册表单的CSS样式，还是有一些基本的问题 同上，或者可以去看下/templates/对应的T3template/html/com_users/registration/default.php至于CSS，你可以先直接写在/templates/对应T3template/css/template.css里

什么是 Joomla css类后缀 Joomla css类后缀是指CSS的class类选择器，Joomla的这个功能允许在不修改源文件的情况下为模块和菜单添加额外的class，以方便灵活的控制网页的样式。

exchange邮件用owa(outlook web ascss)可以打开，outlook 2003的显示连接不到服务器 用nslookup命令查一下

php动态生成html标签与CSS问题。 p{ color: #00F;}<?php echo "<p> im create by php </p>"; //少一个结束分号?>再坚持下HTML引入的CSS外部文件路径是否正确DIVCSS5解答

在html中调用的代码，怎么不受上层CSS的影响？求高人指点 给受影响的css标签增加权重或者把样式写标签里面

如何用纯CSS实现接扎啤的特效（附源码） 本篇文章给大家带来的内容是关于如何用纯CSS实现接扎啤的特效（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，容器中包含一个表示酒桶的 .keg 元素和表示啤酒杯的 .glass 元素。酒桶有 2 个子元素，.handle 表示把手，.pipe 表示出水管，酒杯有 1 个表示啤酒的子元素 .beer：<div class="container"> <div class="keg"> <span class="handle"></span> <span class="pipe"></span> </div> <div class="glass"> <span class="beer"></span> </div></div>居中显示：body { margin: 0; height: 100vh; display: flex; justify-content: center; background: linear-gradient( lightslategray 300px, #333 300px );}定义容器尺寸和伪元素的共有属性：.container { width: 700px; height: 300px; position: relative;}.container *::before,.container *::after { content: ""; position: absolute;}画出酒桶：.keg { position: absolute; width: 90px; height: 200px; background: linear-gradient( to right, #777 70px, #555 70px ); bottom: 0; left: 310px;}画出出水管和它的支架：.keg .pipe { position: absolute; width: 10px; height: 40px; background-color: #ccc; top: 33px; left: 10px;}.keg .pipe::before { width: 40px; height: 20px; background: radial-gradient( circle at 10px 10px, #eee 7px, #ccc 7px, #ccc 10px, transparent 10px ), linear-gradient( #ccc 50%, #999 50% ); border-radius: 10px; top: -2px; left: -5px;}画出把手：.keg .handle { position: absolute; border-style: solid; border-width: 50px 10px 0 10px; border-color: black transparent transparent transparent; top: -10px; left: 5px;}.keg .handle::before { width: 20px; height: 10px; background-color: #ccc; top: -60px; left: -10px; border-radius: 5px 5px 0 0;}.keg .handle::after { width: 10px; height: 20px; background-color: #ccc; top: -20px; left: -5px;}画出酒杯：.glass { position: absolute; width: 70px; height: 100px; color: rgba(255, 255, 255, 0.3); background-color: currentColor; bottom: 0; left: 300px; border-radius: 5px;}.glass::before { width: 50px; height: 40px; border: 10px solid; top: 20px; right: -20px; border-radius: 0 40% 40% 0; clip-path: inset(0 0 0 72%);}画出杯中的啤酒和泡沫：.beer { position: absolute; width: 60px; height: 80px; background-color: rgba(255, 206, 84, 0.8); bottom: 15px; left: 5px; border-radius: 0 0 5px 5px; border-top: solid rgba(255, 206, 84, 0.8);}.beer::before { width: inherit; height: 15px; background-color: #eee; top: -15px; border-radius: 5px 5px 0 0;}接下来制作动画。增加酒杯把手被压下的动画效果：.keg .handle { transform-origin: center 50px; animation: handle 5s infinite;}@keyframes handle { 10%, 60% { transform: rotate(0deg); } 20%, 50% { transform: rotate(-90deg); }}增加啤酒被斟满的动画效果：.beer { animation: fillup 5s infinite;}@keyframes fillup { 0%, 20% { height: 0px; border-width: 0px; } 40% { height: 40px; } 80%, 100% { height: 80px; border-width: 5px; }}增加啤酒泡沫泛起的动画效果：.beer::before { animation: wave 0.5s infinite alternate, fillup-foam 5s linear infinite;}@keyframes fillup-foam { 0%, 20% { top: 0; height: 0; } 60%, 100% { top: -15px; height: 15px; }}@keyframes wave { from { transform: skewY(-3deg); } to { transform: skewY(3deg); }}增加啤酒从出水口流出的效果：.keg .pipe::after { width: 10px; background-color: rgba(255, 206, 84, 0.5); animation: flow 5s infinite;}@keyframes flow { 0%, 15% { top: 40px; height: 0; } 20% { height: 115px; } 40% { height: 75px; } 55% { top: 40px; height: 50px; } 60%, 100% { top: 80px; height: 0; }}最后，增加酒杯滑动的效果：.glass { animation: slide 5s ease infinite;}@keyframes slide { 0% { left: 0; filter: opacity(0); } 20%, 80% { left: 300px; filter: opacity(1); } 100% { left: 600px; filter: opacity(0); }}大功告成！

onblur和onfocusout有什么区别。_html/css_WEB-ITnose 运用在input事件上，这2个好像没发现有什么区别，但肯定是有区别，那么，区别在哪里呢。回复讨论(解决方案)onfocusout是ie的私有事件，只有ie支持。另外一个所有浏览器都支持。

CSSCI,SCI,SSCI,AHCI,EI,分别是什么？有什么区别？ SCI(科学引文索引)Science Citation Index, SCI是由美国科学信息研究所(ISI)1961年创办出版的引文数据库，其覆盖生命科学、临床医学、物理化学、农业、生物、兽医学、工程技术等方面的综合性检索刊物，尤其能反映自然科学研究的学术水平，是目前国际上三大检索系统中最著名的一种，收录范围是当年国际上的重要期刊,尤其是它的引文索引表现出独特的科学参考价值，在学术界占有重要地位。许多国家和地区均以被SCI收录及引证的论文情况来作为评价学术水平的一个重要指标。EI(工程索引)The Engineering Index，简称EI.创刊于1884年，是美国工程信息公司(Engineering information Inc.)出版的著名工程技术类综合性检索工具。EI每月出版1期，文摘1.3万至1.4万条；每期附有主题索引与作者索引；每年还另外出版年卷本和年度索引，年度索引还增加了作者单位索引。出版形式有印刷版（期刊形式）、电子版（磁带）及缩微胶片。EI选用世界上工程技术类几十个国家和地区15个语种的3500余种期刊和1000余种会议录、科技报告、标准、图书等出版物。年报道文献量16万余条。收录文献几乎涉及工程技术各个领域。具有综合性强、资料来源广、地理覆盖面广、报道量大、报道质量高、权威性强等特点。ISTP(科技会议录索引)Index to Scientific & Technical Proceedings，简称ISTP。创刊于1978年。该索引收录生命科学、物理与化学科学、农业、生物和环境科学、工程技术和应用科学等学科的会议文献，包括一般性会议、座谈会、研究会、讨论会、发表会等。其中工程技术与应用科学类文献约占35%，其他涉及学科基本与SCI相同。ISR（科学评论索引）Index to Scientific Reviews 简称ISR。创刊于1974年，收录世界各国2700余种科技期刊及300余种专著丛刊中有价值的评述论文。高质量的评述文章能够提供本学科或某个领域的研究发展概况、研究热点、主攻方向等重要信息，是极为珍贵的参考资料。CSSCI(中文社会科学引文索引)Chinese Social Science Citation Information英文名称首字母缩写，是由南京大学研制成功的、我国人文社会科学评价领域的标志性工程。科学引文索引是从文献之间相互引证的关系上，揭示科学文献之间的内在联系。通过科学引文索引数据库的检索与查询，可以揭示已知理论和知识的应用、提高、发展和修正的过程，从一个重要侧面揭示学科研究与发展的基本走向；通过科学引文索引数据库的统计与分析，可以从定量的视角评价地区、机构、学科以及学者的科学研究水平，为人文社会科学事业发展与研究提供第一手资料。CSSCI俗称“南大版核心期刊”。中文核心期刊要目总览由北京大学图书馆与北京高校图书馆期刊工作研究会联合编辑出版的《中文核心期刊要目总览》（以下简称《要目总览》）。《要目总览》不定期出版， 1996 年出版了第二版， 2000 年出了 2000 版，2008年又推出了最新的版本。《要目总览》收编包括社会科学和自然科学等各种学科类别的中文期刊。其中对核心期刊的认定通过五项指标综合评估。中文核心期刊要目总览，就是通常所说的中文核心期刊，俗称“北大版核心期刊”。CSCI（中国科学文献数据库）是国家科学数字图书馆资助的项目，建设目标是建立中文科技期刊的基于web的科技文献文摘、引文、联合目录馆藏的科技知识服务体系，面向广大机构和个人用户提供中文科技期刊文献资源的有效发现和评价服务。结合对全文数据库的开放链接，建立基于核心科技期刊的知识发现、评价和推介服务体系。ASPT (中国科学文献计量评价数据库)ASPT是中国科学院文献情报中心（A）、中国社会科学院文献信息中心（S）、北京大学图书馆（P），中国学术（光盘版）电子杂志社（T）共同建设的《中国科学文献计量评价数据库》。CJFD（中国期刊全文数据库）(Chinese Journal Full—text Database)的英文缩写.属教育部主管，清华大学主办，中国学术期刊(光盘版)电子杂志社创办的我国第一个学术期刊全文检索与评价数据库，是我国知识信息生产、传播、应用和期刊评价、管理的现代化运作平台，以光盘和网络等形式向国内外读者提供动态知识服务，并为中国科学文献计量评价研究中心进行期刊评价提供基础数据，为新闻出版总署等有关期刊管理部门提供期刊管理数据。如刊物被这些数据库收录，在一定程度上说明这些期刊的权威性。CJCR（中国科技期刊引证报告）CJCR是按照美国JCR的模式，结合中国的具体情况，以中国科技论文与引文数据库（CSTPCD）为基础，选择数学、物理学、力学、化学、医药卫生、工业技术、电子与通信、计算技术、交通运输、航空航天、环境科学等学科的1000多种中国出版的中英文科技期刊作为来源期刊，根据来源期刊的引文数据，进行规范化处理，计算了总被引频次、影响因子、即年指标、被引半衰期、论文地区分布数、基金论文数和自引总引比等十余项科技期刊评价指标，并按照期刊的所属学科、影响因子、总被引频次和期刊字顺分别进行排序。CMCC（中文生物医学期刊文献数据库）是解放军医学图书馆创建的中文医学期刊文献的数据库，是面向医院、院校、科研、图书情报、医药卫生和医药出版等单位的文献摘要数据库。它收录文献量大，专业性强，信息新，查询途径广，更新及时，系统功能比较完备，用户界面友好，使用方便，是检索最新医学文献的重要工具，几乎收录了国内生物医学领域的全部核心期刊、重要刊物以及与生物医学相关的一些自然科学期刊，内容涵盖了生物医学的各个领域及其边缘学科的相关领域。CMCC 是目前我国同类产品中提供信息量最多、传递速度最快的中文医学文献数据库。CASS(中国人文社会科学核心期刊要览)是中国社会科学院文献信息中心在多年的期刊研究基础上完成的一项科研成果。它采用我国目前年度收文量最大的引文数据库和其他大型文献数据库作为统计数据源，运用文献计量学的理论和方法进行综合统计分析，邀请各学科权威专家进行评审，力求客观地反映期刊的“学术影响力”。该书评出哲学、政治、法律、经济、文学、历史等重要学科领域中的344种核心期刊，涵盖了目前我国人2社会科学期刊中使用率和学术水平均居前列的权威期刊和优秀期刊。CASS也有人称之为“社科院版核心期刊”。中国科技期刊引证报告（统计源期刊）是按照美国科学情报研究所（ISI）《期刊引证报告》的模式，结合中国期刊发展的实际情况，确定了在中国出版（不含港、澳、台）的1576种（2004年版）科技期刊列为《中国科技论文统计源期刊》，学科范畴主要为自然科学领域，是目前国内比较公认的科技统计源期刊目录。因其受科技部委托，带有官方色彩，具有很高的学术权威性，人们习惯称其为“统计源期刊”，又称为“中国科技核心期刊”。CSTPCD（中国科技论文与引文数据库）中国科技信息研究所（ISTIC）是受国家科技部委托，从1987年开始对我国科技人员在国内外表论文数量和被引用情况进行统计分析，并利用统计数据建立了中国科技论文与引文数据库（CSTPCD），受到社会各界的普遍重视和广泛好评。中国科技论文统计源期刊是CSTPCD的数据来源。通过中国科技期刊综合指标评价体系对期刊学术质量的考核，CSTPCD每年对收录期刊的范围进行调整。CSCD（中国科学引文数据库）收入我国数学、物理、化学、生物学、医药卫生、工程技术、环境科学和管理科学等领域出版的中英文科技核心期刊和优秀期刊近千种，其中核心库来源期刊670种，扩展库期刊为 378 种.核心库的来源期刊经过严格的评选,是各学科领域中具有权威性和代表性的核心期刊。扩展库的来源期刊也经过大范围的遴选，是我国各学科领域较优秀的期刊。具有建库历史最为悠久、专业性强、数据准确规范等特点，被誉为“中国的SCI ”。CAJCED（中国学术期刊综合评价数据库）是国家级火炬计划项目，是以《中国学术期刊（光盘版）》和中国期刊网专题全文数据库的评价数据为基础而建立起来的大型数据库。是《中国核心期刊要目总览》数据源统计的分析工具、《中国科学引文数据库》和《中国人文社科引文数据库》来源期刊的重要依据。该数据库为各期刊管理部门进行期刊管理、评比及期刊的其它定量分析研究提供依据和统计分析结果。在《中国学术期刊综合评价数据库》来源期刊及其统计分析的基础上结合《中文核心期刊要目总览》，由评价中心《中国人文社会科学引文数据库》专家遴选900多种社科类优秀期刊作为来源期刊。中国期刊方阵“双高”“双奖”“双百”“双效”期刊　“中国期刊方阵”的基本框架分为4个层面，形成宝塔形结构。第一个层面为“双效”期刊。以全国现有近万种期刊为基数选取社会效益、经济效益好的1000余种期刊，作为“中国期刊方阵”的基础。第二个层面为“双百”期刊。即通过每两年一届评比产生的百种重点社科期刊、百种重点科技期刊。每届进入全国“双百”重点期刊数量控制在200种左右。第三个层面为“双奖”期刊。是全国“双百”重点期刊基础上评选出的国家期刊奖、国家期刊奖提名奖的期刊。此类期刊约100种左右。即高知名度、高学术水平的期刊。此类期刊约50种左右。“双奖”和“双百”期刊通过评选产生，“双高”期刊由新闻出版总署、科技部确定。国家级期刊“国家级” 期刊，即由党中央、国务院及所属各部门，或中国科学院、中国社会科学院、各民主党派和全国性人民团体主办的期刊及国家一级专业学会主办的会刊。另外，刊物上明确标有“全国性期刊”、“核心期刊 ”字样的刊物也可视为国家级刊物。省级期刊由各省、自治区、直辖市及其所属部、委办、厅、局主办的期刊为省级期刊，由各本、专科院校主办的学报（刊）也被视为省级期刊。增刊根据新闻出版总署规定，每本合法期刊，一年可以出版两期增刊。增刊的主管单位、主办单位和刊号都是与正常周期出版的刊物完全一致的，不能称之为非法或违规出版物。大众期刊的增刊一般用来出版专辑、合集或纪念特刊。学术期刊通常把一些具有相当水准，但又无法在正常周期的刊物上发表的文稿安排在增刊上，因此增刊的学术影响力较正常周期出版的刊物为弱。在评定中级以下职称时，省级期刊的增刊大多不被承认。但国家级期刊或核心期刊的增刊往往会被降级使用，相当于省级期刊或普通学术期刊。

csssolid什么意思 Border（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，可以给文本加边框，给导航菜单加分隔线，下面与大家分享个实例，感兴趣的朋友可以了解下制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。style="border:thin solid red"“border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），1、给文本加边框上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码是：style="border:thin solid red"； “border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），此外，也可以自定义宽度，如：1pt、5px、2cm等。边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅），注意：如果系统不支持这些边框的属性值，那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被“solid”代替。边框线的颜色：可以用十六进制的颜色代码，如#00ffcc。从上面可以看出，给文本加边框确实很简单，上例中后面那几个边框的设置，我不讲你也明白了吧！在这里告诉你一点小技巧，给一段文本加边框，可把CSS加在〈P〉标记里；给几段文本加边框，先把那几段文本用DIV标记括起来，再把CSS加在〈DIV〉标记里；若是要给一行文本加几个不同的边框，则需要把文本放在表格里，再把CSS分别加到〈TD〉标记里。 2、给导航菜单加分隔线上面这个例子中的小白线，当然可以用图象来做，但我在这里是用CSS的“border”的扩展属性画了边框的一条边，这样代码要少的多。画边框的单边与上例的边框的四条边类似，一个边框的四条边的属性如下：边框线名称：border-top（上边框线）、border-right（右边框线）、border-bottom（下边框线）和boder-left（左边框线）；每条边框线的类型、宽度和颜色的取值与“boder”属性相同。如本例中要定义每个单元格的左边框线为白色线，线的宽度为“1px”的实线，则CSS代码是这样的：style="border-left: 1px solid #ffffff"。在单独定义边框线时，若不给出某个值，那么就取其默认的初始值。在dreamweaver中定义CSS非常方便，不用编写代码；把常用的边框线一次定义好，放在外连式CSS文件中，要用时调用一下就行了，非常方便。 3、在一个边框中采用不同宽度和颜色的边框线在本例中的效果，当然可以用上例中的方法来实现，但那样代码过多，可采用另一种合并的方法，把四条边的属性值分类放在一起，如本例的代码是这样的： style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。从上面可以看出，我把边框线的类型、宽度和颜色归类在一起定义了，这里请注意几点：一、四条边框线的位置顺序是：上边框线、右边框线、下边框线、左边框线；二、我在本例中边框线的类型只取了一种实线类型，实际上四条边也可以分别定义不同的类型；三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。 Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。例子： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>一列固定宽度——</title> <style type="text/css">  </style> </head> <body> <div id="layout">hfhfg</div> </body> </html>

如何使用CSS和D3实现一个舞动的画面（附源码） 本篇文章给大家带来的内容是关于如何使用CSS和D3实现一个舞动的画面（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，容器中包含 1 个 .square 子容器，子容器中包含 4 个 <span>，每个 <span> 代表一个对角扇形：<figure class="container"> <div class="square"> <span></span> <span></span> <span></span> <span></span> </div></figure>居中显示：body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #222;}设置容器的尺寸单位，1em 等于 8px：.container { font-size: 8px;}子容器中的 4 个 <span> 不设宽高，只设边框，其中第 1 个和第 4 个 <span> 只取左右边框，第 2 个和第 3 个 <span> 只取上下边框：.square span { display: block; border: 2.5em solid transparent; color: #ddd;}.square span:nth-child(1),.square span:nth-child(4) { border-left-color: currentColor; border-right-color: currentColor;}.square span:nth-child(2),.square span:nth-child(3) { border-top-color: currentColor; border-bottom-color: currentColor;}把边框改为圆弧：.square span { border-radius: 50%;}在子容器中用 grid 布局把 4 个 <span> 设置为 2 * 2 的网格：.square { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em; padding: 0.1em;}旋转 4 个 <span>，使它们围合成一个正方形，看起来像一个花朵，算式的结果是 45 度，写成这样是为了和接下来的动画的算式的形式保持一致：.square span { transform: rotate(calc(45deg + 90deg * 0));}增加让 <span> 旋转的动画，整个动画过程旋转 4 次，每次旋转 90 度，4 次旋转之后即返回原位：.square span { animation: rotation 2s ease-in-out infinite;}@keyframes rotation { 0% { transform: rotate(calc(45deg + 90deg * 0)); } 25% { transform: rotate(calc(45deg + 90deg * 1)); } 50% { transform: rotate(calc(45deg + 90deg * 2)); } 75% { transform: rotate(calc(45deg + 90deg * 3)); } 100% { transform: rotate(calc(45deg + 90deg * 4)); }}使其中 2 个 <span> 朝相反的方向运动：.square span:nth-child(2),.square span:nth-child(3) { animation-direction: reverse;}至此，一个 .square 子容器的动画已经完成，接下来制作 4 个 .square 的动画。在 dom 中再增加 3 组 .square 子容器：<figure class="container"> <div class="square"> <span></span> <span></span> <span></span> <span></span> </div> <div class="square"> <span></span> <span></span> <span></span> <span></span> </div> <div class="square"> <span></span> <span></span> <span></span> <span></span> </div> <div class="square"> <span></span> <span></span> <span></span> <span></span> </div></figure>用 grid 布局把 4 个 .square 布局成网格状，变量 --columns 是网格的边长，即每边有 2 个 .square 子容器：.container { display: grid; --columns: 2; grid-template-columns: repeat(var(--columns), 1fr);}现在看起来好像是有几个黑色的小方块在不停地移动，当 dom 元素越多时，动画效果看起来就越壮观，就像集体舞一样，人越多越有气势。接下来用 d3 批量增加 dom 的元素。引入 d3 库：<script src="https://d3js.org/d3.v5.min.js"></script>声明一个 COLUMNS 常量，表示网格的边长：const COLUMNS = 2;删除掉 html 文件中的 .square 子元素，改为用 d3 动态创建：d3.select(".container") .selectAll("p") .data(d3.range(COLUMNS * COLUMNS)) .enter() .append("p") .attr("class", "square");继续用连缀语法增加 <span> 子元素：d3.select(".container") .selectAll("p") .data(d3.range(COLUMNS * COLUMNS)) .enter() .append("p") .attr("class", "square") .selectAll("span") .data(d3.range(4)) .enter() .append("span");删除掉 css 文件中的 --columns 变量声明，改为用 d3 动态声明：d3.select(".container") .style("--columns", COLUMNS) /*略*/最后，把边长改为 4，即让 16 个 .square 一起动画：const COLUMNS = 4;大功告成！

《The CSS Anthology》txt下载在线阅读全文,求百度网盘云资源

* 回复内容中包含的链接未经审核，可能存在风险，暂不予完整展示！《The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition》（Rachel Andrew）电子书网盘下载免费在线阅读链接: https://pan.b***.com/s/1NXhryUOROGCqmhI3feNwSg 提取码: 7nq9书名：The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition作者：Rachel Andrew豆瓣评分：7.5出版社：SitePoint出版年份：August 15, 2007页数：400内容简介：Book DescriptionA practical guide on CSS (Cascading Style Sheets) for professionals and novices, that can be used both as a tutorial and read cover-to-cover or as a handy and practical reference book to common problems, solutions and effects. The 2nd edition is now full-color throughout and is completely updated and revised with the latest tips & tricks.

css里微软雅黑字体怎么设置 {font-family:"微软雅黑"；}或者{font-family:"Microsoft Yahei";}如果在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误，为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。unicode编码的微软雅黑表示如下：{font-family: "5FAE8F6F96C59ED1"}

css里面这句代码：求解释 font: normal 26px/38px "微软雅黑"; 一般不要这样写，看着是很简约，有时候页面容易出错。显示和你想要的效果不一样，尤其是中英文都有的情况。一楼的回答是正确的。

为什么设置了font-family:"黑体"或"微软雅黑"字体样式还是没有变化。CSS里面其他的属性都有变化。 CSS 文本的编码是不是储存为 UTF-8 的呢？

CSS里定义字体时，用"微软雅黑"和用"Microsoft Yahei"有什么区别？ 请问怎么样把白底字体转换成黑色字体

CSS如何实现一行文本里中英文分别用不同字体？ 不能通过一个命令来实现这个结果，因为CSS还没有这么高级分中英文，必需指定哪些字用什么字体。可以给中文用<span>框住，然后加class，因文也一样。

div css中字体格式分别有那几种 一般就用宋体

CSS里定义字体时，用"微软雅黑"和用"Microsoft Yahei"有什么区别 css字体名可以使用2种unicode格式，以“微软雅黑”为例:de>微软雅黑de>和de>5fae8f6f96c59ed1de>，如果未找到需要的字体名称，可以到这里把简体中文转换为unicode编码。中文名英文名unicodeunicode2微软雅黑microsoftyahei5fae8f6f96c59ed1微软雅黑

如何把vue2.0和animate.css合并在一起使用（详细教程） animate.css是一款前端动画库，相似的有velocity-animate。这篇文章给大家介绍vue2.0 和 animate.css的结合使用，需要的朋友参考下吧这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。首先是transition组件，在2.0中由transition属性变成了一个独立的组件。用法： 1、要用animate.css，那么首先需要做的就是导入它。局部的导入的话，就在当前的.vue文件中的style标签中导入：@import "animate.css"; 注意，导入css文件的时候。在末尾应该是要加上分号的。如果不加的话，会影响后面写的局部样式 2、开始使用animate.css上述是一个完整的结构。其中重要的几个点用箭头表示出来。首先在transition组件内部，需要定义两个基本的class类，表示过渡进来和过渡出去的时候所要配合使用的animate.css的类值。zoomInLeft/zoomOutRight是其中的一对儿。具体的其他效果可以查看animate.css的官网。其次在transition组件内部的话，需要过渡的子元素需要加上animated类。最后可能也是比较容易忽略的点（至少我就是）。这个v-show,看似好像是多余的，但是不加上的话，对于过渡效果是没有用的。因为过渡是从一个无到有或者有到无的一个效果。最开始进来的时候如果元素本身就是show的，那么过渡就失效了。所以在元素上面需要加上这个v-show属性。在过渡效果进来的时候，v-show设置为true，相反为false。还有一点是在上述代码中没有展现出来的，如果有多个子元素都要实现过渡，可以加上<transition-group></transition-group>进行包裹。PS：下面看一段实例代码vue过渡和animate.css结合使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="vue.js"></script> <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" > <style type="text/css"> p { width: 300px; height: 300px; background: red; margin: 10px auto; } </style> <script type="text/javascript"> window.onload = function(){ var app = new Vue({ el:"#box", data:{ show:false } }) } </script></head><body> <p id="box">  <button @click="show=!show">transition</button>     <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated" :key="1"></p> <p v-show="show" class="animated" :key="2"></p> </transition-group> </p></body></html>上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在Django与Vue语法中存在冲突问题如何解决在nodejs中如何实现爬取网站图片有关ES6/JavaScript使用技巧（详细教程）

CSS3自适应全屏焦点图切换的特效怎么做 给大家带来用纯CSS3实现全屏背景切换焦点图效果，不参夹JS的代码，简单易懂还好用，需要的朋友可以直接搬运。下面我们来看一下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>自适应全屏焦点图切换CSS3特效代码</title> <meta name="keywords" content="自适应,全屏,焦点图,切换,CSS3,特效代码" /> <meta name="description" content="自适应全屏焦点图切换CSS3特效代码，纯CSS实现不用任何js代码。" /> <style> *{margin:0;padding:0;list-style: none;} img.bg{min-width: 1024px;min-height: 100%;width: 100%;height: auto!important;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;} @media screen and (max-width: 1024px) { img.bg{ left: 50%; margin-left: -512px; } } .slider{ position: absolute; width: 100%; text-align: center; z-index: 999; bottom: 100px; } .slider li{ display: inline-block; width: 170px; height: 130px; margin-right: 15px; } .slider a{ display: inline-block; width: 170px; padding-top:70px; padding-bottom:20px; position: relative; cursor: pointer; border:2px solid #fff; border-radius: 5px; vertical-align: top;/*设置元素的垂直对齐方式。*/ color: #FFFFFF; text-decoration: none; font-size: 22px; font-family: "楷体"; text-shadow: -1px -1px 1px rgba(0,0,0,0.8), -2px -2px 1px rgba(0, 0, 0, 0.3), -3px -3px 1px rgba(0, 0, 0, 0.3); } .slider li:nth-of-type(1) a{ background-color: #02646e; } .slider li:nth-of-type(2) a{ background-color: #eb0837; } .slider li:nth-of-type(3) a { background-color: #67b374; } .slider li:nth-of-type(4) a { background-color: #e6674a; } .slider li:nth-of-type(5) a { background-color: #e61061; } .slider a::after{/*:after 选择器在被选元素的内容后面插入内容。*/ content: ""; display: block; height: 120px; width: 120px; border:5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -60px; z-index: 9999; top: -80px; } .slider li:nth-of-type(1) a::after { /*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/ background: url(img/sbg1.jpg) no-repeat center; } .slider li:nth-of-type(2) a::after { background: url(img/sbg2.jpg) no-repeat center; } .slider li:nth-of-type(3) a::after { background: url(img/sbg3.jpg) no-repeat center; } .slider li:nth-of-type(4) a::after { background: url(img/sbg4.jpg) no-repeat center; } .slider li:nth-of-type(5) a::after { background: url(img/sbg5.jpg) no-repeat center; } .slider a::before{ content: ""; display: block; height: 120px; width: 120px; border:5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -60px; z-index: 99999; top: -80px; background:rgba(0,0,0,0.3); } .slider a:hover::before{ opacity: 0; } @-webkit-keyframes "slideLeft"{ 0%{ left:-500px; } 100%{ left:0; } } .slideLeft:target{ /*:target 选择器可用于选取当前活动的目标元素*/ z-index: 100; animation: slideLeft 1s 1; -webkit-animation: slideLeft 1s 1; } @-webkit-keyframes "slideBottom"{ 0%{ top:350px; } 100%{ top:0; } } .slideBottom:target{ /*:target 选择器可用于选取当前活动的目标元素*/ z-index: 100; animation: slideBottom 1s 1; -webkit-animation: slideBottom 1s 1; } @-webkit-keyframes "zoomIn" { 0% { -webkit-transform: scale(0.1); } 100% { -webkit-transform: none; } } .zoomIn:target { z-index: 100; -webkit-animation: zoomIn 1s 1; animation: zoomIn 1s 1; } /* Zoom Out */ @-webkit-keyframes "zoomOut" { 0% { -webkit-transform: scale(2); } 100% { -webkit-transform: none; } } .zoomOut:target { z-index: 100; -webkit-animation: zoomOut 1s 1; animation: zoomOut 1s 1; } /* Rotate */ @-webkit-keyframes "rotate" { 0% { -webkit-transform: rotate(-360deg) scale(0.1); } 100% { -webkit-transform: none; } } .rotate:target { z-index: 100; -webkit-animation: rotate 1s 1; animation: rotate 1s 1; } @-webkit-keyframes "notTarget" { 0% { z-index: 75; } 100% { z-index: 75; } } .bg:not(:target) { -webkit-animation: notTarget 1s 1; animation: notTarget 1s 1 } .page { text-align:left; } </style> </head> <body> <div> <ul> <li><a href="#bg1">Hipster Fashion Haircut</a></li> <li><a href="#bg2">Cloud Computing Services & Consulting</a></li> <li><a href="#bg3">My haire is sooo fantastic!</a></li> <li><a href="#bg4">Eat healthy & excersice!</a></li> <li><a href="#bg5">Lips so kissable I could die ...</a></li> </ul> </div> <img src="img/bg1.jpg" class="bg slideLeft" id="bg1" /> <img src="img/bg2.jpg" class="bg slideBottom" id="bg2" /> <img src="img/bg3.jpg" class="bg zoomIn" id="bg3" /> <img src="img/bg4.jpg" class="bg zoomOut" id="bg4" /> <img src="img/bg5.jpg" class="bg rotate" id="bg5" /> </body></html>自适应全屏焦点图切换的特效就这么多了。更多精彩请关注Gxl网其它相关文章！相关阅读：CSS3有哪些新增的背景属性怎么用CSS3媒体查询css3的弹性盒怎么做出来

webkit和trident css兼容性怎么写 webkit内核浏览器cssHack写法-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;trident内核的cssHack写法_height:10px; /*IE6识别*/+height:10px; /*ie7识别*/*height:10px; /*ie6 ie7 ie8 ie9 ie10都能识别*/

thymeleaf模板HTML中引用css但背景图片只显示了一半 可能程序不对。支持CSS3的浏览器里显示，可以用background-size来定义。如果你在不支持css3的浏览器里显示，可以给body定义一个子元素，宽度和高度都为100%，然后在这个子元素里加一个

thymeleaf 怎样引用css 引用css其实大可不必非要用thymeleaf ，像平常一样引用就可以以，只要路径写对了但如果你非要用thymeleaf 的话，可以参考<link rel="stylesheet" type="text/css" th:href="@{${mapJson.res["css/main.css"].url}}"/>

CSS权重是如何分配的_html/css_WEB-ITnose CSS权重是由四个数值决定，看一张图比较好解释：图里是英文的，我翻译过来分别说一下，4个等级的定义如下：第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，如.content，权值为10。第四等：代表类型选择器和伪元素选择器，如div p，权值为1。最后把这些值加起来，再就是当前元素的权重了。权重算出来了，但是某个元素到底用哪个样式，还有3个规则,： 1，如果样式上加有!important标记，例如： p{ color: gray !important} 那么始终采用这个标记的样式。 2，匹配的内容按照CSS权重排序，权重大的优先；可以看到，CSS权重只是决定应用哪个样式的其中一个步骤，不过这个步骤是最复杂的，上面已经说过了。 3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先，例如： h1 {color: blue}h1 {color: red} 最终胜出的是color: red。

css3 中这个stroke是什么意思 通俗的来说就是路径、描边的意思，stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。望采纳！

如何使用CSS3画出一个叮当猫_CSS/HTML 刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！热烈的笑脸首先，先把HTML结构搭建好：最好先把叮当猫的整体结构仔细研究一下，这对以后想要自己动手画别的人物形象很有帮助，思路会比较明朗。接下来，我们按照头部，脖子，身体，脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式，叮当猫整体doraemon 设置position为relative，主要是为了便于子元素/后代元素进行定位。.wrapper{ margin: 50px 0 0 500px; } .doraemon{ position: relative; } 头部head的样式，因为叮当猫的头部不是正圆，所以宽高有一点偏差，然后使用border-radius将头部从矩形变成椭圆形，然后再使用径向渐变从右上角给背景来个放射性渐变，然后在加个阴影，使其更有立体感，background：#07bbee;是为了兼容低版本浏览器：.doraemon .head { position:relative; width: 320px; height: 300px; border-radius: 150px; background: #07bbee; background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); border:2px solid #555; box-shadow:-5px 10px 15px rgba(0,0,0,0.45); } 看看效果到底怎么样：惊讶 shenmgui ,这么丑，别急，慢慢让它活过来：/*脸部*/ .doraemon .face { position: relative; /*让所有脸部元素可自由定位*/ z-index: 2; /*脸在头部背景上面*/ } /*白色脸底*/ .doraemon .face .white { width: 265px; /*设置宽高*/ height: 195px; border-radius: 150px; position: absolute; /*进行绝对定位*/ top: 75px; left: 25px; background: #fff; /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/ background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); background: _ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); } /*鼻子*/ .doraemon .face .nose{ width:30px; height:30px; border-radius:15px; background:#c93300; border:2px solid #000; position:absolute; top:110px; left:140px; z-index:3; /*鼻子在白色脸底下面*/ } /*鼻子上的高光*/ .doraemon .face .nose .light { width:10px; height:10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/ } /*鼻子下的线*/ .doraemon .face .nose_line{ width:3px; height:100px; background:#333; position:absolute; top:143px; left:155px; z-index:3; } /*嘴巴*/ .doraemon .face .mouth{ width:220px; height:400px; /*通过底边框加上圆角模拟微笑嘴巴*/ border-bottom:3px solid #333; border-radius:120px; position:absolute; top:-160px; left:45px; } /*眼睛*/ .doraemon .eyes { position: relative; z-index: 3; /*眼睛在白色脸底下面*/ } /*眼睛共同的样式*/ .doraemon .eyes .eye{ width:72px; height:82px; background:#fff; border:2px solid #000; border-radius:35px 35px; position:absolute; top:40px; } /*眼珠*/ .doraemon .eyes .eye .black{ width:14px; height:14px; background:#000; border-radius:7px; position:absolute; top:40px; } .doraemon .eyes .left{ left:82px; } .doraemon .eyes .right { left: 156px; } .doraemon .eyes .eye .bleft { left: 50px; } .doraemon .eyes .eye .bright { left: 7px; } 写了这么多样式，结果是怎么样的呢：生病怎么看都觉得别扭，哦！还差胡须须和白色脸底的边框呢，咱给补上：/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/ .doraemon .whiskers{ width:220px; height:80px; background:#fff; border-radius:15px; position:absolute; top:120px; left:45px; z-index:2; /*在鼻子和眼睛下面*/ } /*所有胡子的公用样式*/ .doraemon .whiskers .whisker { width: 60px; height: 2px; background: #333; position: absolute; z-index: 2; } /*右上胡子*/ .doraemon .whiskers .rTop { left: 165px; top: 25px; } /*右中胡子*/ .doraemon .whiskers .rMiddle { left: 167px; top: 45px; } /*右下胡子*/ .doraemon .whiskers .rBottom { left: 165px; top: 65px; } /*左上胡子*/ .doraemon .whiskers .lTop { left: 0; top: 25px; } /*左中胡子*/ .doraemon .whiskers .lMiddle { left: -2px; top: 45px; } /*左下胡子*/ .doraemon .whiskers .lBottom { left: 0; top: 65px; } /*胡子旋转角度*/ .doraemon .whiskers .r160 { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); } .doraemon .whiskers .r20 { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); } 微笑这样就对了，看着多舒服啊！趁热打铁，做脖子和身体：/*围脖*/ .doraemon .choker { width: 230px; height: 20px; background: #c40; /*线性渐变让围巾看上去更自然*/ background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400)); background: -moz-linear-gradient(center top,#c40,#800400); background: -ms-linear-gradient(center top,#c40,#800400); border: 2px solid #000; border-radius: 10px; position: relative; top: -40px; left: 45px; z-index: 4; } /*铃铛*/ .doraemon .choker .bell { width: 40px; height: 40px; _overflow: hidden; /*IE6 hack*/ border: 2px solid #000; border-radius: 50px; background: #f9f12a; background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow: -5px 5px 10px rgba(0,0,0,0.25); position: absolute; top: 5px; left: 90px; } /*双横线*/ .doraemon .choker .bell_line { width: 36px; height: 2px; background: #f9f12a; border: 2px solid #333; border-radius: 3px 3px 0 0; position: absolute; top: 10px; } /*黑点*/ .doraemon .choker .bell_circle{ width:12px; height:10px; background:#000; border-radius:5px; position:absolute; top:20px; left:14px; } /*黑点下的线*/ .doraemon .choker .bell_under{ width: 3px; height:15px; background:#000; position:absolute; left: 18px; top:27px; } /*铃铛高光*/ .doraemon .choker .bell_light{ width:12px; height:12px; border-radius:10px; box-shadow:19px 8px 5px #fff; position:absolute; top:-5px; left:5px; opacity:0.7; } /*身子*/ .doraemon .bodys { position: relative; top: -310px; } /*肚子*/ .doraemon .bodys .body { width: 220px; height: 165px; background: #07beea; background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); border:2px solid #333; position:absolute; top:265px; left:50px; } /*白色肚兜*/ .doraemon .bodys .wraps { width: 170px; height: 170px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); border: 2px solid #000; border-radius: 85px; position: absolute; left: 72px; top: 230px; } /*口袋*/ .doraemon .bodys .pocket { width: 130px; height: 130px; border-radius: 65px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); border: 2px solid #000; position:absolute; top: 250px; left: 92px; } /*挡住口袋一半*/ .doraemon .bodys .pocket_mask { width: 134px; height: 60px; background:#fff; border-bottom: 2px solid #000; position:absolute; top: 259px; left: 92px; } 好吧，脖子和身子都有啦！上图：现在看起来有点像摆设品，不过笑容还是那么单纯，好了，赶紧把手脚做出来：/*左右手*/ .doraemon .hand_right, .doraemon .hand_left { height: 100px; width: 100px; position: absolute; top: 272px; left: 248px; } /*左手*/ .doraemon .hand_left { left: -10px; } /*手臂公共部分*/ .doraemon .arm { width:80px;

CSS 的预处理程序分别都有哪些优缺点 CSS 的预处理程序优缺点如下：LESS/SASS优点：开发速度提升；代码优化效率提高（对开发者而言）；代码更通俗易懂（对开发者而言）；维护简单便捷；代码更干净，优美；功能更多更强，CSS做出JS的特效（其实就是JS）；总而言之，LESS/SASS就是CSS里面的jQuery，简化，减少开发时间，提升开发者开发体验。LESS/SASS缺点：舍弃用户体验来提高开发的效率，可以查考Bootstrap的缺点；舍弃网页打开速度换取开发效率提升；需要一个学习的过程，用之不当反而弄巧反拙；总而言之，LESS/SASS缺点就是需要多一个编译器来重新编译一次CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢（网页显示顺序，从上至下，一般CSS放在头部，先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片，视频，音频--->最后完全显示）你在CSS工序加了一个步骤，速度自然慢，时间自然多了。

CSS 的预处理程序分别都有哪些优缺点 SASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。LESS 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。LESS & SassLESS是受Sass启发而开发的工具，它列出了如下开发的理由：“为什么要开发一个Sass的替代品呢？原因很简单：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS，如果你只是对使用变量或者操作感兴趣的话，你不需要学习一整门全新的语言。”StylusStylus相对前两者较新，可以看官方文档介绍的功能。1.来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScript API：http://learnboost.github.io/stylus/docs/js.html2.支持Ruby之类等等框架3.更多更强大的支持和功能总结：LESS/SASS优点：开发速度提升；代码优化效率提高（对开发者而言）；代码更通俗易懂（对开发者而言）；维护简单便捷；代码更干净，优美；功能更多更强，CSS做出JS的特效（其实就是JS）；总而言之，LESS/SASS就是CSS里面的jQuery，简化，减少开发时间，提升开发者开发体验。LESS/SASS缺点：舍弃用户体验来提高开发的效率，可以查考Bootstrap的缺点；舍弃网页打开速度换取开发效率提升；需要一个学习的过程，用之不当反而弄巧反拙；总而言之，LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢（网页显示顺序，从上至下，一般CSS放在头部，先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片，视频，音频--->最后完全显示）你在CSS工序加了一个步骤，速度自然慢，时间自然多了。什么网站适合LESS/SASS，企业网站，个人网站，普通静态页。如果淘宝用了LESS/SASS，估计淘宝每年会失去至少5千亿成交额。Stylus功能上更为强壮，和js联系更加紧密。

css预处理--stylus，以及遇到的问题 stylus跟sass和less一样都是css预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，官网的介绍为：富于表现力、动态的、健壮的 CSS 因为stylus出现的比较晚，因此它的语法比较新。 Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。 stylus支持三种注释：单行注释在编译之后会被删除，多行注释会被保留，多行缓冲注释相当于告诉Stylus压缩的时候这段无视直接输出。编译之后的css 在stylus中，认为对于元素样式的设置 , {} : ; 是无意义的，因此在stylus中可以不用书写它们。同样因为没有来这些符号，所有空白符，换行，空格以及tab都很重要，写的时候要慎重。 stylus是用js写的，因此很多语法跟js很像，比如js定义变量： stylus中定义变量： Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。如下：这样就可以简单的通过前置@字符在属性名前来访问该属性名对应的值。另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中，我们默认指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color最后是blue. Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{"border" + "-radius"}等同于-webkit-border-radius 比如：编译之后编译过后： stylus中支持混合，语法跟js中定义函数很像，它的作用是用来复制样式或者兼容浏览器 js中定义函数：在stylus中定义混合语法： 1.混合名称() ,参数集合中可以传递参数，多个参数使用逗号隔开 2.混合名称参数，多个参数使用逗号隔开 3.混合名称参数，多个参数使用空格隔开 1.属性混合封装一个属性，用来兼容各个浏览器特点：通常以属性名称定义混合，来覆盖原有的属性，兼容浏览器 2.样式混合封装的是多个属性，用来复用样式编译之后注意： 1.混合的参数集合绝对不能省略 2.混合名称与参数集合之间绝对不能有空格 3.如果参数中出现了空格，我们要使用第二种方式 Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。很简单的例子，两数值相加的方法：编译之后 sylus还可以引入外部的stylus文件 stylus会根据@keyframes自动创建兼容浏览器的样式，但是内容样式如果出现了css3则不会处理，需要使用混合书写的方式进行处理举个栗子：编译之后：编译之后：编译之后：不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决编译为： Stylus可以字符转码。这可以让字符变成标识符，或是渲染成字面量。注意Stylus中/当作为属性使用的时候需要用括号括起来：编译为：需要在vue.config.js中配置然后在main.js中引入公共样式文件，这样就不需要在组件里面再引入一次公共样式啦官网： http://stylus-lang.com/ 参考中文文档： https://www.zhangxinxu.com/jq/stylus/

用DIV+CSS的方法进行网站页面排版设计，为什么DIV分割后在浏览器的上面会出现一段空白呢？？ *{margin:0;padding:0;}css中加上这个就行了。或者 body,html{margin:0;padding:0;}这2中都行

CSS布局有哪些技巧 CSS需要怎么布局？CSS布局的时候需要注意哪些方面？CSS布局有哪些技巧呢？今天我们就来给大家一一总结一下。如何才能有很好的CSS布局。大家都知道从平面设计人员拿来的PS（图片）给CSS重构者重构时，需要对网页美工图片进行分析，只有进行很好的分析才能有CSS布局。因此DIV CSS布局在分析中占很大部分，我们分析网页美工图片不是分析图片好看是否，而是从css布局出发分析网页的美工图片，而CSS布局分析直接影响以后的css重构html页面是否好写的一步。布局知识：DIV+CSS布局，CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。制作div+css网页前思考布局：首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。下面通过一个实例讲解下CSS布局分析，我们以列表页面分析css布局：首先我们可以分析出我们DIV CSS布局重构此页面结构框架，我们可以看出是上、中、下结构，其中又包括了左右结构。由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写css与html。我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html ，css文件命名为index.css。这里有个诀窍就是可以导入模板方式来建css与html初始页面，然后将css文件引用到html，也就是我在模板里介绍的css模板，再在CSS模板的基础上再写再添加css。以下是index.html 的html代码：以下为引用的内容：<!DOCTYPE "> <html "> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css布局案例实验页面</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">我是头部（上）</div> <div id="centers"> <div class="c_left">我是中的左</div> <div class="c_right">我是中的右</div> <div class="clear"></div> </div> <div id="footer">我是底部（下）</div> </body> </html>index .css的CSS代码如下：以下为引用的内容：body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} ol, ul ,li{list-style: none;} img {border: 0;} body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} .clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} .clear{clear:both;height:1px; margin-top:-1px; width:100%;} .dis{display:block;} .undis{display:none;} /*此上面代码是初始CSS模板，下面是新写CSS布局框架代码*/ #header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} #header{ height:68px; border:1px solid #CCCCCC; } #centers{ padding:8px 0;} #footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} #centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } #centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}你可以考出此两段代码新建个试试，我们就布局出以上美工页面CSS和html框架，然后根据各内容继续添加CSS与html源代码。 css布局重要及说明相信大家都已经了解了。更多精彩请关注Gxl网其它相关文章！相关阅读：HTML的表格样式CSS里的min-height和max-height怎么使用css3里怎么显示圆形图片

reset.css是什么 推荐：《css视频教程》reset.css 重置浏览器标签的样式表。在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。重置作用因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。内容最简单的CSS Reset内容寥寥几行就能完成：* { padding: 0; margin: 0; border: 0; }(但由于性能较低，不推荐使用)这个方法让所有的选择器的padding、margin和border都设置成0。也有内容更多的，比如YUI的CSS Reset内容：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}table {border-collapse: collapse;border-spacing: 0;}fieldset,img {border: 0;}address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}ol,ul {list-style: none;}caption,th {text-align: left;}h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}q:before,q:after {content:"";}abbr,acronym { border: 0;}以及国外名人Eric Meyer的CSS Reset V1.0|200802内容：html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before,blockquote:after,q:before, q:after {content: "";content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need "cellspacing="0"" in the markup */table {border-collapse: collapse;border-spacing: 0;}Eric Meyer V2.0|20110126[1] html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup, menu, nav, output,ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: "";content: none;}table {border-collapse: collapse;border-spacing: 0;}大家可以看得出来，这些内容方法不同，但功能大同小异，都是起到重置的作用，所以说CSS Reset是根据个人需求不同可以按需自定义的。

css去掉浏览器默认样式 *{margin:0;padding:0}

如何使用css3+html5来制作文字霓虹灯效果（付完整代码） 在科技日益发展的今天，人们对于审美越来越挑剔，这就要求我们对于前端开发的态度更加的严谨的同时，需要加入新鲜的元素，以达到吸引目光的目的。那么今天本文带大家了解一下如何使用css3+html5来制作文字霓虹灯效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画，且文字选中时也有很酷的动画特效；文字可动态输入，且输入的文字实时渲染霓虹灯特效。使用css3+html5来制作文字霓虹灯效果的步骤输入需要加入特效的文本。利用box-shadow的多层阴影属性，绘制霓虹管的立体效果。利用text-shadow多层阴影，绘制文字灯管，发光，投影，达到设置立体文字的效果。这里我们着重介绍一下实现霓虹灯闪烁效果的原理我们需要在文本上设置两个标签，并且让他们完全重合，上层实现灯管效果，下层实现光晕效果，再利用选择器使其不断闪烁，同时我们需要设置熄灭和点亮两个状态的text-shadow属性值，使他们以不同速度的切换，就形成了霓虹灯闪烁的效果。注意：如有对于以上内容不理解的小伙伴可以查看本站内其他文章如何使用css3实现图片的简单阴影效果（附完整代码）如何使用css3实现字体内发光效果（详解）使用css3+html5来制作文字霓虹灯效果的代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3 html5文字霓虹灯交替闪烁效果</title><style>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ""; content: none;}table { border-collapse: collapse; border-spacing: 0;} body { background-color: #222; background-image: -webkit-radial-gradient(circle, #333, #222, #111); background-attachment: fixed; overflow: hidden; font-family: "Wire One", sans-serif; font-size: 6em; color: #FFF; line-height: normal; text-align: center;}#glow { position: absolute; top: 0; bottom: 0; width: 100%; height: 1em; margin: auto; display: block;}#glow p,#glow span{ display: inline-block; color: #FFF; text-shadow: 0 0 15px;}#glow p:nth-child(odd) { -webkit-animation: bglow .3s ease infinite;}#glow p:nth-child(even) { -webkit-animation: rglow .3s ease infinite;}@-webkit-keyframes bglow { 0% { color: rgb(0, 135, 211); text-shadow: 0 0 15px; }}@-webkit-keyframes rglow { 100% { color: rgb(233, 54, 40); text-shadow: 0 0 15px; }} </style> <script> window.confirm = function(){}; window.prompt = function(){}; window.open = function(){}; window.print = function(){}; // Support hover state for mobile. if (false) { window.ontouchstart = function(){}; } </script></head><body> <section id="glow"> <p>P</p> <p>H</p> <p>P</p> <p>中</p> <p>文</p> <p>网</p></section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script></body></html>文字霓虹灯效果如图所示总结刚开始以为文字霓虹灯效果是gif动画之类的，审查元素发现居然是用html5 + CSS3动画实现的，顿时激起了我的(hao)欲(qi)望(xin)，决定要一探究竟，查看代码之后，发现原理居然是如此简单，希望本文内容可以为大家带来帮助。

css如何实现英文对话排版

精通CSS的图书目录 第1章基础知识1.1 设计代码的结构1.1.1 标记简史1.1.2 文档类型、DOCTYPE切换和浏览器模式1.1.3 有效性验证1.2 小结第2章为样式找到应用目标2.1 常用的选择器2.2 通用选择器2.3 高级选择器2.3.1 子选择器和相邻同胞选择器2.3.2 属性选择器2.3.3 层叠和特殊性2.3.4 继承2.4 规划、组织和维护样式表2.4.1 对文档应用样式2.4.2 样式指南2.5 小结第3章可视化格式模型3.1 盒模型概述3.1.1 IE和盒模型3.1.2 外边距叠加3.2 定位概述3.2.1 视觉格式化模型3.2.2 相对定位3.2.3 绝对定位3.2.4 浮动3.3 小结第4章背景图像效果4.1 背景图像基础4.2 圆角框4.2.1 固定宽度的圆角框4.2.2 山顶角4.3 投影4.3.1 简单的CSS投影4.3.2 来自Clagnut的投影方法4.4 不透明度4.5 图像替换4.5.1 FIR4.5.2 Phark4.5.3 sIFR4.6 小结第5章对链接应用样式5.1 简单的链接样式5.2 让下划线更有趣5.2.1 简单的链接修饰5.2.2 奇特的链接下划线5.3 已访问链接的样式5.4 为链接目标设置样式5.5 突出显示不同类型的链接5.6 创建类似按钮的链接5.6.1 简单的翻转5.6.2 图像翻转5.6.3 Pixy样式的翻转5.6.4 CSS精灵5.6.5 用CSS实现翻转5.7 纯CSS工具提示5.8 小结第6章对列表应用样式和创建导航条6.1 基本列表样式6.2 创建基本的垂直导航条6.3 在导航条中突出显示当前页面6.4 创建简单的水平导航条6.5 创建图形化导航条6.6 简化的“滑动门”标签页式导航6.7 Suckerfish下拉菜单6.8 CSS图像映射6.9 远距离翻转6.10 对于定义列表的简短说明6.11 小结第7章对表单和数据表格应用样式7.1 对数据表格应用样式7.1.1 表格特有的元素7.1.2 数据表格标记7.1.3 对表格应用样式7.1.4 添加视觉样式7.2 简单的表单布局7.2.1 有用的表单元素7.2.2 基本布局7.2.3 其他元素7.2.4 修饰7.3 复杂的表单布局7.3.1 可访问的数据输入元素7.3.2 多列复选框7.3.3 表单反馈7.4 小结第8章布局8.1 计划布局8.2 设置基本结构8.3 基于浮动的布局8.3.1 两列的浮动布局8.3.2 三列的浮动布局8.4 固定宽度、流式和弹性布局8.4.1 流式布局8.4.2 弹性布局8.4.3 流式和弹性图像8.5 faux列8.6 高度相等的列8.7 CSS列8.8 CSS框架与CSS系统8.9 小结第9章 bug和修复bug9.1 捕捉bug9.2 捕捉bug的基本知识9.2.1 尽量在一开始就避免bug9.2.2 隔离问题9.2.3 创建基本测试案例9.2.4 修复问题，而不是修复症状9.2.5 请求帮助9.3 拥有布局9.3.1 什么是布局9.3.2 布局的效果9.4 解决方法9.4.1 IE条件注释9.4.2 关于hack和过滤器的一个警告9.4.3 明智地使用hack和过滤器9.4.4 应用IEforMac带通过滤器9.4.5 应用星号HTMLhack9.4.6 应用子选择器hack9.5 常见bug及其修复方法9.5.1 双外边距浮动bug9.5.2 3像素文本偏移bug9.5.3 IE的重复字符bug9.5.4 IE的“藏猫猫”bug9.5.5 相对容器中的绝对定位9.5.6 停止对IE的批评9.6 分级浏览器支持9.7 小结第10章实例研究：RomaItalia10.1 关于这个实例研究10.2 基础10.2.1 着眼于HTML10.2.2 reset.css10.3 1080布局和网格10.4 高级CSS和CSS特性10.4.1 网站需要在每种浏览器中看起来完全一样吗10.4.2 属性选择器10.4.3 box-shadow、RGBa和text-overflow10.5 字体链接和更好的Web排版10.5.1 按以前的方式设置font-size10.5.2 标点符号悬挂10.5.3 多栏文本布局10.5.4 @font-face10.5.5 Cufón，向@font-face发展的过渡手段10.6 用AJAX和jQuery增加交互性10.6.1 AJAX10.6.2 jQuery10.6.3 使用AJAX和jQuery实现搜索10.7 小结第11章实例研究：ClimbtheMountains11.1 关于这个实例研究11.2 样式表的组织和约定11.2.1 screen.css11.2.2 reset11.2.3 使用条件注释的IE样式表11.3 网格灵活性11.4 用body类控制导航11.4.1 突出显示当前页面11.4.2 控制blockquote所处的层11.5 战略性地选择元素11.5.1 深层后代选择器11.5.2 :first-child伪类11.5.3 相邻同胞选择器11.6 透明度、阴影和圆角11.6.1 我们的目标11.6.2 说明图像覆盖和RGBa透明度11.6.3 组合类11.6.4 border-radius11.6.5 box-shadow11.7 定位列表和显示内容11.7.1 圆角11.7.2 主海拔图11.8 小结

网站现有二级菜单，怎么用CSS在二级菜单下显示三级菜单。求好心人帮忙。_html/css_WEB-ITnose HTML码如下：Miyo Industrial Co.,Ltd - deepne web design Home Product display Mens Watch Ladies Watch About Us EnterpriseCulture Honor Group Home dee_gray.CSS代码如下：/*---CSS base---*//*reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul {list-style:none}caption,th {text-align:left}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}q:before,q:after {content:""}abbr,acronym { border:0}/*fonts*/.fb{font-weight:bold}.fn{font-weight:normal}.t2{text-indent:2em}.lh150{line-height:150%}.lh180{line-height:180%}.lh200{line-height:200%}/*position*/.pr{position:relative}.pa{position:absolute}.bc{margin-left:auto;margin-right:auto;}.fl{float:left;display:inline}.fr{float:right;display:inline}.cb{clear:both}.cl{clear:left}.cr{clear:right}.vm{vertical-align:middle}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}.tl{text-align:left}.tc{text-align:center}.tr{text-align:right}.abs-right{position:absolute;right:0}.zoom{zoom:1}.hidden{visibility:hidden}.none{display:none}.text-v{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*width*//*height*//*margin*/.m10{margin:10px}.m15{margin:15px}.m30{margin:30px}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt50{margin-top:50px}.mt100{margin-top:100px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.mb50{margin-bottom:50px}.mb100{margin-bottom:100px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}/*color*/.gray{color:gray;}.green{color:green;}.red{color:red;}.textover{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/*---CSS main---*//*global*/body{font:12px "Microsoft yahei", Tahoma, Arial, Helvetica, Sans-serif;color:#555;}a{text-decoration:none; outline:none;color:#09f;}/*a:hover{color: #ae2e8d;}*/input[type=submit],botton{cursor: pointer;}.w{width:990px;margin-left:auto;margin-right:auto;}#mainner .w{overflow:hidden;}#banner .w{position: relative;}#header,#banner,#mainner,#footer,.c{width:100%; min-width:990px;}/*sprite*/.ico,#header,.siteTips .vip-login a,.siteTips .pro-tab a,.siteTips .hot-line a,.locationBar .conte-nav a,.locationBar .conte-nav span,.locationBar .local-nav a,.more a,.footer,#btn-scrollTop a{background: url(../images/yzj-sprite-en.png) no-repeat;}.locationBar{background: url(../images/yzj_location-bg.png) repeat-x;}/*header*/#header{height: 100px; background-repeat: repeat-x; position: relative; z-index: 2;}#header .w{position: relative; height: 100%;}/*head-top*/.logo{position: absolute; left: 0; bottom: 10px; width: 200px; height: 65px;}.siteTips{position: absolute; right: 0; top: 2px; height: 15px; color: white; zoom:1;}.siteTips a{color: #eee;}.siteTips span{float: left; margin-left: 8px;}.siteTips .vip-login a{background-position: -533px -193px; padding-left: 15px;}.siteTips .pro-tab a{background-position: -533px -217px; padding-left: 15px;}.siteTips .hot-line a{background-position: -529px -237px; padding-left: 18px;}.siteTips .smallTip a,.siteTips .bigTip a{display: inline-block; padding-left: 15px; background-position: -338px -158px;}.siteTips .bigTip a{background-position: -235px -159px;}.siteTips .bigTip{width: 79px; background-position: -249px -138px;}.siteTips .noIcoTip a{padding: 0;background: none;}/*nav*/.nav{position: absolute; right: 0; bottom: 0; height: 42px; z-index: 9; clear: both;}.nav-ul{zoom:1; height: 100%;}.nav-ul .nav-item{float: left; position: relative;}.nav-item .nav-item-a{ display: block; border-top: 1px solid #eee; border-left: 1px solid #ddd; height: 41px; line-height: 41px; padding: 0 20px; background-color: #f1f1f1; text-align: center; font-size: 14px; color: #666; _width: 50px; white-space: nowrap;}.nav-item .nav-item-a:hover, .nav .hover .nav-item-a,.nav .on .nav-item-a{background-color: #09f; color: white; border-color: #09f;}.sub-nav{ display: none; position: absolute; top: 42px; left: 0; width: 130px; height: auto; box-shadow: 5px 6px 12px 0 rgba(66,66,66,0.1); /*filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=155,strength=3);*/ z-index: 10;}.sub-nav-item{clear: both; border-bottom: 1px solid #fff;}.sub-nav-item a{ clear: both; display: block; padding-left: 15px; height: 28px; line-height: 28px; text-align: left; font-size: 12px; color: #888; border-bottom: 1px solid #e2e2e2; background-color: #f1f1f1;}.sub-nav-item a:hover{background-color: #09f; color: #fff;}.sub-nav-child{ clear: both; border-bottom: 1px solid #fff; /*filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=155,strength=3);*/ z-index: 10;}/*banner*/#banner .w{border-bottom: 1px solid #eee;}.bannerMini{height: 240px; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden;}/*mainner*/#mainner .w{margin-top: 0;}.locationBar{height: 28px; line-height: 26px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #d9d9d9; margin-bottom: 10px; padding-bottom: 0; margin-top: -1px; background-repeat: repeat-x; box-shadow: 0 3px 10px 0 rgba(99,99,99,0.2); filter:progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=180,strength=12)9;}.locationBar .conte-nav,.locationBar .local-nav{max-width:30%;height:28px;line-height:28px;white-space: nowrap;overflow: hidden;}.locationBar .conte-nav{max-width:60%;}.locationBar .conte-nav a,.locationBar .conte-nav span,.locationBar .local-nav a{ display: inline-block; height:28px; padding-right: 18px; margin-right: 5px; background-position: right -425px; color: #999; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.locationBar .conte-nav span,.locationBar .conte-nav a:hover,.locationBar .local-nav a:hover{color: #09f;}.locationBar .local-nav a{margin-right: 8px; background-position: right -466px;}.locationBar .local-nav span{display: inline-block; height:100%; color: #999; overflow: hidden;}现需要鼠标移动到mens watch上面时显示A watch和B watch。移动到ladies watch上时，显示c watch和d watch.。真心求帮助。谢谢各位程序员。回复讨论(解决方案)三级？要求高了点吧 jquery多级下拉菜单插件n级都行，按照别人的结构来body{background:#999}level 1_1level 2_1level 3_1level 3_2level 3_2_1level 3_2_2level 3_2_2_1level 3_2_2_2level 1_2level 1_3

CSS是什么?和HTML有什么区别? 简单来说 css 就是设置样式的，而 html 是显示内容的。css 是针对 html 上的内容进行的样式设置，没有内容设置样式也没有用对吧？css 怎么用？这个问题太笼统了，还是找官方的 api 自主学习比较好

想请网页HTML , CSS 是什么意思？请大家指导一下。 上面的回答那么长,谁想看,估计你也是复制别人的 Html就是超文本标记语言。实际点就是你打开网页，点击右键查看源文件，记事本里的就是HTML,你如果想了解更加清楚，就买本书去学，这个东西很简单 CSS层叠样式表，主要是把美化网页的效果

css 行内元素有哪些 h1~h2 好像不是行内元素吧

CSS伪类怎么实现第一个栏目默认显示，然后鼠标悬停在别的栏目自动隐藏第一个？ 一基本语法　　平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：　　p:before {}　　　　不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了：　　img::after {}　　　　这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：　　[String] - 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：　　a:after { content: "↗"; }　　　　attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：　　a:after { content:"(" attr(href) ")"; }　　　　url() / uri() – 用于引用媒体文件。示例：　　h1::before { content: url(logo.png); }　　　　counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：　　h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }　　　　二进阶技巧　　清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：　　.clear-fix { *overflow: hidden; *zoom: 1; }.clear-fix:after { display: table; content: ""; width: 0; clear: both; }　　　　许多人喜欢给 blockquote 引用段添加巨大的引号作为背景，这种时候我们就可以用 :before 来代替 background 了，即可以给背景留下空间，还可以直接使用文字而非图片：　　blockquote::before {content: open-quote;position: absolute;z-index: -1;color: #DDD;font-size: 120px;font-family: serif;font-weight: bolder;}　　　　三特效妙用　　除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”" 。否则，其他的样式属性一概不会生效。　　悬浮出现方括号　　鼠标移上链接，出现方括号：　　a {position: relative;display: inline-block;outline: none;text-decoration: none;color: #000;font-size: 32px;padding: 5px 10px;}a:hover::before, a:hover::after { position: absolute; }a:hover::before { content: "5B"; left: -20px; }a:hover::after { content: "5D"; right: -20px; }　　　　同样，我们只需要配合 display: block 和 position: absolute ，就可以将其当成两个容器，拼合成悬浮出现双边框的特效：　　a {position: relative;display: inline-block;outline: none;text-decoration: none;color: #000;font-size: 32px;padding: 0 10px;}/* 大框 */a:hover::before, a:hover::after { content: "";display: block;position: absolute;top: -15%%;left: -14%%;width: 120%;height: 120%;border-style: solid;border-width: 4px;border-color: #DDD;}/* 小框 */a:hover::after {top: 0%;left: 0%;width: 100%;height: 100%;border-width: 2px;}

CSS和HTML有什么不同？ JAVA特效代码

cssalign-content属性怎么用 align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式。CSS align-content属性作用：align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式；它修改了flex-wrap属性的行为。使用条件：必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;然后设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。说明：该align-content属性是对其容器内部的项目起作用，对父元素进行设置；容器内必须有多行的项目，才能渲染出效果。语法：align-content: stretch|center|flex-start|flex-end|space-between|space-around;取值说明：stretch：默认值，元素被拉伸以适应容器，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。center：取消项目之间的空白并把所有项目垂直居中，使得元素位于容器的中心。flex-start：取消项目之间的空白，并把项目放在容器顶部，使得元素位于容器的开头。flex-end：取消项目之间的空白并把项目放在容器底部，使得元素位于容器的结尾。space-between：使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。space-around：使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。CSS align-content属性使用示例<!DOCTYPE html><html><head><style> #main1,#main2,#main3,#main4,#main5,#main6{width: 70px; height: 250px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin:10px; float:left;}div *{ width: 70px; height: 70px;}#main1 { -webkit-align-content: stretch; align-content: stretch;}#main2 { -webkit-align-content: center; align-content: center;}#main3 { -webkit-align-content: flex-start; align-content: flex-start;}#main4 { -webkit-align-content: flex-end; align-content: flex-end;}#main5 { -webkit-align-content: space-between; align-content: space-between;}#main6 { -webkit-align-content: space-around; align-content: space-around;}</style></head><body><h1>align-content属性</h1><div id="main1"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div><div id="main2"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div><div id="main3"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div><div id="main4"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div><div id="main5"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div><div id="main6"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div></body></html>效果图：

html编码问题如何解决。。。_html/css_WEB-ITnose HTML 编码网页设计做网页设计，一开始用的uft-8编码做的，但是做到产品展示调用，新闻调用那块，用别的网站拷代码，结果那网站是gb2312的网站，拷过来直接乱码！！！然后我用记事本过滤了一遍还是不管，新建个uft-8的页面，吧代码拷过去，然后调用那个页面还是不管，求个能共存的方法！！！感激不尽！回复讨论(解决方案)你用记事本过滤了一遍是指把文件编码也改成UTF8了？文件编码，声明编码（META）都一致还不行？楼上的方法应该可以的gb2312全文替换成uft-8的

网站编码改成uft-8后，引用的外部CSS文件，样式中中color颜色定义失效，如何解决？ 哎，那就是你的中文乱码了嘛，然后就导致文件失效了嘛，解析不了嘛，然后就没有effective咯，你复制出来嘛，然后再转码粘贴保存嘛，so easy嘛

用css3实现box-shadow好的实例网站? 百度：css3在线生成

电脑重启中停在Verifying DMI Pool Data...........Update Succss怎么办，按F12进入一个选项在选择硬盘行 能用就行

Css如何继承？ 具体的继承是指什么。遇到什么问题了。

css中.tit是什么意思 "."表示的是类(class)，"#"对应的是id。就这样看的话这个".tit"应该是控制页面中某些条目的标题，这样的标题有好几个。具体是什么要查看HTML，找写着" class="tit" "的标签。

Web前端单词大全（html+css+js+vue） broswer 浏览器（客户端） html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php/c…) title 标题 body 身体 head 头 div 盒子(类似收纳箱) font 字体 width 宽 height 高 background 背景 color 颜色 ul (Unordered List) 无序列表 ol (Ordered List) 有序列表 li (List Item) 列表项 dl (Definition List) 自定义列表 form 表单 action 地址 method 方法 input 输入框 text 文本 password 密码 radio 单选 checkbox 多选 select 下拉菜单 option 选项 padding 内边距 margin 外边距 border 边线 solid 直线 dashed 虚线 dotted 点线 overflow 溢出 hidden 隐藏 visibility 可见度 table 表格 thead 表头 tbody 表格内容 tr (table row) 行 td/th (table data, table headline)列 rowspan 合并行 colspan 合并列 collapse 合并 position 定位 relative 绝对定位 absolute 相对定位 fixed 固定定位 static 静态定位 script 脚本 string 字符串 number 数字 boolean 布尔 undefined 未定义 null 空(None) function 函数 document 文档 get 获取 element 元素 by 通过 id id tagName 标签名 window 窗口 object 对象 array 数字(类似python中的list列表) setInterval 定时器 clearInterval 清除定时器 $ 美元符号 next 下一个 prev 前一个（previous） parent 父母/双亲 children 孩子 click 点击 mouseleave 鼠标移开 mouseenter 鼠标进入 animate 动画 slide 滑动 fade 渐进 show 显示 hide 隐藏 test 测试 stopProperation 阻止冒泡 preventDefault 阻止默认行为 DOM document object model 文档对象模型 ajax 啊甲克斯 type 类型 url 统一资源定位符 data 数据 dataTpye 数据类型 success 成功 error 失败 done 成功 fail 失败 mustache 胡子 computed 计算 watch 监听 filters 过滤器 mounted 挂载，生成 axios vue中的ajax let 变量 const 常量

css中的typography是什么意思 Blueprint 是一款成熟的 CSS 框架，它将布局(layout)、排版(typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在网页设计时就减少了引入的代码，提高了页面加载效率。

谁cssrs.exe到底是什么东西? cssrs.exe 是存放在目录 C:Windows。 Windows 7/Vista/XP 的文件大小为 176,128 字节。这个进程在 Windows 启动时自动载入 (参看注册表项： HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionRun，HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorerUser Shell Folders)。这个不是 Windows 系统文件。这是个不知名的文件存放于 Windows 目录。程序是不可见的。总结在技术上威胁的危险度是 64% 。

在营销中，MVNO,CSM，CSR,CSI,CSS分别代表着什么？ MVNO：虚拟运营CSM：顾客满意测评体系CSR：顾客满意研究CSI：顾客满意指数CSS：顾客满意执行系统

css里面“display=block”是什么意思？是换行吗？ “display=block” 意思是是让对象成为块级元素

网页的源文件中css中“display”属性是什么意思 看下这篇文章，很详细网页链接

javaweb有个小错误啊，不知道哪里有错，新手求大神_html/css_WEB-ITnose 严重: Servlet.service() for servlet jsp threw exceptioncom.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near "from_buses" at line 1at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)at java.lang.reflect.Constructor.newInstance(Unknown Source)at com.mysql.jdbc.Util.handleNewInstance(Util.java:406)at com.mysql.jdbc.Util.getInstance(Util.java:381)at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:1030)at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:956)at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3515)at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3447)at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:1951)at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:2101)at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2548)at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2477)at com.mysql.jdbc.StatementImpl.executeQuery(StatementImpl.java:1422)at org.apache.jsp.BrowseTable_jsp._jspService(BrowseTable_jsp.java:102)at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:377)at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:852)at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)at java.lang.Thread.run(Unknown Source)回复讨论(解决方案)似乎是因为from后面少了空格"select * from" + tableName);-----------------------------------"select * from " + tableName);

HTML、JavaScript、CSS、PHP技术在Web开发中的作用是什么？ html 网页的组成部分，是一种标记性语言而不是编程语言，像你随便打开一个网页他都是由HTML搭建起来的。JavaScript 一种嵌入在浏览器内的客户端脚本语言，属于解释型语言，也就是说在运行的时候不需要编译，而是由浏览器来对他的代码翻译成浏览器本身能认识的玩意再执行，不同于编程语言的是编程语言都是需要把编写的代码编译成机器码才能执行。而他的主要作用之一就是用于特效制作，像那些网站有很多特效的，比如说鼠标放到连接上，然后点一下就出现一个登录框框什么的基本都是JavaScript实现的，还有就是验证你有没有输入内容什么的，像注册用户的时候基本都是它了。最后就是AJAX了，其实AJAX也是拿JavaScript来写的，不过他是后台执行的，传输的协议是SOPA协议，然后模拟一个表单请求达到不刷新页面来实现网页内容的替换什么的。像百度地图啊，然后还有就是注册用户的时候你输入一个用户名然后提示有没有注册了，基本都是AJAX来实现的，后台去数据库查找数据，然后再把网页上的内容更改。CSS 就相当于化妆师，像你一个HTML网页如果不用CSS来修饰的话可以说是无法见人的，就像现在一个丑女可以PS成一个神仙姐姐一样，CSS就是把HTML页面来美化的玩意。PHP 是后台服务器语言，而之前说的JAVASCRIPT是客户端脚本语言，一个执行在浏览器，一个执行在服务端，也就是说当你点一个登录之后数据传递到服务端，然后服务端肯定要对这个登录用户名和密码进行判断把？那他肯定就要用一种语言来对这些数据进行操作吧？而PHP就是这些语言中的一种，还有其他的比如asp.net，asp，Java等等。当然了他不止就是处理数据什么的这么简单，这里只是说下他的一个功能，像处理请求啊，权限管理什么的都是他可以完成的以上纯属手打，希望对你有帮助。请采纳，谢谢。。PC-系统维护群欢迎你的加入

为什么设置的vertical-align垂直居中不起作用_html/css_WEB-ITnose 为什么设置的vertical-align垂直居中不起作用: vertical-align属性可能使用并不是太频繁，但是有时候可能会使用vertical-align:middle设置对象内部的元素垂直居中对齐，但是有时候会发现此设置并非都会产生效果。代码实例如下:蚂蚁部落td{ width:200px; height:200px; border:1px solid red; vertical-align:bottom;}div{ width:60px; height:60px; background-color:#690;} 从以上代码的表现可以看出vertical-align属性起作用了。再来看一段实例代码:蚂蚁部落.parent{ width:200px; height:200px; border:1px solid red; vertical-align:bottom;}.children{ width:60px; height:60px; background-color:#690;} 以上代码的表现可以看出，这里的vertical-align属性并没有起作用。这是因为此属性只能应用于具有valign属性的元素，table元素具有valign属性，而div元素不具有，所以第二个例子中，vertical-align属性不会起作用。原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/587.html 最为原始地址是:http://www.softwhy.com

CSS中的vertical-align不起作用？ 代码贴出来看看

首页上一页 1 2 3 4 5 6 7 8 下一页尾页

猜你想看

erase object goods 重定向 rich dat database 存储过程 eternally teachers 汉堡王 port portal 机车陕西 fis proceed desc

大家在看

hamada posh koji avcc yammy proposes lingos lingoes mojave vimicro pentile wannacry veggie veggieg serto turnup netants turnto