[分享]css做出一个框框里面放兼职信息

作为前端开发者，CSS 是一个必学之工具。它可以美化我们的网页，使其更加易读和易懂。接下来，让我们通过 CSS 来创建一个框框，将一些兼职信息放在其内。/定义框框样式/ .box { border: ...

作为前端开发者，CSS 是一个必学之工具。它可以美化我们的网页，使其更加易读和易懂。接下来，让我们通过 CSS 来创建一个框框，将一些兼职信息放在其内。

/*定义框框样式*/
.box {
    border: 1px solid #ccc; /*设置边框样式*/
    padding: 10px; /*设置内边距*/
    background-color: #f0f0f0; /*设置背景色*/
    margin: 0 auto; /*使框框居中*/
    width: 50%; /*设置框框宽度*/
}

/*定义标题样式*/
.title {
    font-size: 1.5em; /*设置字体大小*/
    font-weight: bold; /*设置字体粗细*/
    text-align: center; /*设置文字居中*/
    margin-bottom: 10px; /*设置标题与正文之间的空白*/
}

/*定义正文样式*/
.content {
    font-size: 1.2em; /*设置字体大小*/
    line-height: 1.5em; /*设置行高*/
    text-align: justify; /*设置文本对齐方式*/
} 

在上述代码中，我们首先定义了一个名为 "box" 的 CSS 类，设置了边框、内边距、背景色、居中和宽度等属性。同时，我们还分别定义了 "title" 和 "content" 的样式，其中标题加粗、居中，而正文则是左对齐、行距增加。

接下来，我们可以在 HTML 中使用这些样式：

<div class="box">
    <h2 class="title">招聘兼职</h2>
    <p class="content">我们公司正在招聘一名市场营销兼职，要求有一定的销售经验，工作时间为每周六~日，工资面谈。有意者请联系我们。</p>
</div> 

通过 div 容器包含标题和正文，使用相应的 CSS 类让内容更加美观，我们可以在网页上创建一个充满活力的招聘信息框框。