【CSS实现自适应分隔线的N种方法】的更多相关文章

CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想:知乎的前端也不怎么样? 可能别人的重点不在这些上面吧 下面列举几种更好的实现方式,不会露馅的那种 1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的…

【转】CSS实现自适应分隔线的N种方法

1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏. 具体实现如下 html结构为 <div class="title">我是分割线</div> css样式为 .title{ position: relative; text-align: ce…

CSS巧妙实现分隔线的几种方法

单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; } 优点:代码简洁 巧用背景色实现分隔线: 点此查看实例展示 .demo_line_02{ height: 1px; border-top: 1px soli…

文字在线中间，CSS巧妙实现分隔线的几种方法

单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; }优点:代码简洁 巧用背景色实现分隔线: .demo_line_02{ height: 1px; border-top: 1px solid #ddd; text-align:…

CSS实现导航条Tab的三种方法

前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局]   从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li…

CSS + ul li 横向排列的两种方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>CSS + ul li 横向排列的两种方法 </title> </head> <body> <…

css巧妙实现分隔线

单个标签实现分隔线 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; } 优点:代码简洁 背景色实现分隔线 .demo_line_02{ height: 1px; border-top: 1px solid #ddd; text-align: ce…

css+div制作圆角矩形的四种方法

圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所有矩形基本上都需要设计为圆角矩形,这样网页才不会那么死气沉沉! 工具/原料 一些简洁.直观.强悍的前端开发框架,如bootstrap 方法/步骤 1 我们先来看一下圆角矩形和普通矩形的区别. 虽然第二个是某知名搜索引擎,而且我天天要用,但是他的设计我还是想吐槽,直直的框真的很难看啊...=_= 相比…

ios webview自适应实际内容高度4种方法

有的时候会碰见类似的苦逼需求, webview自适应实际内容高度 下面有四种方法供使用 方法1:获取webview中scrovllview的contentsize进行设置   1 2 3 4 5 6 -(void)webViewDidFinishLoad:(UIWebView *)webView{     CGFloat webViewHeight=[webView.scrollView contentSize].height;     CGRect newFrame = webView.fra…

CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertica…