简单网页制作

先看看效果图

图片[1]-简单网页制作-余心资源那么我们要如何实现这一网页呢

先说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
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
helin的头像-余心资源

昵称

取消
昵称表情代码图片