html好看的标题样式代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section class="diy-editor">
<h2 style="margin: 8px 0px 0px; padding: 0px; font-weight: bold; font-size: 16px; line-height: 28px; max-width: 100%; color: rgb(18, 150, 219); min-height: 32px; border-bottom: 2px solid rgb(18, 150, 219); text-align: justify; border-top-color: rgb(18, 150, 219); border-left-color: rgb(18, 150, 219); border-right-color: rgb(18, 150, 219);">
<span class="autonum" placeholder="1" style="background-color: #1296DB; border-radius: 80% 100% 90% 20%; color: #FFFFFF; display: block; float: left; line-height: 20px; margin: 0px 8px 0px 0px; max-width: 100%; padding: 4px 10px; word-wrap: break-word !important;">1</span><strong class="diybrush" data-brushtype="text" style="border-color: rgb(18, 150, 219);">第一标题</strong>
</h2>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<section style=" width: 50%; margin: 2em auto 0px; padding: 0.5em 0px; border-top: 1px solid rgb(173, 18, 14); display: block; color: rgb(166, 166, 166); box-sizing: border-box;">
<section style="margin-top:-1em;text-align:center;padding:0;line-height:1em;box-sizing:border-box">
<span style="color: #AD120E; font-size: 14px; font-style: normal; padding: 4px 8px; text-align: center; height: 18px; border-left: 1px solid #AD120E; border-right: 1px solid #AD120E; background-color: #FFFFFF; border-bottom-color: #AD120E; border-top-color: #AD120E;">这里输入标题</span>
</section>
<section style=" width:0;height:0;clear:both"></section>
</section>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<section style="max-width:100%;line-height:25px;text-align:center">
<section style="margin-bottom: -10px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; box-sizing: border-box; display: inline-block; border-bottom: 1px solid rgb(17, 90, 201);">
<section style="margin-bottom: -5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; box-sizing: border-box; border-bottom: 1px solid rgb(17, 90, 201); font-size: 15px; color: rgb(51, 51, 51);">
<p style="margin: 0px; padding: 0px; color: rgb(17, 90, 201); border-color: rgb(17, 90, 201);">
这里输入标题
</p>
</section>
</section>
<section style="margin: 0px auto; max-width: 100%; width: 11px; height: 11px; border-right: 1px solid rgb(17, 90, 201); border-bottom: 1px solid rgb(17, 90, 201); transform: rotate(45deg); box-sizing: border-box;"></section>
</section>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<section style="white-space: normal; border-style: none none none solid; border-color: rgb(18, 150, 219); padding: 10px 2px; font-size: 14px; line-height: 20px; font-family: arial, helvetica, sans-serif; color: rgb(255, 255, 255); border-radius: 4px; box-shadow: rgb(153, 153, 153) 2px 2px 4px; border-left-width: 10px; background-color: rgb(18, 150, 219);">
<section style="display: inline-block; border-color: rgb(18, 150, 219); color: inherit;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20" height="20" viewbox="0 0 32 32" style="vertical-align: top; border-color: rgb(18, 150, 219); color: inherit;">
<path fill="#fff" d="M19.998 31.469v-4.209c4.648-1.651 7.996-6.044 7.996-11.26 0-5.214-3.348-9.608-7.996-11.26v-4.209c6.893 1.78 11.994 8.019 11.994 15.469s-5.101 13.69-11.994 15.469zM16 31.992l-7.996-7.996h-5.997c-1.105 0-1.999-0.894-1.999-1.999v-11.994c0-1.105 0.894-1.999 1.999-1.999h5.997l7.996-7.996c0 0 1.999-0.25 1.999 1.999 0 4.556 0 23.878 0 27.986 0 2.249-1.999 1.999-1.999 1.999zM14.001 8.004l-3.998 3.998h-5.997v7.996h5.997l3.998 3.998v-15.992zM25.995 16c0 3.721-2.553 6.821-5.997 7.713v-4.269c1.191-0.693 1.999-1.968 1.999-3.444s-0.808-2.751-1.999-3.444v-4.269c3.444 0.892 5.997 3.992 5.997 7.713z" style="border-color: rgb(255, 255, 255); color: inherit;"></path>
</svg>
</section>
<section style="padding: 0px; margin: 0px 0px 0px 5px; line-height: 20px; display: inline-block; vertical-align: top; border-color: rgb(18, 150, 219); color: inherit;">
<p style="padding: 0px; margin: 0px; border-color: rgb(18, 150, 219); color: inherit;" class="diybrush" data-brushtype="text">
公告：二维工坊全新上线！
</p>
</section>
</section>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<fieldset style="clear: both; padding: 0px; border: 0px none; margin: 1em 0px 0.5em;">
<section style="border-top: 2px solid rgb(18, 150, 219); border-right-color: rgb(18, 150, 219); border-bottom-color: rgb(18, 150, 219); border-left-color: rgb(18, 150, 219); font-size: 1em; font-weight: inherit; text-decoration: inherit; color: rgb(255, 255, 255); box-sizing: border-box;">
<section class="diybrush" style="padding: 0px 0.5em; background-color: rgb(18, 150, 219); display: inline-block; font-size: 16px; color: rgb(255, 255, 255);" data-brushtype="text">
微信编辑器
</section>
</section>
</fieldset>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<section style="white-space: normal;border: none;border-style: none;" class="p_variable_border">
<section style="font-size: 18px; font-family: inherit; font-weight: inherit; text-decoration: inherit; color: rgb(254, 254, 254);" class="p_variable_color">
<section style="display: inline-block; font-size: 1em; font-family: inherit; background-color: rgb(18, 150, 219); margin-top: 4px; height: 34px; float: left; line-height: 34px; padding: 0px 1em; margin-left: 10px; color: rgb(255, 255, 255);">
<section class="diybrush" data-brushtype="text">
标题
</section>
</section>
<section style="border-bottom: 2px solid rgb(18, 150, 219); height: 38px; font-size: 18px; font-family: inherit; font-weight: inherit; text-decoration: inherit; color: rgb(254, 254, 254);"></section>
</section>
</section>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<section style="color: inherit; font-size: 16px; padding: 5px 10px 0px 35px; margin-left: 27px; border-left-width: 2px; border-left-style: dotted; border-left-color: rgb(228, 228, 228);">
<section class="autonum" style=" width: 32px; height: 32px; margin-left: -53px; margin-top: 23px; color: rgb(255, 255, 255); text-align: center; line-height: 32px; border-radius: 16px; background: rgb(18, 150, 219); border-color: rgb(18, 150, 219);">
1
</section>
<section class="diybrush" style="margin-top: -30px;padding-bottom: 10px; color: inherit;">
<p style="clear: both; line-height: 1.5em; font-size: 14px; color: inherit;">
<span style="color:inherit; font-size:16px"><strong style="color:inherit">这里写标题</strong></span>
</p>
<p style="clear: both; line-height: 1.5em; font-size: 14px; color: inherit;">
这里简单描述一下
</p>
</section>
</section>
</section>
<p>
<br/>
</p>
<p>
<br/>
</p>
</body>
</html>
评论 (0)