如何制作小标题？

Question

我是初学者，正在学习 HTML，我很难制作一个像本网站顶部的小标题或下图中的小标题。这是我到目前为止尝试过的 HTML：<header class="header">  <div class="dropdown_menu">    <div class="small_header">      <ul id="menu-small-menu" class="small_menu">        <li id="menu-item-10429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10429">12 Royal Street California USA</li>        <li id="menu-item-6305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6305">001-122-134-555</li>        <li id="menu-item-6211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6211">[e-mail]</li>      </ul>    </div>  </div></header>

Answer 1

欢迎来到SO！如前所述，请发布一个最小的、可重现的示例，以便我们找出如何帮助您。此外，您需要准确指出您遇到的问题。如果你只是想要.smallHeader一行，基本的 CSS 可以是：

.smallHeader {

    font-size: small; /* small compared to 'medium' (which is the default, avg. 16px) */

    line-height: 1.2; /* (without 'px') fairly common default. Will also center text vertically */

                      /* A higher value will increase top/bottom spacing of text, but */

                      /* instead you can also use 'padding' to create T/B spacing */

MDN：字体大小， MDN：行高， MDN：填充

但是请注意，使用padding顶部/底部间距的长文本可能会有偏好，因为当行在较小的屏幕上换行时，每个换行将具有相同的line-height（通常不是预期的效果）而不是围绕文本块的间距。

这只是创建小标题行的众多方法之一....

使用您的代码的片段line-height和一些额外的代码来显示和之间的区别padding。在“全页视图”中运行代码段并调整浏览器大小...

ul,li {

   padding: 0; list-style-type: none /* override CSS defaults */

}

ul {

    margin: 0 /* ditto */

}

.smallHeader {

    font-size: small; /* small compared to 'medium' */

    line-height: 1.6; /* demo, default is approx. 1.2 */

    /* eye-candy */

    background-color: grey; color: white;

    text-align: center;

}

li.menu-item {

    display: inline; /* default is 'list-item'. This makes it go horizontal */

    /* eye-candy */

    padding: 0 1em; /* some L/R spacing between menu-items */

}

.bigHeader {

    font-size: x-large; /* extra large */

    padding: 1em 0; /* T/B padding instead of line-height */

/* eye-candy */

    background-color: black; color: white;

    text-align: center;

}

[class^="test"] { background-color: rgba(0,0,0,.1) } /* classnames starting with "test" */

.test-lh { line-height: 1.5em }

.test-pd { padding: 1.5em }

<header>

 <div class="smallHeader"> 

    <ul id="menu-small-menu" class="small_menu">

        <li id="menu-item-10429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10429">12 Royal Street California USA</li>

        <li id="menu-item-6305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6305">001-122-134-555</li>

        <li id="menu-item-6211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6211">[e-mail]</li>

      </ul>

 </div>

 <div class="bigHeader">extra large text</div>

</header>

<div class="test-lh">

    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae. Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem est. Mel ex oporteat consectetuer.

</div>

<div class="test-pd">

    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae. Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem est. Mel ex oporteat consectetuer.

</div>

Answer 2

您可以使用display:grid轻松实现这一点。如果你有这样的 html 文件；

HTML

<header>

 <div class="smallHeader"> 

    <ul id="menu-small-menu" class="small_menu">

        <li id="menu-item-10429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10429">12 Royal Street California USA</li>

        <li id="menu-item-6305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6305">001-122-134-555</li>

        <li id="menu-item-6211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6211">[e-mail]</li>

      </ul>

 </div>

 <div class="bigHeader"></div>

</header>

CSS

header{

display:grid;

grid-template-columns: auto;

}

这使您能够在标题中创建一个网格，并确保标题中的每个 div 都占用一行空间！然后，您还可以修改页眉中两个 div 的高度、颜色……。