如何用HTML实现这样子网页

img

用p标签和h1标签
两根线用hr标签。

<h1>春夜喜雨</h1>
<hr/>
<p>句子</p>
<p style="float:right">句子</p>
<p>句子</p>
<p style="float:right">句子</p>
<hr/>

你题目的解答代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
h1 {
    text-align: center;
}
hr.a {
    height: 3px;
    width: 80%;
    border-style: none;
    background-color: #0f0;
    margin-left: 0px;
}
hr.b {
    height: 3px;
    width: 80%;
    border-style: none;
    background-color: #f00;
    margin-right: 0px;
}
p.r {
    text-align: right;
}
</style>
</head>
<body>
<h1>春夜喜雨</h1>
<hr class="a">
    <p>好雨知时节，当春乃发生。</p>
    <p class="r">随风潜入夜，润物细无声。</p>
    <p>野径云俱黑，江船火独明。</p>
    <p class="r">晓看红湿处，花重锦官城。</p>
    <hr class="b">
</body>
</html>

img

div就行 p标签

改一下hr颜色高度就ok啦


<h2>标题</h2>
<hr style="width: 80%;margin-left:0;" />
<p>句子</p>
<p style="float:right">句子</p>
<p>句子</p>
<p style="float:right">句子</p>
<hr  style="width: 80%;margin-right:0;" />