网页制作（三）

最新推荐文章于 2024-09-27 15:52:57 发布

苑同学爱编程

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量50

点赞数

文章标签：前端 javascript 开发语言 html

本文链接：https://blog.csdn.net/weixin_59064057/article/details/134774782

版权

系列文章目录

提示：这里面的图片和文字都可以更改，里面的属性稍微改一下，可以更好地达到预期的效果
例如：里面的图片和标题名称，我这里在超链接没有放内容，有需求的得自己加上去哈

网页设计（三）

系列文章目录
前言
一、代码
二、运行效果
- 小白制作，还请谅解
三、总结

前言

提示：尽管你无需事先拥有任何 HTML 相关知识以学习该模块，你仍至少需要熟悉一些使用电脑的基础知识，并会被动地使用网络（也就是看着它，浏览内容）。你需要配置基础的开发环境（详细说明请参见安装基本软件页面），并且懂得如何创建和管理文件（在处理文件页面中有详细说明）——它们都是我们纯新手 Web 开发入门模块的一部分。以下内容仅供参考。

一、代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="a.css">
        <title>个人摄影博客</title>
        <style type="text/css"></style>
        <body class="gujia">
            <script src="../个人摄影博客/shubiao.js"></script>
            <div class="biaoti">
                <div class="kongbai"></div>
                <div class="logo"></div>
                <div class="wenben">Mr. July</div>
                <div class="logo"></div>
                <div class="kongbai"></div>
                <div class="kongbai"></div>
                <a href="#" class="wenben1">楼主阁</a>
                <a href="#" class="wenben1">藏经阁</a>
                <a href="#" class="wenben1">会酒楼</a>
                <a href="#" class="wenben1">仙云楼</a>
                <a href="#" class="wenben1">山海会</a>
                <a href="#" class="wenben1">商盟厅</a>
            </div>
            <div class="dierhnag">
                <div class="kongbai1"></div>
                <div class="nenrong">
                    <div class="zuo1">
                        <p>&ensp;</p>
                        <p>Xiaoyuan strives to <br/> programming</p>
                        <p style="font-size: 30px;"><br/>Forgive me</p>
                        <p style="font-size: 30px;">You're left in my world</p>
                    </div>
                    <div class="zuo2"></div>
                    <div class="zuo3"></div>
                </div>
                <div class="kongbai1"></div>
            </div>
        </body>
    </head>
</html>

*{
    padding: 0;
    margin: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    cursor: url(https://images.cnblogs.com/cnblogs_com/jingjingjingjingjingjingrj/1701449/o_200415081944o_cursor.png),auto;
}
.gujia{
    width: 100%;
    height: 100%;
    background: url(../个人摄影博客/photo/0030223BdcZ.jpg);
    /* 让背景图基于容器大小伸缩 */
    background-size: 100% 100%;
}
.biaoti{
    height:50px;
    width:100%;
    margin:0px auto;
    overflow:hidden;
    float: left;
    /*边框阴影*/
    border-bottom:1px solid #000;
    box-shadow: 2px 2px 5px #000;
    float: left;
}
.kongbai{
    height: 50px;
    width: 150px;
    float: left;
}
.logo{
    height: 50px;
    width: 50px;
    background: url(../个人摄影博客/photo/1000.png);
    background-size: 100%;
    float: left;
}
.wenben{
    height: 50px;
    width: 100px;
    float: left;
    font-size: 27px;
    color: aliceblue;
    text-align: center;
    line-height: 50px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-left: 10px;
}
.wenben1{
    height: 50px;
    width: 100px;
    float: left;
    font-size: 20px;
    color: rgb(255, 255, 255);
    /* 文字阴影 */
    text-shadow:2px 3px 1px rgb(0, 0, 0);
    text-align: center;
    line-height: 50px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-left: 10px;
    text-decoration: dashed;
}
.dierhnag{
    height: 720px;
    width: 100%;
    overflow: hidden;
}
.kongbai1{
    height: 700px;
    width: 130px;
    float: left;
}
.nenrong{
    height: 700px;
    width: 1200px;
    float: left;
    border-bottom:1px solid #000;
    box-shadow: 2px 2px 5px #000;
}
/*首页内容*/
.zuo1{
    width: 600px;
    height: 700px;
    color: aliceblue;
    text-shadow:2px 3px 1px rgb(0, 0, 0);
    float: left;
    font-size: 55px;
    text-align: center;
}
.zuo2{
    width: 600px;
    height: 700px;
    float: left;
}

(function () {
    var a_idx = 0;
    window.onclick = function (event) {
        var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
            "❤敬业❤", "❤诚信❤", "❤友善❤");

        var heart = document.createElement("b"); //创建b元素
        heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

        document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
        a_idx = (a_idx + 1) % a.length;
        heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

        var f = 16, // 字体大小
            x = event.clientX - f / 2, // 横坐标
            y = event.clientY - f, // 纵坐标
            c = randomColor(), // 随机颜色
            a = 1, // 透明度
            s = 1.2; // 放大缩小

        var timer = setInterval(function () { //添加定时器
            if (a <= 0) {
                document.body.removeChild(heart);
                clearInterval(timer);
            } else {
                heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                    c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                    s + ");";

                y--;
                a -= 0.016;
                s += 0.002;
            }
        }, 15)

    }
    // 随机颜色
    function randomColor() {

        return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
        .random() * 255)) + ")";

    }
}());