• 关于

    border-left

    的搜索结果

问题

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

杨冬芳 2019-12-01 19:35:58 1864 浏览量 回答数 1

回答

.big-title{ position: absolute; left: 5; top: 0; padding: 9px; background: #808080; font-size: 30px; border-radius: 40px; box-shadow: 5px 0 white; vertical-align: bottom; } .small-title{ padding: 9px; margin-left: 40px; background: #808080; color: white; border-radius: 40px; line-height: 54px; vertical-align: bottom; } 这样能做个大概,但是没有原图顺滑。 又换了一种方案:思路是两个一样的JWC,一个背景色为白色,放于灰色背景的下面,然后left多一点点,但这样做出来还是不顺滑: .big-title{ position: absolute; left: 0; top: 0; padding: 9px; background: #808080; font-size: 30px; border-radius: 40px; vertical-align: bottom; z-index: 20; } .placeholder{ position: absolute; left: 3px; top: 0; padding: 9px; background: white; color: white; font-size: 30px; border-radius: 40px; vertical-align: bottom; } .small-title{ padding: 9px; margin-left: 30px; background: #808080; color: white; border-radius: 40px; line-height: 54px; vertical-align: bottom; } 解决方案3:感谢刘湿湿的提醒~ 用border 解决了 .big-title{ position: absolute; left: 0; top: 0; border: 2px solid white; padding: 9px; background: #808080; font-size: 30px; border-radius: 40px; vertical-align: bottom; z-index: 20; } .small-title{ padding: 9px; margin-left: 30px; background: #808080; color: white; border-radius: 40px; line-height: 54px; vertical-align: bottom; }

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

回答

border-radius变为圆形,2个圆形嵌套 <!doctype html> <style> body{background:#ccc} div.line{height:30px;background:#000;position:relative} div.line div{-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-khtml-border-radius:30px;background:#000;position:absolute;width:60px;height:60px;left:50%;margin-left:-30px;bottom:0} div.line div.orange{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-khtml-border-radius:20px;background-color:orange;width:40px;height:40px;left:50%;margin-left:-20px;bottom:10px} </style><br /><br /><br /> <div class="line"> <div></div> <div class="orange"></div> </div>

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

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

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

回答

第一种:<!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

回答

用CSS可以实现:1、做一个空的正方形的div;2、将div的伪元素after和before设置为div的一半高和一样宽,这样就相当于在div里上下各有一个半高的块元素;3、分别根据需要的颜色设置这after和before的渐变;4、通过这是border-radius将after和before设置成半圆;5、在div正中间放置一个小一点块元素,通过border-radius设置成圆。 示例如下:HTML <div class="loading"><div class='loading-indicator'><i></i></div> CSS .loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #eee } .loading-indicator { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; width: 50px; height: 50px; } .loading-indicator:before { content: ""; display: block; width: 50px; height: 25px; padding-bottom: 0; box-sizing: border-box; border-top-left-radius: 25px; border-top-right-radius: 25px; background: -webkit-linear-gradient(0deg, #999, #bbb); } .loading-indicator:after { content: ""; display: block; width: 50px; height: 25px; padding-top: 0; box-sizing: border-box; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; background: -webkit-linear-gradient(0deg, #eee, #bbb); } .loading-indicator>i { display: block; position: absolute; width: 40px; height: 40px; background: #eee; top: 5px; left: 5px; border-radius: 20px; } 如果需要的话还可以再加上动画。 PS:还有一种利用background-clip替代中间那个i元素的方法。但是这种方法在android的微信上有问题,中间不是圆的。

杨冬芳 2019-12-02 02:39:06 0 浏览量 回答数 0

问题

之所以margin-left为负可以使元素向左移动是不是因为负的margin-left增大了margin-right?

a123456678 2019-12-01 19:26:59 1080 浏览量 回答数 1

问题

求教 php如何快捷判断数组中的项是单值或者是键值对?

落地花开啦 2019-12-01 19:51:43 824 浏览量 回答数 1

问题

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

杨冬芳 2019-12-01 19:42:48 1100 浏览量 回答数 1

回答

看下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

问题

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

养狐狸的猫 2019-12-01 19:58:09 9 浏览量 回答数 0

问题

请教浏览器文字兼容性问题。

杨冬芳 2019-12-01 19:58:52 1064 浏览量 回答数 2

回答

span { width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; } column1 | column2 | column3 ------- | ------- | ------- column1 | column2 | column3 column1 | column2 | column3 column1 | column2 | column3 ![image.png](https://ucc.alicdn.com/pic/developer-ecology/a509187ad1b0467b80ca775c96fc20b8.png)

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

问题

请教大牛谷歌浏览器和火狐浏览器文字兼容性问题

杨冬芳 2019-12-01 20:07:32 923 浏览量 回答数 1

回答

Nicholas Hazel:首先,在一个HTML页面中使用相同ID的次数尽量为一。其次,你要确保div是在正确的位置上。对每个元素使用margin-right定义右边距,然后再针对最后一个div添加 psuedo-class,设置margin为0。 还有一种好办法适用于任何数量的div,用百分比来划分宽度,比如25%,33%。 代码demo:http://jsfiddle.net/EAkLb/5/点击预览 Css * { margin:0; padding:0; } div.wrapper{ width:100%; position:relative; } ul { position:relative; width:100%; } ul li { width:20%; float:left; padding:2.5%; background:#CCC; list-style:none; text-align:center; } bendtherules:假设100%的宽度中有4个区域,每个div宽度为22%,4个区域意味着有3个间距。你可以先做一个计算,22*4=88,100-88=12,12/3=4。这就计算出,每个div之间的宽度为4%。这种方法适用于较少的div。 CSS 全选复制放进笔记div.box_frame{ float: left; background-color: #eee; /* standard background color */ border: 1px solid #898989; border-radius: 11px; padding: 2px; margin-left:4%; text-align: center; /* change border to be inside the box */ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } div.box_frame:first-child{ margin-left: 0; } div.box_frame#_15{ /* width 15% */ width: 22%; }

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

问题

谷歌浏览器和火狐浏览器文字兼容性问题。

杨冬芳 2019-12-01 19:48:55 1419 浏览量 回答数 1

问题

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

杨冬芳 2019-12-01 19:49:20 1404 浏览量 回答数 1

回答

如果是移动浏览器 那应该可以用border-box了直接把模型从content-box改成border-box外面3个div 每个33% 给一个padding在div上 因为border-box下padding不会撑大div 所以实际上是里面图片可以用的区域小了这样就等价于div和div之间留空补充一下:这样做div和div之间的间隔是定值 做到百分比宽度 似乎只能用响应式布局了另外我感觉这答案写的。。|--1%--|-----30%-------|---3%---|-----30%-------|---3%--|-----30%-------|--1%--|妈的这样排div不就够了 所有的都是float:left0.05%是什么鬼 这谁设计出来的尺寸

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

回答

可以给每个li设置border-left,然后隐藏掉第一个li的border-left。隐藏第一个li的border-left的具体方法是:给ul加overflow:hidden,给所有li加margin-left:-1px|的高度就是li的高度,可以随便设。

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

问题

使用CSS实现div水平间距值的自动匹配

a123456678 2019-12-01 19:27:07 1075 浏览量 回答数 1

问题

float元素嵌套input宽度计算问题

a123456678 2019-12-01 19:26:19 1019 浏览量 回答数 1

问题

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

a123456678 2019-12-01 19:29:50 951 浏览量 回答数 1

问题

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

杨冬芳 2019-12-01 20:08:11 786 浏览量 回答数 1

问题

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

杨冬芳 2019-12-01 19:54:40 1303 浏览量 回答数 1

问题

input 和 span 之间有烦人的缝隙?该怎么破

a123456678 2019-12-01 19:32:06 944 浏览量 回答数 1

问题

css 为什么改了改 postion 出现这个结果?

杨冬芳 2019-12-01 20:10:08 919 浏览量 回答数 1

回答

方法还是挺多的,我写了2种: 一 html代码 <div class="container-wrapper"> <div class="container"> <div class="center"> </div> </div> </div> css代码 .container-wrapper{ width:400px; height:300px; } .container{ width:100%; height:100%; border:1px solid violet; position:relative; } .center{ width:100px; height:100px; position:absolute; margin:auto; left:0px; top:0px; right:0px; bottom:0px; border:1px solid green; } 二 html代码同上css代码 .container-wrapper{ width:400px; height:300px; } .container{ width:100%; height:100%; border:1px solid violet; position:relative; } .center{ border:1px solid green; width:100px; height:100px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);

杨冬芳 2019-12-02 02:37:16 0 浏览量 回答数 0

回答

html <div class="container"> <div class="content"> </div> <div class="side"> </div> </div> scss .container{ width: 100%; height: auto; border: 5px solid purple; padding: 20px; display: flex; flex-derection: row; box-sizing: border-box; position: relative; .content{ border: 5px solid steelblue; box-sizing: border-box; flex: 1; height: 500px; } .side{ width: 400px; border: 5px solid red; box-sizing: border-box; margin-left: 10px; } } 之前的内容没有注意到右侧超出滚动的问题,是个小失误,更新下代码,之前的不删,作为比对,这里面注意运用到绝对定位的特性 全选复制放进笔记.container{ width: 100%; height: auto; border: 5px solid purple; padding: 20px; box-sizing: border-box; position: relative; .content{ width: calc(100% - 410px); border: 5px solid steelblue; box-sizing: border-box; } .side{ width: 400px; height: calc(100% - 40px); position: absolute; right: 0; top: 0; margin: 20px 10px; border: 5px solid red; box-sizing: border-box; overflow-y: scroll; } }

a123456678 2019-12-02 02:08:31 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

问题

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

persepolis 2019-12-01 20:58:43 1802 浏览量 回答数 1

问题

IE7父容器设置 margin-left 负值为什么会继承到子元素上面?

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