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

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

Lavfun2年前 (2022-04-14)技术861
红头条目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,'要替换的旧内容','新内容')...

打开页面后自动刷新一次以加载内容

我只是搬运工,下列内容转载于网络:打开后延时1秒刷新页面一次:<SCRIPT LANGUAGE="JavaScript">  function refresh(){ &nbs...

修改去除Powered by Discuz!的方法

1、Powered by Discuz!这个信息存在于页面路径为:根目录下template/default/common/header_common.htm找到下列代码:<title><!–{if !empty(...

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

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

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

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

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