简单网页制作

先看看效果图

那么我们要如何实现这一网页呢

先说html部分

得有一个大的div把全部东西框起来，然后标题用一个div下半部分再用一个div

标题用a标签来实现，

那么主要就是下半部分的诗词和图片，诗词可以用p标签，图片用img标签

css部分

标题要有一个background来设置高宽和颜色

诗词就只需要设置一个颜色和字体样式，还有字体大小即可，那么诗词的标题我们可以单独设一个div对它写一个居中的效果或者margin-left也可以

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗一首</title>
    <style>
        body{
            background: url("pic/bj.png");
        }
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            position: relative;
            width: 600px;
            margin: 100px auto;

            height: 300px;
        }
        .zt{
            height: 40px;
            width: 100%;
            background-color: #65646d;
        }
        .sys,.ses{
            line-height: 40px;
            color: #d2d2d2;
            margin-left: 100px;
        }
        .sys{
            color: green;
        }
        .ses{
            margin-left: 300px;
        }
        .shi{
            position: absolute;
            top: 75px;
            right: -15px;
            color: #1767e2;
            font-size: 22px;
            font-style: oblique;
        }
        .bt{
            display: block;
            position:absolute;
            left: 100px;
        }
        .hua{
            position: absolute;
            top: 64px;
            width: 348px;
            height:200px;
        }
    </style>

</head>
<body>
<div class="content">
    <div class="zt">
        <a href="#" class="sys" target="_blank">诗一首</a>
        <a href="test2.2.html" class="ses" target="_blank">诗二首</a>
    </div>
    <img src="pic/hua.jpg"  class="hua">
    <div class="shi">
        <p class="bt">画</p>
        <p>
            <br>
            <br>
            远看山有色，近听水无声。
            <br>
            <br>
            春去花还在，人来鸟不惊。
        </p></div>
</div>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END