html横线中间加入文字

2024-11-10

#Html学习积累#分割线中间添加文字

类似效果: ————————————xxxxx———————————————————— <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image Rollover with CSS</title> <style type=&

在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: relative; 下面举例说明: 首先创建html元素 <div> <span class="title">注册</span> <span>Lorem ipsum dolor sit amet, consectetur adipisicing

css 横线中间添加文字

demoline01.02选一个用足够了 <style> .demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; margin: 20px auto; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; } .demo_line_02 { width:100%;/*这指的是整

css实现中间横线俩边文字效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

html5快速入门（一）—— html简介

前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我 2.更新时间没有规律,一般会在3天左右更新一篇(全系列预计会有12篇)因为需要工作,所以只能在闲暇之余整理,如果有喜欢的朋友可以关注我,将会第一时间获得更新信息 3.如果有需要Reactive Native + H5跨平台开发的朋友,可以联系我

CSS文本与连接

CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性属性描述 color 文本颜色 direction 文本方向 line-height 行高 letter-spacing 字符间距 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素文本的首行 text-transform 元素中的字母大小写 white-space 规定段落中的文本不

HTML 文本格式化实例超链接

HTML 文本格式化实例 1.文本格式化 <b>加粗文字</b> <strong>加重语气</strong> <big>dingyi</big> <em>着重文字</em> <i>斜体</i> <small>小字体</small> <sub>文字在前面文字的右下角</sub> <sup>文字在前面文字的右上角</sup&

Markdown常用编辑器

插入图片功能对比 Cmd Markdown只支持通过输入图片在线URL的方式来插入图片,不能上传本地图片. CSDN Markdown.MarkdownPad既支持插入本地图片,也支持插入网上在线图片. 马克飞象和简书也同样支持插入本地图片和网上在线图片.这里将其与上面分开讨论是因为它们还有其它编辑器所没有的的特性: 两者都支持本地图片直接拖曳插入或直接粘贴剪贴板里的图片,直接用鼠标将本地图片拖到编辑器中即可自动上传插入,这是我最喜欢的特性,省去了先点击上传图片按钮然后选择图片再上传这些繁琐的步

Android Material Design（一）史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActionButton.Shadows.Ripples.TabLayout.RecyclerView.Card.NavigationView.BottomSheet.Palette控件. 转载请注明出处,谢谢!! http://blog.csdn.net/johnny901114/article/deta

好用的开源库（一）——MaterialEditText

GIthub地址:https://github.com/rengwuxian/MaterialEditText#features 使用文档: 在android新推出的Material Design中对文本输入框的样式提供了标准,并且在AppCompat v21 中提供了Material Design的空间外观支持,如下图: 不过该控件在使用的过程中比较繁琐,需要通过为控件定制theme的方式来实现自定义控件颜色,并且并没有提供Material Design中提到的特性,因此,为了使用实现该特性效

HTML学习---基础知识学习

1.1. HTML 1.为什么要有HTML? "Hello" "<h1>Hello</h1>" - 浏览器渲染时使用一套HTML规则, - 学习规则 2.服务器端写HTML时, 在任何语言的WEB框架中:html就做模版 - .html - .tpl template - .chmtl 3.发送请求和相应请求时请求:请求头 + 请求内容响应: 4.HTML规则 - html/head/body/title/meta - div/p/a

Bootstrap初学基础总结

Bootstrap 1>.Web UI 框架可以帮助菜鸟程序员 ,迅速简便的搭建起专业级界面效果 2>如何快速掌握利用框架 1.框架的整合和搭建,让框架能够正常跑起来 2.通过复制粘贴文档中的代码,实验框架中的各个组件记住关键组件的图像 (长什么样) 3>Bootstrap需要导入的文件 1.在head标签中,通过link导入bootstrap.css样式表(核心文件,必须导入) 2.如果使用bootstrap的交互功能和插件需要导入 A) jquery.js B) bootstra

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

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

Markdown 利用HTML进行优雅排版

Markdown 利用HTML进行优雅排版我在使用Markdown整理文档的时候发现,Markdown本身对文本格式的排版很单一,只有编号.字体加粗.固定标题格式等一些基础的排版,使用不够灵活,好在Markdown中可以使用HTML,所以我利用HTML增加了一些板块,方便对文档进行标注或者分层整理. 一.标注重点功能描述:在不同位置插入图片作为重点标注. 实现效果: 数据分析方法(这是重点!需要进行重点标记) 代码如下: <img align = "left" src=&qu

iOS 给NSString文字上添加横线中间和下划线

有时候我们需要给文字添加横线,有两种情况: 第一种是贯穿中间的横线: 横线的颜色和文字的颜色保持一致 _oldPriceLabel.text = "; _oldPriceLabel.textColor = [UIColor lightGrayColor]; NSMutableAttributedString *newPrice = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"

TextView过长显示省略号， TextView文字中间加横线

1.TextView显示的内容过长时自动显示省略号: 省略号的位置:android:ellipsize="end" 省略号在结尾android:ellipsize="start" 省略号在开头android:ellipsize="middle" 省略号在中间TextView显示的行数:android:singleline="true"android:lines="2" 在java文件中:tv.s

Android TextView（EditView）文字底部或者中间加横线

Android TextView(EditView)文字底部或者中间加横线 tv = (TextView) this .findViewById(R.id. text_view ); 中间加横线 tv.getPaint().setFlags(Paint. STRIKE_THRU_TEXT_FLAG ); 底部加横线: tv .getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG );

css实现中间文字，两边横线效果

1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. <div class="header"> <span class="line"></span> <span class="text">中间文字,两边横线</span> <span cl

Word页眉实现首页不同、奇偶页不同、更改页眉横线、页眉文字对齐 -- 视频教程(8)

1. 目标目标1:实现页眉"首页不同,奇偶页不同" 目标2:更改页眉横线目标3:页眉文字有三部分:第一部分左对齐,第二部分居中,第三部分右对齐 2. 教程未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文)

横线和文字一排，文字居中显示vertical-align: middle;

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> hr { width: 33.33%; height: 1px; margin: 0; background-color: #6495ED; display: inline-block; // hr是

利用after和before伪元素在文字两边写横线

示例: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素after和before的用法</title> <style> .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title