常用html编辑代码及条目的有序列表和无序列表
红头条目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: 微软雅黑, "Microsoft YaHei"; 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: 微软雅黑, "Microsoft YaHei"; 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: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> 01 文字条目第1条; </p> <p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> 02 文字条目第2条; </p> <p style="margin-left:40px; text-indent:-40px;font-family: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> 03 文字条目第3条; </p> <p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> 04 文字条目第4条; </p> <p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> 05 文字条目第5条; </p>
无序列表:
<p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> • 文字条目第1条;文字条目第1条; </p> <p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, "Microsoft YaHei"; font-size:16px; line-height: 2;"> • 文字条目第2条; </p> <p style="margin-left:40px; text-indent:-40px; font-family: 微软雅黑, "Microsoft YaHei"; 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个汉字: <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 发布,如需转载请注明出处。