• 关于

    CSS文本样式

    的搜索结果

回答

CSS(层叠样式表,Cascading Style Sheets)原来是被用来在网页开发中表现HTML元素样式的一种文本标记语言。HTML用来展现内容,CSS被用来设计内容的样式,这样做的好处就是内容和样式相分离。CSS先后被用到Adobe的RIA开发技术Flex,C++的GUI框架Qt以及JavaFX技术上。如果对CSS不是很熟悉,没关系,十分钟入门CSS的一个教程:W3CSchool CSS教程。 JavaFX的CSS样式基于W3C CSS的2.1版本,是CSS 2.1的一个子集,不包含CSS 2.1的所有特性。同时JavaFX对该版本的CSS有所扩展。参考文档:JavaFX CSS Reference Guide。

问问小秘 2019-12-26 14:10:19 0 浏览量 回答数 0

回答

css中的字体样式:font-family 设置文本的字体系列font-size 设置文本的字号大小color 设置文本的色彩(前景色)font-weight 设置文本的粗细font-style 设置文本的风格(斜体样式)font 复合属性,在一个字体的声明中设置字体的常用属性

xwaby 2019-12-02 00:58:33 0 浏览量 回答数 0

问题

CSS去掉子元素继承的下划线样式

a123456678 2019-12-01 19:32:42 857 浏览量 回答数 1

阿里云爆款特惠专场,精选爆款产品低至0.95折!

爆款ECS云服务器8.1元/月起,云数据库低至1.5折,限时抢购!

问题

CSS去掉子元素继承的下划线样式

杨冬芳 2019-12-01 19:36:46 1012 浏览量 回答数 1

问题

请教JQ中attr()和css()的区别?我老是分不清楚

杨冬芳 2019-12-01 19:47:50 1298 浏览量 回答数 1

回答

解决方法:需要向css样式中添加如下样式body {-webkit-touch-callout: all; -webkit-user-select: all; -khtml-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all;}其中样式可选值:auto——默认值,用户可以选中元素中的内容none——用户不能选择元素中的任何内容text——用户可以选择元素中的文本element——文本可选,但仅限元素的边界内(只有IE和FF支持)all——在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中。-moz-none——firefox私有,元素和子元素的文本将不可选,但是,子元素可以通过text重设回可选。

a123456678 2019-12-02 02:21:49 0 浏览量 回答数 0

回答

IE的IE7和Quirks模式下,文本颜色和对齐方向都可以正常设置IE8(含)以上以及其他浏览器均不支持。 CSS具体样式对col和colgroup支持的细节,我找到如下说法: The style attribute (or induced style from id, class, etc.) only takes into account properties that sensibly apply to the column itself. That is, while each can contain text content and thus can have attributes like text-align set, the element does not contain text and thus none of the text-level styles apply. (Block-level stuff like background-color still works.)意思就是 col 元素不包含文本,所以被指定的有关于文本级别的样式是不会被应用的。

a123456678 2019-12-02 02:19:49 0 浏览量 回答数 0

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1

回答

css图片水平居中1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 比如: 2.利用文本的水平居中属性text-align: center 比如: css图片垂直居中 1.利用高==行高实现图片垂直居中这种方法是要注明高度才可以使用,代码如下: 2.利用绝对定位实现图片垂直居中如果已知图片的宽度和高度可以这样,代码如下: <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />

星空万里 2019-12-02 00:58:27 0 浏览量 回答数 0

问题

【精品问答】前端实战100例之JavaScript篇

珍宝珠 2020-02-14 15:10:56 1456 浏览量 回答数 1

问题

【精品问答】前端开发必懂之CSS技术八十问

茶什i 2019-12-01 22:00:52 1642 浏览量 回答数 1

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。以下都是我自己所想,希望可以帮到和我一样的初学者。 为了彻底明白这个问题,必须先弄明白几个问题。 :第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。 第一,绝对定位与浮动的区别。 复制代码代码如下: <body> <div id="container"> <div id="A">你好</div> <div id="B"> 第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。 </div> </div> </body> 绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。例如,对于上面的html片段,如果将元素A定位到左上角的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。CSS代码和效果图如下。 复制代码代码如下: body { color:#FFF; } container { position:relative; width:500px; height:250px; background:#039; } A { position:absolute; top:0; left:0; width:200px; height:200px; background:#C00; } 代码如下: 而浮动,会以某种方式将浮动元素从文档的正常流中删除,并把浮动元素向左边和右边浮动,不过它还是会影响布局,关于浮动的有许多规则,读者可自行阅读《CSS权威指南》一书,介绍地很详细。采用CSS的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。如果将元素A向左浮动的话,CSS代码和效果图如下图所示。由此可见,浮动之后,文字跑到了元素A的右边,即实现了文字环绕浮动元素的功能(如果A不浮动的话,div是块级元素,不可能有两个div处在同一行)。 但是这儿有一小问题,如果你仔细观察CSS代码的话和效果图的话,会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流,是因为元素B确实占据了元素A之前的位置,好像元素A已经不存在了似的。只所以说会影响布局,是因为元素B里的文字并没有随之占据元素A的位置,而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了,这恰好就是浮动的目的! 复制代码代码如下: body { color:#FFF; } #container { width:500px; height:250px; background:#039; } #A { float:left; width:200px; height:200px; background:#C00; } #B { width:480px; height:230px; background:#000; CSS布局实例 大家感兴趣的内容1css控制UL LI 的样式详解(推荐)2HTML设置超链接字体颜色和点击后的字体颜色3div水平垂直居中的完美解决方案4CSS 漂亮搜索框美化代码5CSS 首行缩进两个文字6css 中的background:transparent到底是什么意思有什么7CSS自定义select下拉选择框的样式(不用其他标签模拟)8css textarea 高度自适应,无滚动条9css 设置全屏背景图片10CSS圆角效果 -webkit-border-radius(CSS3中border-rad 云服务器 . 最近更新的内容深入剖析z-index属性CSS中的content属性使用教程浅析CSS中calc()的使用CSS3定位和浮动详解CSS盒子模型是什么一些常被你忽略的CSS小知识【必看】CSS默认可继承样式详解知识普及之CSS: body{font-size: 62.5%;}这种写法的原知识普及:彻底搞懂CSS中单位px和em,rem的区别CSS教程之div垂直居中的多种方法.

杨冬芳 2019-12-02 02:40:29 0 浏览量 回答数 0

回答

accesskey:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shift +一个可激活元素 class:为元素设置类标识,多个类名用间隔分开,CSS和javascript可通过class属性获取元素 contenteditable:指定元素内容是否可编辑 contextmenu:自定义鼠标右键弹出菜单内容 data- *:为元素增加自定义属性 目录:设置元素文本方向 draggable:设置元素是否可拖拽 dropzone:设置元素长度类型:复制,移动,链接 隐藏:表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果 id:元素id,文档内唯一 lang:元素内容的的语言 spellcheck:是否启动拼写和语法检查 style:行内css样式 tabindex:设置元素获取焦点,通过tab可以导航 标题:元素相关的建议信息 翻译:元素和子孙的内容是否需要本地化

茶什i 2019-12-02 03:16:13 0 浏览量 回答数 0

问题

js如何实现css 中的direction: rtl效果

a123456678 2019-12-01 19:30:14 837 浏览量 回答数 1

回答

CSS选择器有一个:lang()伪类,可以指定特定语言的样式: .article span:lang(zh) { font-style: normal; } / this will be applied to all zh- languages */.article span:lang(en) { font-style: italic; } / ... applied to all en- languages */ 中文文字 This is an English sentence. 中文文字 值得注意的是,CSS只能根据lang属性标定好的语言来分配样式,而不能承担语言判断的任务。你需要自己使用各种方法把(和文档语言不一致的)其他语言部分包裹标定好。因为有一点是容易混淆,但必须明确的是:语言和文字其实是两回事。我们中文开发者的确习惯于看到汉字就是汉语,看到A~Z就是英语。但实际上汉字和拉丁字母(A~Z)都只是文字系统,而不是确定语言的标志。 同一套文字系统往往是多语言共享的,这样就造成了拿出一段文字,如果不理解其意义就无法反推出是哪一种语言的结果。例如:police可能是英语或法语;文字(U+6587 5B57)可能是汉语或日语*。 说了半天,就是为了说明“CSS和HTML只能标注,而不可能鉴别语言。一个CSS全自动标定英语文本”的想法是不可行的。 也许给拉丁字母一律标注lang="en"的步骤可以自动化,但也只好请题主自己动手。 CJK统一表意文字系统保证了中(含各种变体和方言,含简正两种书写系统)、日、韩、越这几个涉及汉字的语言中,只要是字形等同(或可以认为是等同)的同一汉字,就统一编为同一个编码。这可以保证同一个汉字的同一种字形,不因为语言的不同而被无意义的做出多个编码。 这除了便利性(不言而喻)之外,更有一个额外的优点:维护了文字编码的语言无关性,保证语言是语言,文字是文字,两者不被混淆在一起。

a123456678 2019-12-02 02:23:52 0 浏览量 回答数 0

问题

Web开发者不可不知的15条编码原则

技术小菜鸟 2019-12-01 21:19:56 2473 浏览量 回答数 1

问题

怎样优化网站服务器性能

以子之矛 2019-12-01 21:27:14 16743 浏览量 回答数 3

回答

CSS选择器有一个:lang()伪类,可以指定特定语言的样式: .article span:lang(zh) { font-style: normal; } /* this will be applied to all zh-* languages */ .article span:lang(en) { font-style: italic; } /* ... applied to all en-* languages */ <html lang="zh-cmn-Hans"> <p>中文文字 <span lang="en-us"> This is an English sentence. </span> 中文文字</p> </html> 值得注意的是,CSS只能根据lang属性标定好的语言来分配样式,而不能承担语言判断的任务。你需要自己使用各种方法把(和文档语言不一致的)其他语言部分包裹标定好。 因为有一点是容易混淆,但必须明确的是:语言和文字其实是两回事。我们中文开发者的确习惯于看到汉字就是汉语,看到A~Z就是英语。但实际上汉字和拉丁字母(A~Z)都只是文字系统,而不是确定语言的标志。 同一套文字系统往往是多语言共享的,这样就造成了拿出一段文字,如果不理解其意义就无法反推出是哪一种语言的结果。例如:police可能是英语或法语;文字(U+6587 5B57)可能是汉语或日语*。 说了半天,就是为了说明“CSS和HTML只能标注,而不可能鉴别语言。一个CSS全自动标定英语文本”的想法是不可行的。 也许给拉丁字母一律标注lang="en"的步骤可以自动化,但也只好请题主自己动手。 CJK统一表意文字系统保证了中(含各种变体和方言,含简正两种书写系统)、日、韩、越这几个涉及汉字的语言中,只要是字形等同(或可以认为是等同)的同一汉字,就统一编为同一个编码。 这可以保证同一个汉字的同一种字形,不因为语言的不同而被无意义的做出多个编码。 这除了便利性(不言而喻)之外,更有一个额外的优点:维护了文字编码的语言无关性,保证语言是语言,文字是文字,两者不被混淆在一起。

杨冬芳 2019-12-02 02:32:26 0 浏览量 回答数 0

回答

1.a.pull-left的设置了float:left(通过浏览器控制台查看CSS实际CSS样式),就作为一个块级元素脱离正常文档流被渲染2.如果div.content不设置overflow:hidden,那么div.content是一个普通的div块级别元素,其左上角将对齐其包含块元素的左上角。并且位于a.pull-left元素的下方,按float元素的特点,其周边元素的文本将围绕其显示如图所示,可以理解为布局div.content元素时权当a.pull-left元素不存在3.如果div.content设置overflow:hidden,那么div.content构成一个独立的BFC(块级格式化上下文),而一个BFC区域不会与float元素重叠并且其中的子元素对外部元素在布局上互不影响(这点和非BFC区域不同);那么导致的结果就是div.content元素向右移动直到和a.pull-left元素区域不发生重叠(div.content元素的左外边距和a.pull-left元素右外边距不重叠),此时的效果和div.content设置float:left的效果相同如图所示:

杨冬芳 2019-12-02 02:57:41 0 浏览量 回答数 0

问题

表格如何定义列样式的文本属性

a123456678 2019-12-01 19:25:19 925 浏览量 回答数 1

回答

HTML5究竟是什么? (注:目前网上介绍HTML5的文章都是千篇一律,譬如某个时间段发布某个版本,这种对于初学者或者从实用性角度来看,没有太多甚至完全不具备学习价值,只能说了解到它的出现时间,但是具体作用是什么呢?基本都是没有详细阐述,不少读者看完估计还是一头雾水的,因此笔者会用更加通俗易懂的话语,让各位能够知道HTML5究竟是什么) 首先HTML是定义了网页的结构,那么HTML5则是其不断更新的一部分。它目前有两个版本, 第一个是万维网联盟的5.2推荐标准(w3c) ,是为网页内容开发者设计的;第二个是浏览器开发者的 HTML 生活标准(HTML Living Standard) ,由微软网页超文本技术工作小组公司(WHATWG)维护。 HTML5引入了一些新的元素和属性,同时也是一个 W3C推荐标准。Web 应用程序以这些 HTML 元素为基础运行,同时包含了 HTML4和 XHTML,但是向后兼容以前的版本。另外,它与 PHP 更加兼容,新的 api 包括拖放、网络消息和网络存储、协议处理程序注册、微数据、画布、文本轨道和定时媒体播放,还有一个标准化的服务器发送事件自动更新和更好的浏览器支持,这些新的 api 为网页设计者提供了更好的控制。对于生活标准版本,新的 API 还包括地理定位、web 音频(Javascript 音频应用程序)、web RTC 和 web 加密 API。 这些元素和属性反映了现代网站的典型用法,其中包括超文本标记语言和对文档对象模型(DOM)脚本的新兴趣。HTML5语法还允许在文档内部使用 MathML,而 indexeddb将存储扩展到本地存储之外。并且从 HTML 4.01中删除了一些不推荐的元素,包括像 font 和 center 这样的纯表示元素,这些元素的效果早已被更强大的层叠样式表所取代。此外,DOM 脚本在 Web 行为中的重要性也得到了重新强调。 HTML5知识点有哪些? 经过前面的一些讲解,相信各位对HTML5已经有初步的认识,那么接下来我们将会正式探讨下,究竟有哪些知识点需要我们学习掌握的呢?(注:由于HTML5涵盖知识点较多,且本文属于入门级别的知识指南,不适宜进行全面深入地讲解,因此笔者筛选出了必须掌握的知识点,希望能够让初学者迅速入门) 知识点一:HTML5主体结构 <!doctype> 声明必须位于 HTML5 文档中首行,声明此为HTML5文档 标签限定了文档的开始点和结束点,内部包含文档头部和主体 标签用于定义文档的头部,内部的元素可以引用脚本或者样式表、提供元信息等等,并且描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 标签声明使用utf-8编码 标签定义文档标题 定义文档的主体,内部包含文档的所有内容,比如文本、超链接、图像、表格和列表等等,均可展示给用户浏览器显示出来(注释除外) 以上就是HTML5主体结构的讲解,可能有细心地读者就会发现,有的标签是一个的,有的又是两个对称的,那么这是何解呢? 这里就引入一个知识点,通常情况下绝大多数标签都是双标签,也就是需要写成格式,但是也有的单标签也称为自闭合标签是不需要结束符的,如 等,那么这些标签具体用法又是如何呢?下面我们将会进行常用标签的讲解! 知识点二:HTML5常用标签 众所周知,HTML5简单点说就是由一个个标签组成的文档,既然如此我们就需要学习,每一个标签究竟代表着什么含义如何使用呢?(因为标签实在太多,倘若全部阐释一遍,怕初学者们嫌弃篇幅太长感到枯燥,或者是知识点太多很难吸收掌握,因此笔者精选出一些较为常用的标签进行讲解,对于标签可能有多个属性可以选择,笔者同样会挑选出较为常用属性进行讲解) 注:以下标签,笔者没有截效果图,建议初学者自主尝试 注释标签:在我们日常编写代码时候,为了日后方便自己查看或者是别人查阅,我们通常会在某些地方写上注释标签,里面内容不会展示给浏览器用户看到 阿里云开发者社区 链接标签:超链接跳转,把需要跳转的网址写到标签的href里面,然后在开始标签和结束标签之间可以写内容展示出去,当用户点击内容将会发生跳转 换行标签:换行作用,有的小伙伴可能看到这里会说,为什么我写也是有效果的呢?这种写法不能说错误只能说是老版本的规范,按照HTML4.0规范都需要按照XHTML的写法,也就是对于单标签都是采用加斜杠的写法(下同) 按钮 按钮标签:按钮上需要展示什么文字,可在开始标签和结束标签之间写入,现阶段若写静态网站用得较少,后期学JS制作动态网站或者做交互时候比较常用 内容 块级标签:标签本身没有特殊含义,那么在其里面可以写文本内容,或者是加入其它标签均可,凡是加入其内部所有东西都会被其所包裹,形成一个独立的块级区域并且独自占用一行(css可格式化) 标题 标题标签:用于定义标题,从h1至h6均可根据自身需求选择 分隔符标签:起到装饰分隔作用,默认显示为一条黑色的水平线 图片标签:展示图片,src里面放置图片的链接,然后有时候可能出现各种原因导致图片未能加载,那么系统会自动展示alt里面的文字内容 输入框标签:默认是输入框,当然其有多个属性可以选择,然后较为常用的是type属性,该属性又有多个值可供选择,如: password 用户输入任何文本内容均会显示为小圆点 checkbox 选择框 Button按钮 列表 列表标签:通常用于展示一列数据,而且数据所采用的css样式均相同,譬如导航栏、当然还有 有序列表不过较为少用 段落 段落标签:写在内部的一段文字将会被定义为一个段落 脚本标签:现阶段不会用到,等学习到js需要用到,初学者可在标签内部写js代码,随着学习深入可以采用外部写好js文件后导入 文字 脚本标签:通常需要搭配css样式进行使用,对部分内容进行样式修改 样式标签:现阶段不会用到,等学习到css需要用到,样式需要写在标签内部 HTML5入门知识指南 经过前面的一系列学习,相信各位已经初步掌握HTML5的使用,能够制作一些简单的界面了,当然对于学习能力较强或者有一定基础的同学,可以自主深入学习HTML5深层次的知识点,当能够熟练敲出你想要的界面时候,那建议开始学习CSS让界面变得更加美丽,笔者下期将会给各位带来CSS入门知识指南,欢迎大家踊跃参与学习,当然如果有童鞋看完本文,对于某些知识点还是不太明白,或者是对下一期学习有什么建议,欢迎各位在下方评论区留言哦,如果觉得笔者文章写得不错,那么也可以分享给朋友一起学习,咱们下期再见啦!

剑曼红尘 2020-03-03 17:56:06 0 浏览量 回答数 0

回答

@Roddy###### 初始化的时候有这么一堆值。 配置编辑器的工具栏,其中”/”表示换行,”|”表示分隔符。 数据类型: Array 默认值: [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ] source HTML代码 preview 预览 undo 后退 redo 前进 cut 剪切 copy 复制 paste 粘贴 plainpaste 粘贴为无格式文本 wordpaste 从Word粘贴 selectall 全选 justifyleft 左对齐 justifycenter 居中 justifyright 右对齐 justifyfull 两端对齐 insertorderedlist 编号 insertunorderedlist 项目符号 indent 增加缩进 outdent 减少缩进 subscript 下标 superscript 上标 formatblock 段落 fontname 字体 fontsize 文字大小 forecolor 文字颜色 hilitecolor 文字背景 bold 粗体 italic 斜体 underline 下划线 strikethrough 删除线 removeformat 删除格式 image 图片 flash Flash media 视音频 table 表格 hr 插入横线 emoticons 插入表情 link 超级链接 unlink 取消超级链接 fullscreen 全屏显示 about 关于 print 打印 code 插入程序代码 map Google地图 baidumap 百度地图 lineheight 行距 clearhtml 清理HTML代码 pagebreak 插入分页符 quickformat 一键排版 insertfile 插入文件 template 插入模板 anchor 插入锚点 editor = K.create('textarea[name="content"]', {             width : '800px',             height : '480px',             items : [    ] } 少写几个就行了。  ######真的很感谢,但是怎么修改图标的样式(换个背景)和大小呢?###### 该图标需要修改theme/default/default.css 默认的样式,根据你想要的效果,需要修改下边几项。 .ke-icon-image { background-position: 0px -496px; width: 16px; height: 16px; } .ke-icon-flash { background-position: 0px -512px; width: 16px; height: 16px; } .ke-icon-media { background-position: 0px -528px; width: 16px; height: 16px; } 作者默认使用的图标来自一张图片上,是截取得来的。 你可以在css中加入你自己的图标。 ######决定样式不行,该样式表,css里面自己调,用火狐看一下那个样式,那个文件地址,是在不会换样式的话,就换编辑器,第二个好像是百度出的富编辑器。###### 看我刚改的样式 问题就是初始化Css是个问题。这一点没百度那个做的好,大家怎么做到的? ######大神,你这个是怎么做到的

kun坤 2020-06-03 09:37:43 0 浏览量 回答数 0

问题

创建定制的jQuery Mobile主题 - jQuery报错

montos 2020-06-04 14:18:42 5 浏览量 回答数 1

回答

HTML + CSS 前端的入门门槛极低,体现在HTML和CSS上。运行环境就是浏览器,推荐Chrome。你需要的只是一个文本编辑器,推荐Sublime Text 3,有不少好插件比如Emmet,谷歌搜一下很容易了解到的。当然你非要用记事本的话,也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。 HTML和CSS不是编程语言,前者只是结构标签,后者则是样式配置,入门是非常简单的。网上资料也有很多,推荐慕课网 HTML+CSS基础课程。 我当时是看了一本书 Head First HTML and CSS,讲得浅显易懂,不过价格比较感人,也是只翻一遍的书,没有必要买了。 迅速刷一遍慕课网,对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。 HTML5的API可以先放一放,回头再看。 接下来就是深入学习CSS了。推荐: 《CSS权威指南(第3版)》。很枯燥的一本书,但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆,以后用到肯定要再查的。着重点放在大局上,比如盒模型,浮动和定位这些,抓住重点快速过一遍。 《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主,知道CSS3有什么内容就好,记忆属性是枯燥且毫无意义的。 以上内容用时5天左右,下面是实践。 学了几天HTML和CSS了,应该也有点成果了。打开IFE2015 task1,写个静态页面吧。 我X,完全写不出来。 这是正常的。去看下别人的代码吧,看一小部分就开窍了。忘掉的属性就查书或者w3c,多尝试,不断踩坑才有进步。 画完第一张图后,别着急往下写。你的代码肯定会有如下问题 胡乱的代码缩进毫无章法的属性顺序 满页的div 不停地写id和class重写吧,是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的,我最早看的是这一份,所以代码风格也一直维持到现在。 再去看一下别人提交的代码,多看几份。当然自己也要判断,不能听风就是雨啊,人家写得不好你再去重写一次,等于你也有责任对不对。 开始重写了,会发现功力大增,写代码速度也快了很多的。 写到第三张页面的时候,应该比较熟练了。如果看到布局就大概知道应该怎么写了,那就可以进入JavaScript的学习了。 以上内容用时10天左右。 进阶部分可以回头再看: 掌握预处理工具Sass,自动化工具Gulp。 阅读Bootstrap源码。 《CSS揭秘》,极其惊艳的一本书,涵盖了CSS3的很多奇技淫巧,虽说有些地方不太实用,但让人眼前一亮,很值得看。JavaScript 这是至关重要的阶段。 强烈推荐《JavaScript高级程序设计(第3版)》,俗称红宝书。前七章是重中之重,必须反复阅读,直至完全理解,期间可配合其他书一起读。DOM,事件流,表单,JSON,Ajax与最后几章也相当重要。其余章节可以略读或跳过(比如浏览器嗅探,XML以及那些列举大量API的章节,完全可以用到再查) 推荐《JavaScript语言精粹》,俗称蝴蝶书。超薄的一本,半天就可以看完。JavaScript是一门有很多坑的语言,我个人是喜欢把这些坑点全部搞清楚的,但这本书却避而不谈了,剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。 强烈推荐《你不知道的JS》。精彩至极的一本书,将JavaScript的坑一网打尽。之前搞不懂的问题,比如闭包,this之类的都可以在这里找到答案。 ES6也是必学的内容,推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多,所以还是留个大概印象,以后写到类似的地方,查一查有没有ES6更简洁的写法就好,不必死记硬背。以及需要学会Webpack的使用,Babel和模块化就靠Webpack了。 不太推荐《JavaScript权威指南》,也就是犀牛书。那就是一本字典…… 进阶: 《JavaScript设计模式与开发实践》,设计模式是必须了解的内容,这本是写得不错的。 《高性能JavaScript》,红宝书作者的另一力作,讲了一些优化技巧与性能瓶颈问题,值得一读。 以上内容用时1个月左右,中途可穿插IFE2015 task2的题,比2016年的要简单。 这些书全部刷完的话,应该可以跟人谈笑风生了。 开始实践,IFE2016阶段二的题,想怎么刷就怎么刷吧。如果有编程经验的话,应该没什么压力了。JavaScript框架 这部分就比较自由了,每个人点的技能树都不一样的。前端的发展是爆炸式的,换工具比翻书还快,所以还是以看文档为主了。 目前主流框架经常被提及的是React,Angular,Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性,说不定过两年这些框架全都被淘汰了呢【逃 学习至少一种框架,把IFE2016刷通关吧。耗时1个半月左右。 进阶:看各种源代码。这也是我最近打算做的事情,但是好像期末考要到了TAT 最后补充一下,计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书,抽空还是要看看的: 《深入理解计算机系统》,CSAPP,也是我们专业这学期的课程(但是我的专业明明是EE啊)。 《计算机网络 自顶向下方法》,看名字就知道必读了吧。 操作系统好书挺多的,推荐一本 Operating Systems: Three Easy Pieces ,英文不够好就《现代操作系统》吧。 算法和数据结构,推荐两本:《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大,但作为一个码农,不要求你写红黑树,至少快速排序和二分查找这种要会写的吧。

1359302247831492 2019-12-02 00:16:32 0 浏览量 回答数 0

回答

的确 angular.element 不支持 wrapAll 方法,以下是我在网上找到的 angular.element 的支持方法,可供参考。addClass() - 为每个匹配的元素添加指定的样式类名after() - 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append() - 在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone() - 创建一个匹配的元素集合的深度拷贝副本contents() - 获得匹配元素集合中每个元素的子元素,包括文字和注释节点css() - 获取匹配元素集合中的第一个元素的样式属性的值data() - 在匹配元素上存储任意相关数据detach() - 从DOM中去掉所有匹配的元素empty() - 从DOM中移除集合中匹配元素的所有子节点eq() - 减少匹配元素的集合为指定的索引的哪一个元素find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代hasClass() - 确定任何一个匹配元素是否有被分配给定的(样式)类html() - 获取集合中第一个匹配元素的HTML内容next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素on() - 在选定的元素上绑定一个或多个事件处理函数off() - 移除一个事件处理函数one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器prepend() - 将参数内容插入到每个匹配元素的前面(元素内部)prop() - 获取匹配的元素集中第一个元素的属性(property)值ready() - 当DOM准备就绪时,指定一个函数来执行remove() - 将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)removeAttr() - 为匹配的元素集合中的每个元素中移除一个属性(attribute)removeClass() - 移除集合中每个匹配元素上一个,多个或全部样式removeData() - 在元素上移除绑定的数据replaceWith() -`用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合text() - 得到匹配元素集合中每个元素的合并文本,包括他们的后代toggleClass() - 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类triggerHandler() - 为一个事件执行附加到元素的所有处理程序unbind() - 从元素上删除一个以前附加事件处理程序val() - 获取匹配的元素集合中第一个元素的当前值wrap() - 在每个匹配的元素外层包上一个html元素

a123456678 2019-12-02 02:06:31 0 浏览量 回答数 0

问题

Kindeditor创建后如何隐藏文本框,尝试了很久,求帮帮忙报错 

kun坤 2020-06-03 13:09:23 9 浏览量 回答数 1

回答

png24位的图片在iE6浏览器上出现背景 解决方案:做成PNG8,也可以引用一段脚本处理. 浏览器默认的margin和padding不同 解决方案:加一个全局的 *{margin:0;padding:0;} 来统一。 IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。 这种情况之下IE会产生20px的距离 解决方案:在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别) 渐进识别的方式,从总体中逐渐排除局部。 首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 接着,再次使用 "+" 将IE8和IE7、IE6分离开来,这样IE8已经独立识别。 5.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性 解决方法:统一通过getAttribute()获取自定义属性 IE下,event对象有 x、y 属性,但是没有 pageX、pageY属性; Firefox下,event对象有 pageX、pageY 属性,但是没有 x、y 属性 解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示 解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决 超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了 解决方法:改变CSS属性的排列顺序 L-V-H-A 怪异模式问题:漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写 DTD 声明的好习惯。现在可以使用html5 推荐的写法: 上下margin重合问题:ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。 解决方法:养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。 ie6对png图片格式支持不好 解决方案:引用一段脚本处理

小柯卡力多 2019-12-02 03:21:58 0 浏览量 回答数 0

回答

楼主,你好,针对你的问题,想要实现其实也十分简单,我用你的问题截图,举一个简单的例子,里面有详细的注释,你先看,如果不懂的可以问我。下面这个是个简单的实现,还可以扩展功能,使他们适用于更多的地方。在下面的例子中,我在对应的ul和span上面都加了一个id属性,为的是能够更快的找到对应的元素。当然,根据文档的结构,也可以不设置元素id,但是需要通过结果查找出来,相对来讲,设置了属性的元素更容易理解一些。 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .selected { background-color: #ccc; } </style> </head> <body> <span id="checkedPJLi"></span> <ul id="pj_items"> <li val="djhj">定价黄金</li> <li val="jjhj">计价黄金</li> </ul> </body> <script type="text/javascript"> $(function(){ //首先,我们在元素加载完成以后,初始化pj_items下每个li对应的单击事件,也就是选中事件 $("#pj_items li").bind("click", function(){ selectedItem(this); }); }); //选中某个li响应的方法 function selectedItem(obj){ //获取当前发生单击事件的元素对象 var $elemThis = $(obj); //现在我们向元素里添加名为selected的class样式 $elemThis.addClass("selected"); //由于是单选,所以我们需要将之前之前选中的li重置回去,即取消当前选中的样式selected $elemThis.siblings().removeClass("selected"); //方法一、最后我们需要将当前选中的值放到我们需要的span上面去,也就是调用tackSelectedItem方法 //tackSelectedItem(); //方法二、当然,tackSelectedItem方法提供的是一种从全局查找选中元素的方法,还可以省略为下面的步骤,因为我们操作的当前元素就是我们想要的选项,我们可以直接取值并赋给对应的span元素 //也就是,先取得当前选中元素对应的文本内容 var txt_this = $elemThis.text(); $("#checkedPJLi").text(txt_this); } //从全局pj_items的ul查找选中li元素并将其文本内容赋值给checkedPJLi的span function tackSelectedItem(){ //首先获取id="items"的ul下选中的li元素对象 var $selectedLi = $("#pj_items").find(".selected"); //然后通过这个元素对象,可以获取想要从它身上获取的它所拥有的一切,如:文本值 var txt_item = $selectedLi.text(); //又如属性值(当然,楼主并未提到,就作为扩展吧) //var val_item = $selectedLi.attr("val"); //接下来楼主说的将值绑定到对应的span上了 $("#checkedPJLi").text(txt_item); } </script> </html> 上面给span复制的方法一和方法二,二选其一即可,如果选了方法二,就可以不用tackSelectedItem方法,即可以删除。这里写出来,只是为了你可以更好的扩展提供一下思路。比如今后,你可以通过传递ul的id属性和需要绑定的li的id属性,通过一个方法就可以使用于页面上需要相同功能的位置。比如说扩展后的方法为: /*ul_id:需要绑定选中并将值赋予span的ul的id属性值;span_id:与之对应的span元素的id属性值;selected_class:这组功能你所对应想要绑定的选中状态的样式名称(主要针对你可能需要不同的样式的情况,如果不需要刻意不传或默认一个就可以了)*/ function tackSelectedItem(ul_id, span_id, selected_class){ //首先获取id="items"的ul下选中的li元素对象 var $selectedLi = $("#"+ul_id).find("."+selected_class); //然后通过这个元素对象,可以获取想要从它身上获取的它所拥有的一切,如:文本值 var txt_item = $selectedLi.text(); //接下来楼主说的将值绑定到对应的span上了 $("#"+span_id).text(txt_item); }

小旋风柴进 2019-12-02 02:17:00 0 浏览量 回答数 0

回答

做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960px、或者常用的980px作为最小宽度 2、1024768之后稍大的分辨率就是1280768了,则可以采用1200px或者1220px作为稍大的网页宽度 3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签 4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了 5、宽度自适应需要对每个显示模块进行不同宽度的计算,在做html布局时需要大量的计算与适配。 6、宽度自适应为不同宽度显示器写布局元素时常用的css 下面我们看下,如何用js和css来自适应屏幕的大小。 一:了解高度和宽度的基础 下面用图片来说明: 网页可见区域高宽为:document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为:document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度) 网页被卷去的上左区域:document.body.scrollTop||document.body.scrollLeft 二: css自适应高度 1.两栏布局,左边固定,右边宽度自适应 方法一: //html部分 左边 正文 //css部分 *{margin:0;padding:0} #left{float:left;width:200px;background:red;} #bodyText{margin-left:200px;background:yellow; 方法二: //html部分 左边 正文 //css部分 #left{float:left;width:200px;background:red;margin-right:-100%;} #body{width:100%;float:left;} #bodyText{margin-left:200px;background:yellow;} 2.三栏布局,两边定宽,中间自适应宽度 方法一: <div id="left">左边</div>----注意和div的位置有关系 <div id="right">右边</div> <div id="center">中间</div> //css部分 #left{width:200px;background:red;float:left;} #center{width:auto;background:blue;} #right{width:200px;background:yellow;float:right;} 方法二: html部分: <div id="body"> <div id="center">中间</div> </div> <div id="left">左边</div> <div id="right">右边</div> css部分: #body{width:100%;float:left;} //设置浮动和width:100% #body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100%的使用方法 #left{width:200px;background:yellow;margin-left:-100%;float:left} #right{width:300px;background:blue;margin-left:-300px;float:left} -----如果设置为margin-left:-100%,则会跑到body的左边。 -----如果设置为margin-left:-300px(即right的宽度),则会跑到body的右边 3.关于最小宽度和最大宽度 这里依然结合布局来看,如下面的代码:自适应宽度,从而改变布局。 //html部分 <div id='container'> <div class='one'></div> <div class='two'></div> <div class='three'></div> </div> //css部分 #container{width:100%;} .one{width:20%;background:red;} .one,.two,.three{float:left; height:100px;} .two{width:60%;background:yellow;} .three{width:20%;background:blue;} @media (max-width:800px){--如果浏览器小于800px .one{width:40%;} .two{width:60%} .three{width:100%} } @media (max-width:400px)--如果浏览器宽度小于400px { .one{width:100%} .two{width:100%} .three{width:100%} } 理解什么叫最小宽度和最大宽度,最小宽度指为元素设置的最小宽度,到达最小宽度后,缩放文本不会起到任何作用 最大宽度是所有元素所能达到的一个上限,不能再继续往上增加。 三: css处理自适应高度 //html部分代码 <div id="fit"></div> //css代码 html,body{margin:0;height:100%;} #fit{width:200px;background:yellow;height:100%;border:1px solid red;} --这里同时给html和body加样式,是为了兼容各大浏览器。 IE 处于混杂模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度, 这样的话可以使布局适应浏览器窗口大小。窗体 》body》div (html ,body {overflow:scroll} 一层滚动条) 但是当处于标准模式时,body以html标签为高度参照,html标签才以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕 还要使得 html 100%使得 html获得窗口大小才行。窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到) 父级随子级高度变化而自适应变化与子级随父级高度变化而变化 <div id="fj"> 我是父级 <div id="zj1">我是子级1</div> <div id="zj2">我是子级2</div> </div> //css部分 #fj{border:4px solid red;} #zj1{border:2px solid yellow;} #zj2{border:2px solid blue;}----这种情况下,父级高度随着子级div的高度自适应的改变 如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both <div id="fj"> 我是父级 <div id="zj1">我是子级11111111111111111111111111</div> <div id="zj2">我是子级222222222222222222222222222222222222222222 222222222222222222222222222</div> <div id="clear" style="clear:both"></div>------如果去掉这句话,则父级div高度,不会随着子级的高度变化而变化 </div> //css部分 #fj{border:4px solid black;} #zj1{border:2px solid yellow;float:left} #zj2{border:2px solid blue;float:left} 高度的自适应的方法还有很多,这里不再列举。像height:auto等等。 四:js处理高度和宽度自适应问题 <div id="div1" >222222222222222222222</div> //js部分 function setHeight(obj) { var temHeight=null; //FF if(window.innerHeight) { temHeight=window.innerHeight;//包括页面高度和滚动条高度 } else { temHeight=document.body&&document.body.clientHeight; } if(temHeight>document.body.clientHeight)//页面高度 { oDiv.style.height=temHeight+"px"; } else { oDiv.style.height=document.body.clientHeight+"px"; } } window.onload=function() { var oDiv=document.getElementById("div1"); getHeight(oDiv); } 宽度自适应代码: function setWidth(obj) { var screenWidth = window.screen.width; var width; var imgURL ; if (screenWidth >= 1440) { width = "1400px"; imgURL = "1400.png";//设置不同分辨率下的图片 } else if (1024 < screenWidth && screenWidth < 1440) { width = "1200px"; imgURL = "1200.png"; } else { width = "980px"; imgURL = "980.png"; } obj.style.width=width ; obj.style.backgroundImage="url(" + imgURL + ")"; }) 五:移动端的自适应高度和宽度 移动端的相对要简单些,首先,在网页代码的头部,加入一行viewport标签。 <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> viewport是网页默认的宽度和高度,上面的意思表示,网页的宽度默认等于设备屏幕的宽度,原始缩放比例为1,即网页初始大小占屏幕面积的100%。 1:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;只能指定百分比宽度:width: xx%;或者width:auto; 2:一般使用em,尽量少使用px字体 3:使用流动布局 4:自适应网页设计”的核心,就是CSS3引入的media query模块。下载地址: http://download.csdn.net/download/song_121292057/8031781 自动探测屏幕宽度,然后加载相应的CSS文件。 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="style.css" /> -------当屏幕小于400时,就加载style.css这个文件 5:除了用html标签加载CSS文件,还可以在现有CSS文件中加载。 @import url("style2.css") screen and (max-device-width: 800px);//当小于800px屏幕时,就加载style2.css文件 6:图片的自动缩放,比较简单。只要一行CSS代码:img{ max-width: 100%;}建议根据不同的屏幕分辨率,加载不同大小像素的图片。 移动端的自适应,大体上差不多就这么多,主要核心是利用mediaquery,根据不同的屏幕大小,实现不同的布局。代码可看上面的列子。这里不再重复写。

问问小秘 2020-05-12 18:08:22 0 浏览量 回答数 0

回答

CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。NEC特殊字符:"-"连字符"-"在本规范中并不表示连字符的含义。她只表示两种含义:分类前缀分隔符、扩展分隔符,详见以下具体规则。分类的命名方法:使用单个字母+"-"为前缀布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。对以上的解释详情参见:分类方法中的“CSS内部的分类及其顺序”。注:在你样式中的选择器总是要以上面前五类开头,然后在里面使用后代选择器。  如果这五类不能满足你的需求,你可以另外定义一个或多个大类,但必须符合单个字母+"-"为前缀的命名规则,即 .x- 的格式。  特殊:.j-将被专用于JS获取节点,请勿使用.j-定义样式。后代选择器命名•约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器,如:.item为m-list模块里的每一个项,.text为m-list模块里的文本部分:.m-list .item{}.m-list .text{}。•一个语义化的标签也可以是后代选择器,比如:.m-list li{}。•不允许单个字母的类选择器出现,原因详见下面的“模块和元件的后代选择器的扩展类”。通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块或元件中生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时候效果尤为明显!后代选择器不需要完整表现结构树层级,尽量能短则短。注:后代选择器不要在页面布局中使用,因为污染的可能性较大;/ 这里的.itm和.cnt只在.m-list中有效 /.m-list{margin:0;padding:0;} .m-list .itm{margin:1px;padding:1px;} .m-list .cnt{margin-left:100px;} / 这里的.cnt和.num只在.m-page中有效 /.m-page{height:20px;} .m-page .cnt{text-align:center;} .m-page .num{border:1px solid #ddd;} 命名应简约而不失语义/ 反对:表现化的或没有语义的命名 /.m-abc .green2{} .g-left2{} / 推荐:使用有语义的简短的命名 /.m-list .wrap2{} .g-side2{} 相同语义的不同类命名方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。其他举例:.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。模块和元件的扩展类的命名方法当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。如果你的扩展类是表示不同状态,那么你可以这样命名:u-btn-dis,u-btn-hov,m-box-sel,m-box-hov等等,然后像这样使用:class="u-btn u-btn-dis"。如果你的网站可以不兼容IE6等浏览器,那么你标识状态的方法也可以采取独立状态分类(.z-)方法:.u-btn.z-dis,.m-box.z-sel,然后像这样使用:class="u-btn z-dis"。模块和元件的后代选择器的扩展类有时候模块内会有些类似的东西,如果你没有把它们做成元件和扩展,那么也可以使用后代选择器和扩展。后代选择器:.m-login .btn{}。后代选择器扩展:.m-login .btn-1{},.m-login .btn-dis{}。同样也可以采取独立状态分类(.z-)方法:.m-login .btn.z-dis{},然后像这样使用:class="btn z-dis"。注:此方法用于类选择器,直接使用标签做为选择器的则不需要使用此命名方法。注:为防止后代选择器的扩展类和大类命名规范冲突,后代选择器不允许使用单个字母。  比如:.m-list .a{}是不允许的,因为当这个.a需要扩展的时候就会变成.a-bb,这样就和大类的命名规范冲突。分组选择器有时可以代替扩展方法有时候虽然两个同类型的模块很相似,但是你希望他们之间不要有依赖关系,也就是说你不希望使用扩展的方法,那么你可以通过合并选择器来设置共性的样式。使用本方法的前提是:相同类型、功能和外观都相似,写在同一片代码区域方便维护。/ 两个元件共性的样式 /.u-tip1,.u-tip2{} .u-tip1 .itm,.u-tip2 .itm{} / 在分别是两个元件各自的样式 // tip1 /.u-tip1{} .u-tip1 .itm{} / tip2 /.u-tip2{} .u-tip2 .itm{} 防止污染和被污染当模块或元件之间互相嵌套,且使用了相同的标签选择器或其他后代选择器,那么里面的选择器就会被外面相同的选择器所影响。所以,如果你的模块或元件可能嵌套或被嵌套于其他模块或元件,那么要慎用标签选择器,必要时采用类选择器,并注意命名方式,可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性。

杨冬芳 2019-12-02 02:29:13 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 企业建站模板