使用html文件自定义浏览器起始页

446 words

2 minutes

Views: 0 Visitors: 0

使用html文件自定义浏览器起始页

2025-03-27

Note

html

敲键盘的缘由#

这是360浏览器的起始页

alt text

这是Edge的，还是优化后的，不然和360一样——满屏广告

alt text

可是360的无法通过一般设置改成Edge那样的。

那你问我#

Q：怎么办？

~~A：摆！~~

A：自己动手，丰衣足食！

Look——

alt text

那你问我——怎么做？#

那简单啊，其实只要有想法就行。

用JavaScript（其实我不会）写一个html文件出来，不会？把想要实现的想法给AI就行，让它帮你写：

这是DeepSeek帮我写的（作为一个开发者，改改代码还是可以的），以下代码实现的就是上面那种效果：

1
<html lang="en">
2
<head>
3
    <meta charset="UTF-8">
4
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
    <style>
6
        * {
7
            margin: 0;
8
            padding: 0;
9
            box-sizing: border-box;
10
        }
11

12
        /* 新增文字容器样式 */
13
        .center-text {
14
            position: fixed;
15
            top: 50%;
16
            left: 50%;
17
            transform: translate(-50%, -50%);
18
            font-size: 7rem;      /* 字体大小 */
19
            font-weight: bold;     /* 加粗 */
20
            color: rgb(201, 176, 234);         /* 字体颜色 */
21
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
22
            z-index: 1;           /* 确保文字在图片上方 */
23
        }
24
    </style>
25
    <title>主页</title>
26
</head>
27
<body>
28
    <script>
29
        // 动态创建图片
30
        const img = document.createElement('img');
31
        img.src = "D:/Users/21460/Pictures/wallpaper/2d6eb26d900a4631817007b08e7bf93e.jpg";
32
        img.alt = '全屏图片';
33

34
        // 通过 JS 设置全屏样式
35
        Object.assign(img.style, {
36
            width: '100vw',
37
            height: '100vh',
38
            objectFit: 'cover',
39
            position: 'fixed',
40
            top: '0',
41
            left: '0'
42
        });
43

44
        // 创建文字容器
45
        const textDiv = document.createElement('div');
46
        textDiv.className = 'center-text';
47
        textDiv.textContent = "Hello, World!";
48

49
        // 先插入文字再插入图片（保持文字在上层）
50
        document.body.appendChild(textDiv);
51
        img.onload = () => document.body.appendChild(img);
52
    </script>
53
</body>
54
</html>