• 关于

    border-top-style

    的搜索结果

回答

特殊变量 一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。 //sass style //------------------------------- $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style //------------------------------- .border-top{ border-top:1px solid #ccc; } body { font: 12px/1.5; } 特殊变量 一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。 //sass style//-------------------------------$borderDirection: top !default; $baseFontSize: 12px !default;$baseLineHeight: 1.5 !default; //应用于class和属性.border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc;}//应用于复杂的属性值body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style//-------------------------------.border-top{ border-top:1px solid #ccc;}body { font: 12px/1.5;} sass参考手册 Interpolation: #{}
杨冬芳 2019-12-02 02:43:48 0 浏览量 回答数 0

问题

关于CSS的问题。为什么margin-top没效果

<!doctype html> <html> <head> <title>{{title}}</title> <link href="...
杨冬芳 2019-12-01 19:35:58 1864 浏览量 回答数 1

回答

一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。//sass style //------------------------------- $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style //------------------------------- .border-top{ border-top:1px solid #ccc; } body { font: 12px/1.5; }
a123456678 2019-12-02 02:05:17 0 浏览量 回答数 0

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

回答

垂直外边距合并问题 Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing. 多个块级元素的的margin-top和margin-bottom属性在满足一定条件下,会合并成一个值比较大的那个margin值,这就是外边距折叠或外边距合并 Margin collapsing occurs in three basic cases: 发生在以下3种情况 Adjacent siblings 相邻的兄弟块元素之间 The margins of adjacent siblings are collapsed (except when the later sibling needs to be >cleared past floats). For example:、 相邻兄弟块元素之间的上下边距将会被合并 <p>The bottom margin of this paragraph is collapsed...</p> <p>...with the top margin of this paragraph.</p> Parent and first/last child 父元素和它的第1个子元素和最后一个子元素之间 If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent. 如果父元素没有border-top、border-bottom,padding-top、padding-bottom,行内元素,和clearance属性来隔离与第1个块级子元素的margin-top,或没有border,padding,内联元素,height,min-height,max-height属性来隔离与最后一个块级子元素的margin-bottom属性,那么它们之间的margin-top和margin-bottom属性合并 Empty blocks 空块级元素 If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse. 如果一个块级元素没有border-top、border-bottom,padding-top、padding-bottom,行内元素,height,min-height,max-height属性来隔离自身的margin-bottom和margin-top属相,那么margin-top和maring-bottom将合并 More complex margin collapsing (of more than two margins) occurs when these cases are combined. 当上面3种情况组合出现的时候,情况和复杂些 These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero. 以上规则在margin-top、margin-bottom为0的情况下依旧适用,那么就会出现第1个子元素和最后一个子元素的margin出现在父元素外面的情形,请不要奇怪 When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin. 当margin-top、margin-bottom为负值时,规则依旧适用,取值为最大正值和最小负值之间的和 Margins of floating and absolutely positioned elements never collapse. floating元素和绝对定位的元素margin值绝对不会合并 <div style="width:400px;height:400px;background-color:blue;"> <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div> </div> 就符合第2种情况父子元素垂直边距的合并外层DIV元素没有margin-top值没有指定,就认为其值为0第1个块级子元素的maring-top为100px,按照合并规则,2个margin-top合并成一个100px的margin-top,也即是父DIV的margin-top为100px,同时子元素共享了父元素的margin-top区域,其内边框位置现在父DIV的top位置视觉效果就如同没有外边距合并按正常理解的效果: <div style="width:400px;height:400px;background-color:blue;margin-top:100px;"> <div style="width:200px;height:200px;background-color:red;"></div> </div> <div style="width:400px;height:400px;background-color:blue;border-style:solid;"> <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div> </div> 就是没有垂直外边距合并的效果如果代码修改成 <div style="width:400px;height:400px;background-color:blue;border-left-style:solid;"> <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div> </div> 或 <div style="width:400px;height:400px;background-color:blue;border-right-style:solid;"> <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div> </div> 还是执行垂直外边距合并
杨冬芳 2019-12-02 02:55:02 0 浏览量 回答数 0

问题

css :first-child 兼容IE6,7的方法this.previousSibling什么意思

不懂expression_r(this.previousSibling==null?"none":"solid");代码什么意思,求大神解释一下。 #sidebar li:first-child{ border-top-style:none...
杨冬芳 2019-12-01 19:36:57 1062 浏览量 回答数 1

问题

css :first-child 兼容IE6,7的方法this.previousSibling什么意思?

不懂expression_r(this.previousSibling==null?"none":"solid");代码什么意思,求大神解释一下。 #sidebar li:first-child{ border-top-style:none...
杨冬芳 2019-12-01 19:36:56 768 浏览量 回答数 1

问题

css :first-child 兼容IE6,7的方法this.previousSibling什么意思?

不懂expression_r(this.previousSibling==null?"none":"solid");代码什么意思,求大神解释一下。 #sidebar li:first-child{ border-top-style:none...
a123456678 2019-12-01 19:32:27 766 浏览量 回答数 1

回答

第一种:<!DOCTYPE html> <html> <body> <style> #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; } </style> <li id='star-five'> </li> </body> </html>第二种:背景图片加法 <!DOCTYPE html> <html> <body> <style> li{ background:url(http://files.jb51.net/file_images/article/201311/20131107091019.jpg?201310792652) no-repeat ; padding-left:25px; height:250px; } </style> <li id='star-five'> </li> </body> </html>
吴孟桥 2019-12-02 02:29:37 0 浏览量 回答数 0

问题

单击div时如何显示另一个div?

我知道,这个问题在这里被问过很多次了,但是所有得到的答案在解决我的问题上并不是特别有效。 我有一个名为.title3的div ,当我单击它时,我希望显示另一个名为.Content3的...
养狐狸的猫 2019-12-01 19:58:09 9 浏览量 回答数 0

回答

这种问题一般都是根据经验积累的吧,没看到有官方的文档,倒是从网上搜到一份,供参考。不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素可继承:visibility和cursor。内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。终端块状元素可继承:text-indent和text-align。列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。表格元素可继承:border-collapse。
a123456678 2019-12-02 02:20:43 0 浏览量 回答数 0

回答

偏移 offsetWidth width + padding + border offsetHeight height + padding + border offsetLeft offsetTop offsetParent 注意:没有offsetRight和offsetBottom ************************************************************************************************ 卷曲 scrollWidth width + padding scrollHeight 当内部的内容溢出盒子的时候, 顶边框的底部,计算到内容的底部;如果内容没有溢出盒子,计算方式为盒子内部的真实高度(边框到边框) scrollLeft 这个scroll系列属性不是只读的 scrollTop scroll() 此函数可以获取卷曲的高度和卷曲的宽度 function myScroll() { return { top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 }; } 滚动滚动条的时候触发事件 box(window).onscroll = function () {} ************************************************************************************************ 可视 clientWidth 获取的是元素内部的真实宽度 width + padding clientHeight 边框之间的高度 clientLeft 相当于左边框的宽度 如果元素包含了滚动条,并且滚动条显示在元素的左侧。这时,clientLeft属性会包含滚动条的宽度17px clientTop 相当于顶边框的宽度 client() 此函数可以获取浏览器可视区域的宽高 function myClient() { return { wid: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0, heit: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 }; } ---------------------------------------------------------------------------------------------- @offsetHeight和style.height的区别 demo.style.height只能获取行内样式,如果样式写到了其他地方,甚至根本就没写,便无法获取 style.height是字符串(而且带单位),offsetHeight是数值 demo.style.height可以设置行内样式,offsetHeight是只读属性 因此,一般用demo.offsetHeight来获取某元素的真实宽度/高度,用style.height来设置宽度/高度 ---------------------------------------------------------------------------------------------- @offsetLeft和style.left的区别 一、style.left只能获取行内样式 二、offsetLeft只读,style.left可读可写 三、offsetLeft是数值,style.left是字符串并且有单位px 四、如果没有加定位,style.left获取的数值可能是无效的 五、最大区别在于offsetLeft以border左上角为基准,style.left以margin左上角为基准 ---------------------------------------------------------------------------------------------- @scrollHeight和scrollWidth 标签内部实际内容的高度/宽度 不计算边框,如果内容不超出盒子,值为盒子的宽高(不带边框) 如果内容超出了盒子,就是从顶部或左部边框内侧一直到内容a的最外部分 ---------------------------------------------------------------------------------------------- @scrollTop和scrollLeft 被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
茶什i 2019-12-02 03:17:00 0 浏览量 回答数 0

回答

看下repository目录里的jar文件大小和内容对不对。有的是墙的原因导致下载回来的内容不正确回复<aclass='referer'target='_blank'>@稻谷:没呢,我把下载来的bundle文件内容贴到楼下了,帮我看看呗<aclass='referer'target='_blank'>@java小小菜现在解决了么?发现把<type>bundle</type>删除就可以正确下载,是不是bundle插件没有生效?我把jar包都删了,开代理下载,还是不行。这些错误好像不影响jar包使用吧。我记得好像是包的javadoc的错误。没啥影响。回复<aclass='referer'target='_blank'>@ipsyco:就是mina里的类不存在,mina就是我要引入的jar包   java:程序包org.apache.mina.core.buffer不存在回复<aclass='referer'target='_blank'>@java小小菜:那就把compile时候的错贴出来是不是版本问题?不是啊,现在连项目compile都通不过<preclass="brush:html;toolbar:true;auto-links:false;">下面是bundle文件内容<preclass="brush:html;toolbar:true;auto-links:false;"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="Content-type"content="text/html;charset=utf-8"><title>AccountSuspended</title><styletype="text/css">.title{font-family:arial,verdana;font-size:9pt;font-weight:normal;}.distributers{font-family:arial,verdana;font-size:11pt;font-weight:normal;}.info{font-family:arial,verdana;font-size:8pt;font-weight:normal;}.design{font-family:arial,verdana;font-size:8pt;font-weight:normal;}.menu{border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:8pt;font-weight:normal;}.cellheader{border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:20pt;font-weight:normal;color:#F1F1F1;}.scellheader{border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:15pt;font-weight:normal;color:#F1F1F1;}.bigcellheader{border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:30pt;font-weight:normal;color:#F1F1F1;link:#F1F1F1;vlink:#F1F1F1;}.tblheader{background-color:#AAAAAA;border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:14pt;font-weight:normal;}.tdshade1{background-color:#DDDDDD;border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:10pt;font-weight:normal;}.tdshade2{background-color:#EEEEEE;border-top:1px#374646solid;border-left:1px#374646solid;border-right:1px#374646solid;border-bottom:1px#374646solid;font-family:verdana,arial;font-size:10pt;font-weight:normal;}body{font-family:arial;margin:0;padding:0;background:url(/img-sys/bg.jpg)repeat-x#dff4fe;color:#6f6f6f;font-size:12px;}a{color:#0075a9;}*{margin:0;padding:0;}h1{background:url(/img-sys/headerbg.jpg)no-repeat;height:63px;color:#fff;padding:20px;font-size:28px;font-family:centurygothic,arial;letter-spacing:-0.5px;}h2{font-size:20px;margin:0015px0;}p{margin:10px15px15px50px;}#wrap{margin:50pxauto20pxauto;width:906px;}.msg{background:url(/img-sys/contentbox.jpg)no-repeat;min-height:206px;color:#000;font-size:16px;padding:25px;text-align:center;}*html.msg{height:206px;}.msgp{border:none;margin:0010px0;}.msgul{margin:15px15px015px;}li{margin:10px0;}.note{font-style:italic;border-bottom:1pxsolid#cae0e5;border-top:1pxsolid#cae0e5;padding:15px0;margin-right:50px;}#contactinfo,.contactinfo{padding:5px0;}#contactinfoli,.contactinfoli{float:left;padding:5px;width:250px;list-style:none;font-size:14px;}p.troubleshoot{font-style:italic;border:dashed1px#dfe9ed;padding:5px;margin:10px000;}</style></head><body><h1>AccountSuspended</h1><divid="wrap"><divclass="msg"><h2><strong>ThisAccountHasBeenSuspended</strong></h2></div></div></body></html> 回复<aclass='referer'target='_blank'>@稻谷:这样啊,那我去问人借个靠谱的vpn试试,谢谢啦看上去是被墙了呢?vpn也不好使么? 怎么解决的呢
爱吃鱼的程序员 2020-06-10 13:41:54 0 浏览量 回答数 0

问题

您的照片和资料已经审核通过,提交审核

<h2 class="font-24 font-weight-normal" style="outline: 0px; color: rgb(0, 0, 0); border: 0px; fon...
persepolis 2019-12-01 20:58:43 1802 浏览量 回答数 1

问题

智能语音交互常见问题是什么?

阿里云智能语音服务常见问题 服务开通问题SDK调用问题音频格式问题服务使用问题 1. 服务开通问题 访问阿里云官网—>数加—> 智能语音交互。点击获取使用资格,注册信息。等待审核。审核通过后会收到邮件和...
nicenelly 2019-12-01 21:03:54 1205 浏览量 回答数 0

问题

求助,怎么推input里的图片?

.login_box input{ display:block; width:70%; height:37px; line-height:37px; /*background-color:#e2e2e2;*//*删除*/ backgrou...
杨冬芳 2019-12-01 20:08:11 786 浏览量 回答数 1

问题

左右数字加减(范围为0-9),用jQuery写的正常,为什么用zepto就会一直加会超过9,一直减会出现负数。

在做一个购物车左右数字加减的功能,用jQuery库写出来的可以在(0-9)的范围正常加减并且不会超出范围。我想在移动端中使用zepto库,然后在原来的基础上做了点改动,改完以后无论是加减事件都会超出(0-9)这个范围,上代码求指点。 <...
杨冬芳 2019-12-01 19:54:40 1303 浏览量 回答数 1

问题

div上还有一个div,如何把下层div中的元素显示出来?

&lt;div class="top"&gt; &lt;ul&gt; &lt;li class="phone"&gt; &lt;a href="#"&gt;手机&lt;/a&gt; ...
a123456678 2019-12-01 19:29:50 951 浏览量 回答数 1

问题

MX解析无法生效

我申请了一个.top的万网域名,加了一个MX记录,已经2天多了,ping不通mail.xxxx.top 记录类型 主机记录 解析线路 记录值MX优先级 TTL状态操作MXmail默认xxxx.t...
11johns 2019-12-01 21:07:25 6235 浏览量 回答数 4

问题

JQuery使用after()方法之后,无法找到添加的节点

html中原有节点&lt;li class="token-input-token"&gt;&lt;/li&gt;一个通过append()方法,添加&lt;li class="token-input-token"&gt;&lt;/li&gt;...
云栖技术 2019-12-01 19:26:02 1000 浏览量 回答数 1

问题

LNMP整合安装Redmine2.3实录:操作报错

自上一次在LNMP环境下安装过Redmine之后发表了《LNMP下安装Redmine2.3手记》,Inhu决定再一次尝试。因为上一次Inhu是通过折中的办法,也就是利用bitnami+lnmp这种做法实现...
kun坤 2020-06-04 13:21:08 3 浏览量 回答数 1

回答

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style> p { margin:0; } .right-content-title111 {border:1px solid black; width:400px; margin-top:15px;} .right-content-title111 span{ border : 1px solid red; display: table-cell; width: 70%; text-align: center; height: 22px; vertical-align: middle; } .right-content-title222 {border:1px solid black; width:400px; margin-top:1px;} .right-content-title222 span{ border : 1px solid red; display: table-cell; width: 40%; text-align: center; height: 22px; vertical-align: middle; } .right-content-title333 {border:1px solid black; width:520px; margin-top:1px;} .right-content-title333 span{ border : 1px solid red; display: table-cell; width: 10%; text-align: center; height: 22px; vertical-align: middle; } </style> </head> <body> <p class="right-content-title111"><span>短</span></p> <p class="right-content-title222"><span>短</span></p> <p class="right-content-title333"><span>短</span></p> <p class="right-content-title111"><span>中中</span></p> <p class="right-content-title222"><span>中中</span></p> <p class="right-content-title333"><span>中中</span></p> <p class="right-content-title111"><span>长长长</span></p> <p class="right-content-title222"><span>长长长</span></p> <p class="right-content-title333"><span>长长长</span></p> </body> </html> 结论就是table-cell里的width:3.5%,故意设置很小,目的是让table-cell占总容器100%宽
杨冬芳 2019-12-02 02:44:23 0 浏览量 回答数 0

问题

词表管理API是什么?

关键词管理接口文档 1、 创建关键词词表 1.1 地址 协议URL方法HTTPShttps://nlsapi.aliyun.com/asr/custom/keyword_listsPOST 1.2 请求 bo...
nicenelly 2019-12-01 21:01:37 1102 浏览量 回答数 0

问题

LESS 参数留空时报错: .text_element(left;;;20px;); 报错

最近在学习用LESS替代CSS,发现用了之后根本停不下来,简直方便的不要不要的,科技是第一生产力。 @color1:#ccc; @color2:blue; @color3:black; .position_element(@positon:...
杨冬芳 2019-12-01 19:42:48 1100 浏览量 回答数 1

问题

Js如何获取<input type="range">的滑块::-webkit-slider-thumb的样式?

如上图,我用css重置了的样式,现在我想获取到滑块的left值,可以实现吗?代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta chars...
杨冬芳 2019-12-01 19:49:20 1404 浏览量 回答数 1

回答

解决了!把a,span标签加上z-index ul li a { position: relative; color: #666; z-index: 10; } ul li span { position: relative; display: block; position: absolute; margin-top: -28px; margin-left: 40px; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: #666 transparent transparent transparent; z-index: 10; }
a123456678 2019-12-02 02:23:27 0 浏览量 回答数 0

问题

sortable的偏移问题!!!

在chrome ff 和ie9上都可以正常的进行拖动,但是在IE6 7 8上从newslist2向newslist1拖动就会出错。。 先来源码 &lt;span style="color:#e53333;"&gt;CSS&lt;/span&...
a123456678 2019-12-01 20:18:07 919 浏览量 回答数 1

问题

智能对话平台API如何使用?(1)

1. 问答服务API ​ 问答服务的调用采用Restful API方式,服务内部不保存状态,所以调用和调用之间相互独立。调用API需要校验权限,详细说明见 https://help.aliyun...
nicenelly 2019-12-01 21:03:32 1994 浏览量 回答数 1

回答

<style type="text/css"> <!-- display: table-cell--> .a, .b { width: 50%; color: white; } .a { background-color: olive; } .b { background-color: blue; } .box { border: 1px solid red; display: table; width: 100% } .a, .b { display: table-cell; vertical-align: top; color: white; } </style> <div class="box"> <div class="a">css元素的高度怎么自动扩充到100%</div> <div class="b"> <p>css元素的高度怎么自动扩充到100%</p> <p>css元素的高度怎么自动扩充到100%</p> </div> </div> <!-- flex --> <style type="text/css"> .a, .b { width: 50%; color: white; } .a { background-color: olive; } .b { background-color: blue; } .box { border: 1px solid red; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; } </style> <div class="box"> <div class="a">css元素的高度怎么自动扩充到100%</div> <div class="b"> <p>css元素的高度怎么自动扩充到100%</p> <p>css元素的高度怎么自动扩充到100%</p> </div> </div>
杨冬芳 2019-12-02 02:35:33 0 浏览量 回答数 0

回答

保证复用一直是css的一个重要技能,没有一个固定的答案,我只能大概的给你这样说,如果是大型网站,那就需要一个比较好的组织结构,比如这种base.css+common.css+page.css组织方式:1.base提供最底层的、功能和粒度最小的的通用类样式,可以被所有页面引用,力求精简和通用;2.common则是楼上提到的模块化组件,即将功能相对独立的划分为模块,重复次数多的模块划分为组件,提取到common层,这一层需要尽可能实现封装,对可能经常变化的部分提供灵活的接口;3.page是页面级别的样式表,提供各页面独有的样式,可以再根据需求细分如page-index.css,page-connect.css这样组织的好处是:1.比较利于维护2.组件复用率高,修改起来比较轻松3.代码精简,减少冗余。/提供一份base.css作为参考-------//*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{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;}/文字排版/.f12{font-size: 12px;} .f13{font-size: 13px;} .f14{font-size: 14px;} .f16{font-size: 16px;} .fb{font-weight: bold;} .fn{font-weight: normal;} .t2{text-indent: 2em;} .lh150{line-height:150%;} .lh180{line-height:180%;} .lh200{line-height:200%;} .unl{text-decoration: underline;} .no_unl{text-decoration: none;}/定位/.tl{text-align: left;} .tc{text-align: center;} .tr{text-align: right;} .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;} .clearfix:after{content: '.';display:block;height: 0;clear: both;visibility: hidden;} .clearfix{display:inline-block}*html .clearfix{height: 1%}.Clearfix{display: block;} .vm{vertical-align: middle;} .pr{position: relative;} .pa{position: absolute;} abs-right{position: absolute;right: 0;} .zoom{zoom:1;} .hidden{visibility: hidden;} .none{display: none}/长度高度/.w10{width: 10px;} .w20{width: 20px;} .w30{width: 30px;} .w40{width: 40px;} .w50{width: 50px;} .w70{width: 70px;} .w90{width: 90px;} .w100{width: 100px;} .w300{width: 300px;} .w500{width: 500px;} .w600{width: 600px;} .w700{width: 700px;} .w800{width: 800px;} .w{width: 100%;} .h50{height: 50px;} .h100{height: 100px;} .h200{height: 200px;} .h{height: 100%;}/编剧/.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;} .mb5{margin-bottom: 5px;} .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;} .ml50{margin-left: 50px;} .ml100{margin-left: 100px;} .mr5{margin-right: 5px;} .mr10{margin-right:10px;} .mr15{margin-right: 15px;} .mr20{margin-right: 20px;} .mr30{margin-right: 30px;} .mr50{margin-right: 50px;} .mr100{margin-right: 100px;} .p5{padding: 5px;} .p10{padding:10px;} .p15{padding: 15px;} .p20{padding: 20px;} .p30{padding: 30px;} .p50{padding: 50px;} .p100{padding: 100px;} .pt5{padding-top: 5px;} .pt10{padding-top:10px;} .pt15{padding-top: 15px;} .pt20{padding-top: 20px;} .pt30{padding-top: 30px;} .pt50{padding-top: 50px;} .pt100{padding-top: 100px;} .pb5{padding-bottom: 5px;} .pb10{padding-bottom:10px;} .pb15{padding-bottom: 15px;} .pb20{padding-bottom: 20px;} .pb30{padding-bottom: 30px;} .pb50{padding-bottom: 50px;} .pb100{padding-bottom: 100px;} .pl5{padding-left: 5px;} .pl10{padding-left:10px;} .pl15{padding-left: 15px;} .pl20{padding-left: 20px;} .pl30{padding-left: 30px;} .pl50{padding-left: 50px;} .pl100{padding-left: 100px;} .pr5{padding-right: 5px;} .pr10{padding-right:10px;} .pr15{padding-right: 15px;} .pr20{padding-right: 20px;} .pr30{padding-right: 30px;} .pr50{padding-right: 50px;} .pr100{padding-right: 100px;}/--如果是小型页面或者日常自己编写练手的复用--/根据具体页面情况判定,原则是固有属性复用,灵活属性抽出,在加多个class与尽量复用之间找个平衡
杨冬芳 2019-12-02 02:34:23 0 浏览量 回答数 0

回答

你试试看这个行不行</style> .redpack { height: 450px; background: #A5423A; width: 300px; left: 0; top: 0; border-radius: 10px; margin: 0 auto; } .topcontent { height: 300px; border: 1px solid #BD503A; background-color: #BD503A; border-radius: 10px 10px 50% 50% / 10px 10px 15% 15%; box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2); } #redpack-open { width: 100px; height: 100px; border: 1px solid #FFA73A; background-color: #FFA73A; border-radius: 50%; color: #fff; font-size: 20px; display: inline-block;
爵霸 2019-12-02 02:52:21 0 浏览量 回答数 0

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT