当前位置:首页 > 技术 > 正文内容

常用html编辑代码及条目的有序列表和无序列表

Lavfun2年前 (2022-04-14)技术905
红头条目html代码:
<section style="padding: 5px 0 5px 10px; outline: 0; display: inline-block; border-width: 0 0 0 10px; border-style: solid; border-left-color: rgba(197, 25, 68, 0.92); border-right-color: rgba(197, 25, 68, 0.92); border-radius: 5px 0 0 5px; box-shadow: rgb(153, 153, 153) 0 2px 3px; background-color: rgb(239, 239, 239); visibility: visible;">
    <div style="outline: 0;visibility: visible; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: #2c3e50; font-size: 18px;"><strong>红头条目html代码内容</strong></div></section>


提示

这是一段提示内容,你看明白了吗?

提示

这是一段提示内容,你看明白了吗?

提示

这是一段提示内容,你看明白了吗?

    <section style="font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; color: #2c3e50; padding: .1rem 1.5rem; border-left-width: 10px; border-left-style: solid; margin: 1rem 0; background-color: #f3f5f7; border-color: #42b983;">
    <div class="omg-tip"><p class="custom-block-title">提示</p> <p>这是一段提示内容,你看明白了吗?</p></div></section>


加粗红色条目标题:

<p style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:18px; line-height:2; color:#ff0000;">
    <strong style="font-weight: bold;">条目标题</strong>
</p>


有序列表:

<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
    &nbsp; 01 &nbsp; 文字条目第1条;
</p>
<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
     &nbsp; 02 &nbsp; 文字条目第2条;
</p>
<p style="margin-left:40px; text-indent:-40px;font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;  font-size:16px; line-height: 2;">
     &nbsp; 03 &nbsp; 文字条目第3条;
</p>
<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
     &nbsp; 04 &nbsp; 文字条目第4条;
</p>
<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
     &nbsp; 05 &nbsp; 文字条目第5条;
</p>


无序列表:

<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
     • 文字条目第1条;文字条目第1条;
</p>
<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
     • 文字条目第2条;
</p>
<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size:16px; line-height: 2;">
     • 文字条目第3条;
</p>


定义线条高度和颜色:

<hr style="border-color: #dc3545;"/>
<hr style="border-color: #dc3545; height: 1px; background-color: #dc3545;"/>
<hr style="border:1px dashed #c2c9d6" />


文本和图片链接:

<a href="连接路径" target="_blank">链接文字</a>
<a href="链接地址" target="_blank"><img src="图片地址"</a>

注:target="_blank"为弹出框架打开链接。


段落文本缩进2个汉字:

首行缩进2个汉字:&nbsp; &nbsp; &nbsp; &nbsp;

<p style="text-indent:32px;">
    <span style="font-family:Microsoft YaHei;font-size:16px;line-height:2;">段落文本。</span> 
</p>

<p style="text-indent:25pt;">
    <span style="font-family:Microsoft YaHei;font-size:16px;line-height:2;">段落文本。</span>
</p>


html表格的定义方法:


<table width="100%">
    <tbody>
        <tr style=";height:40px">
            <td width="30%" style="border-width: 2px; border-style: double; border-color: windowtext; padding: 0px 2px;">
                <p>
                    第一行左
                </p>
            </td>
            <td width="70%" style="border-width: 2px; border-style: double; border-color: windowtext; padding: 0px 2px;">
                <p>
                    第一行右
                </p>
            </td>
        </tr>
        <tr style=";height:40px">
            <td width="30%" style="border-width: 2px; border-style: double; border-color: windowtext; padding: 0px 2px;">
                <p>
                    第二行左
                </p>
            </td>
            <td width="70%" style="border-width: 2px; border-style: double; border-color: windowtext; padding: 0px 2px;">
                <p>
                    第二行右
                </p>
            </td>
        </tr>
    </tbody>
</table>


扫描二维码推送至手机访问。

版权声明:本文由 声光视趣 - lavfun.com 发布,如需转载请注明出处。

本文链接:https://www.lavfun.com/technical-forum/32.html

分享给朋友:

相关文章

MySQL数据库操作Discuz数据表常用命令记录

门户文章内容快速替换:UPDATE pre_portal_article_content SET content=REPLACE(content,'要替换的旧内容','新内容')...

Linux CentOS 升级更新命令

Linux CentOS 升级更新命令

安装所有软件和系统更新:yum -y update清理缓存信息:yum clean all重启系统:reboot...

修改Linux服务器密码有效期

修改最小天数:(7天)(注意M大小写)chage -m 7 root修改最大天数:(7天)(注意M大小写)chage -M 7 root修改为永久不过期:chage -M...

华用控台专业系列Pro600/Pro620/Pro660技术参数下载

华用控台专业系列Pro600/Pro620/Pro660技术参数下载

华用控台主要优势特性:全中文彩屏触控界面,丰富的图形化显示方式,操作直观简单。强大的控灯能力,自带DMX和Art-Net输出,支持USB和网络扩展线路。多用户系统,各账户间独立密码管理,数据互不影响。兼容R20、D4、DK多种格式灯库直接配...

解决百度ueditor支持iframe框架页面的视频播放问题

新下载的ueditor 增加了xss 安全过虑,把iframe过滤了,导致发表的文章包含的视频播放功能被限制了。说明:新版本ueditor要修改 xss过滤白名单 修改配置文件ueditor.config.js ...

本站原创:PHPCMS的NGINX伪静态和URL规则设置实践记录

本站原创:PHPCMS的NGINX伪静态和URL规则设置实践记录

首先说明一下,本人小白,不懂网页代码编程语言或技术,只是自己摸索了一点简单的修改页面的方法,大部分都是在网上找到的资料,再加上自己的理解、修改、测试琢磨出来的,写出来一方面是自己做个记录,另外一方面希望能帮助到有需要的人吧,水平有限还请鉴谅...