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

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

Lavfun1年前 (2022-04-14)技术753
红头条目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

分享给朋友:

相关文章

修改misc.phpmod=mobile使DiscuzX论坛PC端与移动端互相跳转

修改misc.phpmod=mobile使DiscuzX论坛PC端与移动端互相跳转

用discuz!论坛访问手机版本的网址不会自动跳转到电脑版网址,而是会跳转到http://域名/misc.php?mod=mobile,这样体验很不好。现提供修改方法:打开论坛根目录找到文件:/source/class/discuz/dis...

DIV_P_SPAN等html标签的用法和区别

<div> </div> 盒子模型 用来做结构的,一般用它来布局 。<p> </p> 中间不可以放div标签,可以但不限于放文字,这个用起来有段落,p标签,可设置宽高的文字区块。<spa...

Linux CentOS 升级更新命令

Linux CentOS 升级更新命令

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

修改去除Powered by Discuz!的方法

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