简单网页制作

先来看看效果图

图片[1]-简单网页制作-余心资源

首先我们来分析一下

html部分

和之前的那个网页差不多,也是分为上下两部分,但是这次我们加一个内容:实现两个网页的跳转

如何实现跳转:在a标签里写上要跳转的网页即可

css部分

也是一样的背景色和字体,和上一篇文章类似

看看源码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗二首</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            position: relative;
            width: 600px;
            margin: 100px auto;
        }
        .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: -28px;
            color: #1767e2;
            font-size: 20px;
            font-style: oblique;
        }
        .bt{
            display: block;
            position:absolute;
            left: 100px;
        }
        .shan{
            position: absolute;
            top: 64px;
            width: 300px;
            height:200px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="zt">
        <a href="test2.html" class="sys" target="_blank">诗一首</a>
        <a href="#" class="ses" target="_blank">诗二首</a>
    </div>
    <img src="pic/shan.jpg"  class="shan">
    <div class="shi">
    <p class="bt">从军行</p>
    <p>
        <br>
        <br>
        青海长云暗雪山,孤城遥望玉门关。
        <br>
        <br>
        黄沙百战穿金甲,不破楼兰终不还。
    </p></div>
</div>
</body>
</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞1
分享
评论 抢沙发
helin的头像-余心资源

昵称

取消
昵称表情代码图片