span 分割线css

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

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

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

css 分割线样式_css实现文章分割线的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法.效果如下: 方式一:单个标签实现分隔线: html: <div class="line_01">小小分隔线单标签实现</div> css: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 190px solid #ddd;

css span宽度和css span高度成功设置经验篇

我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px,css高度为100px,为了观察高度和宽度样式,我们再设置个css边框属性样式. 1.这样应用案例CSS代码为: .divcss5{ width:150px;height:100px; border:1px solid #000; } 2.Body内Html代码为: divcss5 span上<s

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

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

不懂CSS的后端难道就不是好程序猿？

由于H5在移动端的发展如日中天,现在大部分公司对高级前端需求也是到处挖墙角,前端薪资也随之水涨船高,那公司没有配备专用的前端怎么办呢? 作为老板眼中的“程序猿” 前端都不会是非常无能的表现,那作为后端人员需要不需要懂前端呢?为了提升价值还是需要懂点的,不然一点问题就找前端,那是不是让别人疯了…… 前端先从最常见的调样式说起吧,重要知识点之盒子模型,这里就不叽叽歪歪那些难懂的概念,直接看下面的图吧. 什么叫做外边距,内边距…… 图1:英文版通俗点就是下面的图: 图2:中文版再看看总宽度与总高度

css挤带边框的三角

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .triangle{ width:100px;

css水平垂直居中对齐方式

1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div class="mb10 line-align"> 我是垂直水平居中对齐的文字哦! </div> <div class="mb10 line-align"> <span>我是垂直水平居中对齐的内联元素span!</span&g

CSS实现进度条和订单进度条

最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果图如下: CSS实现进度条: html结构: <div id="progress"> <span>70%</span> </div> css样式: #progress{ width: 50%; height: 30px; border:1px

css 水平垂直居中总结

空闲总结了下水平垂直居中方案,欢迎补充: 水平居中水平居中有两种情况: 子元素是内联元素这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了body,html <div class="out-div"> hello world </div> <div class="out-div"> <span> same for a inline tag </span&g

css的小技巧

前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素垂直居中 html, body { height: 100%; ; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;

CSS的一些小技巧

1.黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}2. 使用 :not() 在菜单上应用/取消应用边框/* add border */.nav li { border-right: 1px solid #666;}

HTML <span> 标签

定义和用法: <span>标签被用来组合文档中的行内元素.在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果.<span>本身没有任何属性. 在IE6下,span元素浮动时一定要把span元素放在a标签之前,不然,会出现浏览器兼容问题,IE6下,浮动过后的span元素会向下错位一行. 提示和注释: 提示:请使用<span>来组合行内元素,以便通过样式来格式化它们. 注释:span没有固定的格式表现.当对它应用样式时,它才

span标签设置margin-top没有效果

<span>是行内元素,span只有margin-left和margin-right才有效果.要想margin-top生效就要把span转给块级元素才行.在span的css中加入以下属性即可 span是行内元素,margin只有左右,不能设置上下的margin.

监控平台项目之CSS总结——基于angularjs、bootstrap、jquery等框架

1.新加一个类名,实现切换页面主题在需要变色的标签处,添加该类名,即可实现最简化切换页面主题. HTML: <section ui-view=""> </section>/*页面切换容器 */ <div class="A red">/*A页面 */ <input type="button" class="red-border" value="确定"/> &l

css中伪元素before或after中content的特殊用法attr

html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css">haorooms测试</span> </div> css代码如下: .haorooms{margin-top:30px} span{ position: relative; display: inline-block; } span:hover{ cursor: po

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{

[转]div与span区别及用法

DIV与SPAN区别及div与san用法篇接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签. 目录特点与区别小结知识扩展案例效果演示一.DIV与SPAN的区别与特点 - TOP 以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍 div与span区别 div占用的位

Code笔记之：CSS块级元素、内联元素概念

文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

CSS 简介

CSS 简介需要具备的基础知识在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 style应用的方式: style样式的应用有三种方式: 1.在标签上面通过style属

巴特西