精华内容
下载资源
问答
  • span代码使用教程

    千次阅读 2013-07-17 16:24:52
    span style="具体代码">文字span> 代码span style="font-size: 24px">字体大小控制span> 效果: 字体大小控制 说明: px 是字体单位,意思是“像素”,24px 指定字体大小为 24 像素,数值越大,字体越大...

    格式: span style="具体代码">文字</span>

    代码: <span style="font-size: 24px">字体大小控制</span>

    效果: 字体大小控制

    说明: px 是字体单位,意思是“像素”,24px 指定字体大小为 24 像素,数值越大,字体越大。

    代码: <span style="color: blue">字体颜色控制</span>

    效果: 字体颜色控制

    说明: 其他常用颜色名有:redgreenyellowwhiteblackgraycyan,替换 blue 即可。

    代码: <span style="font-style: oblique">斜体</span>

    效果: 斜体

    代码: <span style="font-weight: 600">字体加粗</span>

    效果: 字体加粗

    说明: 允许的值有:100-900 整百数(数值越大,字体月粗)、bold、bolder、lighter。

    代码: <span style="text-decoration: underline">下划线</span>

    效果: 下划线

    代码: <span style="text-decoration: overline">上划线</span>

    效果: 上划线

    代码: <span style="text-decoration: line-through">贯穿线</span>

    效果: 贯穿线

    代码: <span style="line-height: 400%">400% 的行高</span>

    效果: 400% 的行高

    说明: 指定的百分数越到,行高越高。

    代码: <span style="background-color: red; color: white">红色背景,白色文字</span>

    效果: 红色背景,白色文字

    代码: <span style="border: 2px solid blue">带边框的文字</span>

    效果: 带边框的文字

    说明: 2px - 边框宽度,solid - 边框样式(常见还有:dotteddasheddouble),blue - 边框颜色。双线(double)只有指定边框为3 px以上(含)才能看出效果,点线(dotted)与虚线(dashed)效果差不多,只有在大尺寸下才能看清区别。(注:在 Firefox 下 dotted 与 dashed 的区别看的很清晰)

    代码: <span style="cursor: wait">等待鼠标指针</span>

    效果: 等待鼠标指针

    说明: 常见还有:all-scrollcrosshairhandmovehelpnot-allowedprogress

    展开全文
  • android span 代码

    2014-12-15 05:45:52
    我这里android里面用不了span那些文件,请您指点一下,我从来都木有用过这个标签,请您指点一下迷津
  • Span使用之系统提供的Span基本样式

    千次阅读 2017-04-18 22:28:18
    Span的应用在Android中,使用TextView显示文本,但往往有一些特殊的文本样式,比如一段文本,中间某几个字颜色不同或者中间某几个字能点击等等,这些样式如果没有不同,就编写一个新的...Span使用三部曲Span是android

    Span的应用

    Android中,使用TextView显示文本,但往往有一些特殊的文本样式,比如一段文本,中间某几个字颜色不同或者中间某几个字能点击等等,这些样式如果没有不同,就编写一个新的TextView,那么一段文字将使用很多的TextView去显示,那么,有没有可能使用一个TextView显示所有文字,而基于文字定义不同的样式呢。这就是Span的作用。

    Span使用三部曲

    Spanandroid提供的用于操作文本的样式的相关类。他能够精确地控制一段文本中具体某些文本的样式。基于Span将分为三遍博客去描述

    系统Span的基本使用

    首先,看一下我们要实现的效果,该效果网上的例子很多,本篇博客也是基于网上的例子编写的。

    这里写图片描述

    如上效果,如果每一个特殊效果都是一个TextView,那么将编写很多的TextView,下面我们就开始利用Span实现如上效果。

    编写SpannerTestActivity如下:

    public class SpannerTestActivity extends AppCompatActivity {
    
        private TextView mText;
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_spanner);
            mText = ((TextView) findViewById(R.id.text));
            // testSpanned()便是基于文本定义的样式
            mText.setText(testSpanned());
        }
    }
    

    关键方法便是testSpanned()方法,看一下实现

        public Spanned testSpanned() {
            SpannableString spanned = new SpannableString("测试文字字体大小一半两倍前景色背景色正常粗体斜体粗斜体下划线删除线x1x2电话邮件网站X轴综合");
            // ......省略
            return spanned;
        }
    

    构造SpannableString对象,并返回。

    SpannableStringString对象类似,同样可以作为文本设置到 setText()上,不过SpannableString可以通过setSpan()向文本上设置一些特殊样式。

    setSpan()具体声明为setSpan(Object what, int start, int end, int flags)包含四个参数,参数分别为

    • what:设置的样式。
    • start:设置样式的文本开始索引。
    • end:设置样式的文本结束索引。
    • flags :指定样式的范围,当本文发生变化时,是否将样式应用到新增加的文本上。

    看完声明,其实关键点便是what的类型,但参数声明上是object,那么what可以传入哪些值呢?

    系统为我们提供了一些what的值,他们是CharacterStyle及其子类,下面将列举一些:

    在上面的代码中,我们省略了设置样式的相关代码,具体代码如下:

    
            // 设置字体(default,default-bold,monospace,serif,sans-serif)
            spanned.setSpan(new TypefaceSpan("monospace"), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new TypefaceSpan("serif"), 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    
            // 设置字体大小,第二个参数表示是否是dp值,默认是px
            spanned.setSpan(new AbsoluteSizeSpan(20), 4, 6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new AbsoluteSizeSpan(20, true), 6, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    
            // 相对大小 相对于默认字体的倍数
            spanned.setSpan(new RelativeSizeSpan(0.5f), 8, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new RelativeSizeSpan(2f), 10, 12, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置字体的前景色 Magenta紫红
            spanned.setSpan(new ForegroundColorSpan(Color.MAGENTA), 12, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置字体的背景色
            spanned.setSpan(new BackgroundColorSpan(Color.CYAN), 15, 18, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置字体的样式
            spanned.setSpan(new StyleSpan(Typeface.NORMAL), 18, 20, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new StyleSpan(Typeface.BOLD), 20, 22, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new StyleSpan(Typeface.ITALIC), 22, 24, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 24, 27, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置下划线
            spanned.setSpan(new UnderlineSpan(), 27, 30, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置删除线
            spanned.setSpan(new StrikethroughSpan(), 30, 33, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置下标
            spanned.setSpan(new SubscriptSpan(), 34, 35, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置上标
            spanned.setSpan(new SuperscriptSpan(), 36, 37, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置链接
            spanned.setSpan(new URLSpan("tel:1234556"), 37, 39, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new URLSpan("mailto:zziamhao@163.com"), 39, 41, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spanned.setSpan(new URLSpan("http://www.baidu.com"), 41, 43, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 设置宽度的缩放,高度不变
            spanned.setSpan(new ScaleXSpan(2.0f), 43, 45, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    

    将上面所有的代码组合到一起,便是实现了开始的那一段文字的效果。

    细节不在讲述,提两个关键点。

    首先是索引startend,记住顾前不顾后即可。

    其次是flags,当文本变化时,对应索引是否应用样式,上面传入的都是同一种,可以传入如下几种,

    • Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 前后都不包括
    • Spanned.SPAN_INCLUSIVE_EXCLUSIVE 前面包括,后面不包括
    • Spanned.SPAN_EXCLUSIVE_INCLUSIVE 后面包括,前面不包括
    • Spanned.SPAN_INCLUSIVE_INCLUSIVE 前后都包括

    这个地方,很多人可能会有疑问,这里不再多做解释,可以将上面的TextView改变为EditText,手动修改一些文本看一下变化就一目了然了。

    展开全文
  • span标签使用说明

    千次阅读 2014-07-21 11:23:16
    此处 display:block; 一定要加上,否则,span不起作用 如果要定义span居中,必须先让span成块级元素...span的属性很多,几乎所有标签的属性都可以定义在span上,只是很多属性都必须在span成块级元素时菜其作用,span

    <span id='span_slide_container' style='display:block; overflow-y: auto; overflow-x: auto; height: 500px;'>

    此处 display:block; 一定要加上,否则,span不起作用

    如果要定义span居中,必须先让span成块级元素显示,也就是说,要先定义span的display:block;属性,然后再给span添加边距属性margin:0px auto;这样就能达到你想要的效果了。span的属性很多,几乎所有标签的属性都可以定义在span上,只是很多属性都必须在span成块级元素时菜其作用,span本身只是为了补充a标签的作用,是一个辅助标签,一般只能识别对文字的样式的你故意,所以如果想给span标签定义更多的其他样式属性,你就必须先给span加上块级属性,也就说添加display:block;属性,这样以后你的样式就可以起作用了

     ======

    默认span的宽度是自适应内容的。

     

    span标记的样式设定width属性:

    <html>
    <body>
    <span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
    </body>
    </html>


    加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句,span的宽度失效,会发现不会产生效果。

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
    <span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
    </body>
    </html>



    如果设置display:block,width属性生效,但是此时的span跟div一样了。  DIV会自动换行

    span不是块级的所以其宽度是依据内容的多少而定,你必需要设定span为BLOCK这样才可以设置宽度!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
    <span style="width:80%; display:block; float:left; ">新闻标题</span><span style="20%">2006-5-27</span>
    </body>
    </html>


    如果设置display:inline-block,则span并列在同行,而且width属性生效。

    元素display属性的常见值说明:

    block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
    inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。
    inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
    non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。

    设置 span 宽度的完美解决方案 (不自动换行

    下面代码的 CSS定义完美解决了span的宽度设置问题。代码可以同时兼容IE/FF各种版本。
    <style type="text/css">
    span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
    </style>

     

    展开全文
  • ImageSpan使用

    万次阅读 2013-04-19 15:53:40
    编辑框中加图片,以前一直以为很复杂,后来发现android有些类...代码如下: mSubjectDetailView = (TextView) findViewById(R.id.subject_detail); CharSequence text = "如图所示★,dsfdsfdddd,如果fdsfs★东东";

    编辑框中加图片,以前一直以为很复杂,后来发现android有些类已经很好的实现了这些功能.

    代码如下:

            mSubjectDetailView = (TextView) findViewById(R.id.subject_detail);
            
            CharSequence text = "如图所示★,dsfdsfdddd,如果fdsfs★东东";
            SpannableStringBuilder builder = new SpannableStringBuilder(text);
            String rexgString = "★";
            Pattern pattern = Pattern.compile(rexgString);
            Matcher matcher = pattern.matcher(text);
    
            while (matcher.find()) {
                builder.setSpan(
                        new ImageSpan(this, R.drawable.ic_launcher), matcher.start(), matcher
                                .end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            }
    
            mSubjectDetailView.setText(builder);
    布局:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
    
        <TextView
            android:id="@+id/my_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/hello_world" />
         <TextView
    				android:id="@+id/subject_detail"
    				android:layout_width="match_parent"
    				android:layout_height="wrap_content"				
    				android:minHeight="50dp"
    				android:gravity="center_vertical"
    				android:text="subject"
    				android:textColor="@android:color/primary_text_light_nodisable"
    				android:background="@android:color/white"
    				android:textSize="25sp" />
    </RelativeLayout>

    效果:



    展开全文
  • Span 介绍及使用(二)

    千次阅读 2016-03-21 12:14:04
    使用 Span 的步骤 定义你要显示的文本 定义你需要的Span 使用将要显示文字,构造一个SpannableString 调用SpannableString的setSpan()方法设置span;setSpan()的参数会有设置文字的范围。 调用TextView的setText()...
  • 如果想为一段文字添加图片,那么可以用到imageSpan来很好的实现 代码: tvTest = (TextView) findViewById(R.id.test); CharSequence text = "效果测试★,效果测试,效果★测试"; SpannableStringBuilder builder...
  • Span 介绍及使用(一)

    万次阅读 2016-03-21 12:13:04
    实现时用到了Span,感觉很有意思,所以记录一下。Span主要用于TextView中内容的显示,可以控制内容的大小,样式,颜色,文字风格,文字的字形等。功能十分的强大。Span只是Android开发中的一个概念,并不是一个类,...
  • ``` <span>aa</span> ...如上代码span的个数不固定,现在只知道“cc”这个值,如何用这个值,选中其所在的span? 我想到的是这样$("span[text='cc']"),可惜行不通,直接js能实现也可以~求大神指教~~
  • C# Span 入门

    千次阅读 2018-11-19 15:22:10
    本文简单告诉大家如何使用 Span 新的功能 需要知道 Span 是 7.2 才有的功能,如果在正式项目使用,建议安装 Nuget 的方式
  • Android TextView Span使用详解

    千次阅读 2016-11-16 15:22:06
     要想理解Span的具体使用,那肯定得了解SPan类群的构成,研究代码继承结构,深入的了解、理解,才能更好的使用它。我们来统计一下,最前端的可用功能的SPAN有: URLSpan、 ClickableSpan、 BackgroundColorSpan、...
  • 代码中间多了不应该存在的一些东西,为什么会出现? 求解答,谢谢各位。 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = new Scanner(System....
  • CSDN博客中C++相关代码出现 乱码问题解决方法    在CSDN中写代码是有时会碰到编辑状态时文章正常,在审核完后页面正常显示时代码中夹杂 乱码问题,如下图所示:    查找问题一段时间,找到原因所在...
  • Android中ImageSpan使用

    万次阅读 2016-09-03 22:00:14
    这其中必不可少的一个类便是ImageSpan。 要想在TextView中设置不同颜色、大小、图文混排的效果,必须通过SpannableString的setSpan()方法来实现。 //SpannableString.java public void setSpan(Object
  • 数组是C++从C语言继承过来的特性,使用方便同时又可以提供绝佳的性能...本文介绍如何提前使用C++20新特性span解决数组退化和越界访问的问题。 首先看使用数组的最常见代码: int data[10];for(size_ti=0;i<...
  • .NET Core 2.1 和 C# 7.2 带来了 Span 的原生支持,原本需要使用不安全代码操作的内存块现在可以使用安全的方式来完成。此前在性能和稳定性上需要有所取舍,而现在可以兼得了。 简单的例子 先来看一个字符串...
  • 本文转载自:... 49.Android 各种Span ...Android 各种Span 前言 SpannableStringBuilder URLSpan UnderlineSpan TypefaceSpan TextAppearanceSpan TabStopSpanStandard Superscri
  • span内文字居中条件与实现CSS布局方法span默认不像div是块元素,对span使用文字居中text-align:center样式,文字内容是无法在span居中的。最直观对span设置宽度无效的。了解《span宽度设置》以下解决方法,为了能...
  • vue 使用 span 来修改值 的小坑

    千次阅读 2020-03-22 20:23:06
    使用vue,思路是 用 span 展现标签,点击 span 打开contenteditable ,使其可编辑,编辑完成后,回车完成修改,提交。 最开始可以正常运行,但偶然发现,在修改第一个span时,回车后,不会变还是之前的值。网上找了...
  • 使用ImageSpan,图片不能与文字对齐问题实现如下产品需求 - 1. 图片与文字中间对齐 - 2. 文字不能超过三行,多余使用…,但是保持价格可见。实现功能一:图片与文字中间对齐看到设计图就想到使用TextView....
  • Android Span 架构介绍

    千次阅读 2016-08-05 22:05:48
    前几天在微博上看到一个人评论Android Span机制相当强大,有必要细心研究一下,于是就google了一下,发现了一篇很好的文章Spans, a Powerful Concept.,然后以这篇文章为基础研究了一下Android Span的用法。...
  • <span id="pw1" class="field"> @Html.PasswordFor(model => model.NewPassword, new { @class = "textbox" }) @Html.RequiredHint() </span> <span id="pw2" class="field"> @Html.PasswordFor(model => model....
  • span设置固定宽度

    千次阅读 热门讨论 2013-12-04 22:34:34
    相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。 在做"善良公社"项目时,用到了SPAN,因为是用来实现放块效果,所以给...
  • JS使用总结:简单标签赋值和取值:span等;实时触发事件;了解一下简单标签赋值和取值实时触发事件代码 了解一下 作为后台开发,今天使用了前端的技术,做一个总结;包括两部分: 1、简单标签赋值和取值; 2、监控:...
  • jquery给多个span赋值

    千次阅读 2014-05-17 16:02:19
    由于我想在页面加载完成后...span代码的写法如下: (多个span) jQuery写法: $(document).ready(function() { //获取当前时间比如:2014年5月17日(js自带的方法) var currentDate = new Date().toLocaleDateStri
  • python 爬取<span></span>中间标签的内容

    千次阅读 2019-12-24 20:30:46
    # python 爬取<span></span>中间标签的内容 html = """ <div> <span class='red'>item1</span> <div> <span id='s1'>item2</span> </div> </...
  • html span标签详解

    千次阅读 多人点赞 2017-03-08 10:49:10
    SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。 <spanSPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕...
  • HTML的SPAN和DIV的区别

    万次阅读 2016-02-07 09:58:52
    SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPANSPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的...
  • Android中Span研究

    千次阅读 2015-12-18 22:37:47
    最近开始学习Android,前天在Github上找到了一个Android下记事本的源代码,看着挺简单就想学习一下,可是还是被一些基础的问题难倒。做了一整天的研究才有些理解。 这个文本编辑器要实现对文字的加粗、斜体、下划线...
  • div,li,span中加入span右对齐方法

    万次阅读 2015-10-20 14:25:05
    我们常常在做网站的时候会div,li,span中加入span右对齐,例如:文章列表中在我们会加入时间让它右对齐,以增加网页的可读性,如下代码: html如下:  span右对齐,换行显示的解决方法2010-8-26 css:.news ul...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 413,642
精华内容 165,456
关键字:

代码span怎么使用