从零开始创造你的浏览器主页（一）

博主：博瀚君
发布时间：2020 年 12 月 02 日
2977次浏览
4 条评论
6888字数
分类：网页

关于 HTML

HTML 的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML 是由 Web 的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly 于1990年创立的一种标记语言，它是标准通用化标记语言 SGML 的应用。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台(如 Linux、Windows 等)。使用 HTML 语言，将所需要表达的信息按某种规则写成 HTML 文件，通过专用的浏览器来识别，并将这些 HTML 文件“翻译”成可以识别的信息，即现在所见到的网页。
~~摘自百度百科~~

最最最最基本的代码

新建一个 .html 文件，内容如下：

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

~~熟读并背诵全文~~

开始写 bug 代码

首先，你得有个搜索框

<input type="text" placeholder="搜索..." />

搞定~

然后，你得有个按钮

<button>搜索</button>

搞定~

让我们来看看效果

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
</head>
<body>
    <input type="text" placeholder="搜索..." />
    <button>搜索</button>
</body>
</html>

目前的代码

目前的效果——尼玛，太丑了吧！

让我们改亿下下 HTML

...
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
...

让我们加亿点点 CSS

*{
    font-family: "Microsoft Yahei","Inconsolata","Courier";
    font-weight: 400;
    outline: none;
    border: none;
}
body{
    margin: 0;
    padding: 0;
}
#main-holder{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 1;
}
#main-over-top{
    height: 72px;
    box-sizing: border-box;
}
#main-header{
    font-weight: 100;
    color: rgb(0,181,173);
    font-size: 2em;
    text-align: center;
    margin: auto;
}
#main-large-search{
    height: 180px;
    box-sizing: border-box;
}
#search_form{
    position: relative;
    top: 1px;
    transition: ease-out top .2s;
    height: 42px;
    min-width: 580px;
    width: 40%;
    margin: auto;
    text-align: center;
}
#search_box{
    height: 42px;
    width: 100%;
    display: block;
    margin-top: .6em;
    border-radius: 12px;
    border: 1.5px solid rgb(0,181,173);
    color: rgb(0,181,173);
    padding-left: 12px;
    padding-right: 96px;
    box-sizing: border-box;
    font-weight: 400;
    outline: none;
    transition: ease-out padding-right .2s,ease-out border-radius .2s;
    z-index: 1;
}
#search_btn{
    background-color: rgb(0,181,173);
    border-color: rgb(0,181,173);
    color: rgb(248,248,248);
    height: 42px;
    width: 88px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border: 1.5px solid rgb(0,181,173);
    box-sizing: border-box;
    font-weight: 400;
    border-radius: 0px 12px 12px 0px;
    transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
    z-index: 2;
    cursor: pointer;
}
#search_btn:hover{
    background-color: rgb(10,191,183);
    border-color: rgb(10,191,183);
    color: rgb(248,248,248);
    width: 108px;
}
#search_form:focus-within{
    top: -2px;
}
#search_form:focus-within>#search_btn{
    width: 108px;
    border-radius: 0px 21px 21px 0px;
}
#search_form:focus-within>#search_box{
    padding-right: 116px;
    border-radius: 21px;
}
#search_btn:hover+#search_box{
    padding-right: 116px;
}
#search_btn:active{
    background-color: rgb(0,171,163)!important;
}
#search_box::-moz-placeholder{
    color: rgb(117,117,117);
}

让我们再来看看效果

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        *{
            font-family: "Microsoft Yahei","Inconsolata","Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }
        body{
            margin: 0;
            padding: 0;
        }
        #main-holder{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }
        #main-over-top{
            height: 72px;
            box-sizing: border-box;
        }
        #main-header{
            font-weight: 100;
            color: rgb(0,181,173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }
        #main-large-search{
            height: 180px;
            box-sizing: border-box;
        }
        #search_form{
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }
        #search_box{
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0,181,173);
            color: rgb(0,181,173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s,ease-out border-radius .2s;
            z-index: 1;
        }
        #search_btn{
            background-color: rgb(0,181,173);
            border-color: rgb(0,181,173);
            color: rgb(248,248,248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0,181,173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }
        #search_btn:hover{
            background-color: rgb(10,191,183);
            border-color: rgb(10,191,183);
            color: rgb(248,248,248);
            width: 108px;
        }
        #search_form:focus-within{
            top: -2px;
        }
        #search_form:focus-within>#search_btn{
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }
        #search_form:focus-within>#search_box{
            padding-right: 116px;
            border-radius: 21px;
        }
        #search_btn:hover+#search_box{
            padding-right: 116px;
        }
        #search_btn:active{
            background-color: rgb(0,171,163)!important;
        }
        #search_box::-moz-placeholder{
            color: rgb(117,117,117);
        }
    </style>
</head>
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
</html>

目前的代码

目前的效果——哦哟，不错嘛~
今天先收工吧！

小结

代码就先写到这里，目前搜索框还不能直接使用，之后还需要加上 JavaScript 才可以。

完整 Demo 链接
·
GitHub 开源仓库

从零开始创造你的浏览器主页（二）

版权

代码部分采用 MIT License
© Copyright 2020 博瀚君

最后修改：2021 年 02 月 19 日 03 : 58 PM

如果觉得我的文章对你有用，请随意赞赏

4 条评论

SuperMains
2022年4月16日 10:27:28

很好！
你已经懂得计算10以内的加法了！
现在去做几道微积分吧！٩(ˊᗜˋ*)و

回复
2233
2021年2月26日 20:30:49

666

回复
Leo韩
2021年1月29日 08:42:41

写的不错哦～

回复
飞崖科技工作室
2021年1月29日 08:41:06

写的真八错φ(￣∇￣o)赞赏了

回复

发表评论取消回复

私密评论

名称

邮箱

地址

从零开始创造你的浏览器主页（一）

博瀚君 • 2020 年 12 月 02 日

关于 HTML

HTML 的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML 是由 Web 的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly 于1990年创立的一种标记语言，它是标准通用化标记语言 SGML 的应用。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台(如 Linux、Windows 等)。使用 HTML 语言，将所需要表达的信息按某种规则写成 HTML 文件，通过专用的浏览器来识别，并将这些 HTML 文件“翻译”成可以识别的信息，即现在所见到的网页。
~~摘自百度百科~~

最最最最基本的代码

新建一个 .html 文件，内容如下：

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

~~熟读并背诵全文~~

开始写 bug 代码

首先，你得有个搜索框

<input type="text" placeholder="搜索..." />

搞定~

然后，你得有个按钮

<button>搜索</button>

搞定~

让我们来看看效果

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
</head>
<body>
    <input type="text" placeholder="搜索..." />
    <button>搜索</button>
</body>
</html>

目前的代码

目前的效果——尼玛，太丑了吧！

让我们改亿下下 HTML

...
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
...

让我们加亿点点 CSS

*{
    font-family: "Microsoft Yahei","Inconsolata","Courier";
    font-weight: 400;
    outline: none;
    border: none;
}
body{
    margin: 0;
    padding: 0;
}
#main-holder{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 1;
}
#main-over-top{
    height: 72px;
    box-sizing: border-box;
}
#main-header{
    font-weight: 100;
    color: rgb(0,181,173);
    font-size: 2em;
    text-align: center;
    margin: auto;
}
#main-large-search{
    height: 180px;
    box-sizing: border-box;
}
#search_form{
    position: relative;
    top: 1px;
    transition: ease-out top .2s;
    height: 42px;
    min-width: 580px;
    width: 40%;
    margin: auto;
    text-align: center;
}
#search_box{
    height: 42px;
    width: 100%;
    display: block;
    margin-top: .6em;
    border-radius: 12px;
    border: 1.5px solid rgb(0,181,173);
    color: rgb(0,181,173);
    padding-left: 12px;
    padding-right: 96px;
    box-sizing: border-box;
    font-weight: 400;
    outline: none;
    transition: ease-out padding-right .2s,ease-out border-radius .2s;
    z-index: 1;
}
#search_btn{
    background-color: rgb(0,181,173);
    border-color: rgb(0,181,173);
    color: rgb(248,248,248);
    height: 42px;
    width: 88px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border: 1.5px solid rgb(0,181,173);
    box-sizing: border-box;
    font-weight: 400;
    border-radius: 0px 12px 12px 0px;
    transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
    z-index: 2;
    cursor: pointer;
}
#search_btn:hover{
    background-color: rgb(10,191,183);
    border-color: rgb(10,191,183);
    color: rgb(248,248,248);
    width: 108px;
}
#search_form:focus-within{
    top: -2px;
}
#search_form:focus-within>#search_btn{
    width: 108px;
    border-radius: 0px 21px 21px 0px;
}
#search_form:focus-within>#search_box{
    padding-right: 116px;
    border-radius: 21px;
}
#search_btn:hover+#search_box{
    padding-right: 116px;
}
#search_btn:active{
    background-color: rgb(0,171,163)!important;
}
#search_box::-moz-placeholder{
    color: rgb(117,117,117);
}

让我们再来看看效果

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        *{
            font-family: "Microsoft Yahei","Inconsolata","Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }
        body{
            margin: 0;
            padding: 0;
        }
        #main-holder{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }
        #main-over-top{
            height: 72px;
            box-sizing: border-box;
        }
        #main-header{
            font-weight: 100;
            color: rgb(0,181,173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }
        #main-large-search{
            height: 180px;
            box-sizing: border-box;
        }
        #search_form{
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }
        #search_box{
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0,181,173);
            color: rgb(0,181,173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s,ease-out border-radius .2s;
            z-index: 1;
        }
        #search_btn{
            background-color: rgb(0,181,173);
            border-color: rgb(0,181,173);
            color: rgb(248,248,248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0,181,173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }
        #search_btn:hover{
            background-color: rgb(10,191,183);
            border-color: rgb(10,191,183);
            color: rgb(248,248,248);
            width: 108px;
        }
        #search_form:focus-within{
            top: -2px;
        }
        #search_form:focus-within>#search_btn{
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }
        #search_form:focus-within>#search_box{
            padding-right: 116px;
            border-radius: 21px;
        }
        #search_btn:hover+#search_box{
            padding-right: 116px;
        }
        #search_btn:active{
            background-color: rgb(0,171,163)!important;
        }
        #search_box::-moz-placeholder{
            color: rgb(117,117,117);
        }
    </style>
</head>
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
</html>

目前的代码

目前的效果——哦哟，不错嘛~
今天先收工吧！

小结

代码就先写到这里，目前搜索框还不能直接使用，之后还需要加上 JavaScript 才可以。

完整 Demo 链接
·
GitHub 开源仓库

从零开始创造你的浏览器主页（二）

版权

代码部分采用 MIT License
© Copyright 2020 博瀚君

从零开始创造你的浏览器主页（一）

关于 HTML

最最最最基本的代码

开始写 bug 代码

首先，你得有个搜索框

然后，你得有个按钮

让我们来看看效果

让我们改亿下下 HTML

让我们加亿点点 CSS

让我们再来看看效果

小结

版权

4 条评论

发表评论取消回复

博客迁移成功！

【测评】各大 CDN 测评来啦！

从零开始创造你的浏览器主页（一）

快来给你的博客加一只看板娘！

从零开始创造你的浏览器主页（二）

还活着，活得好好的

快来给你的博客加一只看板娘！

【新闻】6 个月无法访问 iCloud 账号？因姓氏 True 被代码误认是 Bool 值！

[OIer Space] 2022 年 5 月 5 日：投票功能开启 beta 尝鲜

【新闻】研究报告称所有 iPhone 13 机型都将提供 1TB 存储空间和 LiDAR 摄像头

从零开始创造你的浏览器主页（一）

关于 HTML

最最最最基本的代码

开始写 bug 代码

首先，你得有个搜索框

然后，你得有个按钮

让我们来看看效果

让我们改亿下下 HTML

让我们加亿点点 CSS

让我们再来看看效果

小结

版权

关于 HTML

最最最最基本的代码

开始写 bug 代码

首先，你得有个搜索框

然后，你得有个按钮

让我们来看看效果

让我们改亿下下 HTML

让我们加亿点点 CSS

让我们再来看看效果

小结

版权

4 条评论

发表评论 取消回复

从零开始创造你的浏览器主页（一）

关于 HTML

最最最最基本的代码

开始写 bug 代码

首先，你得有个搜索框

然后，你得有个按钮

让我们来看看效果

让我们改亿下下 HTML

让我们加亿点点 CSS

让我们再来看看效果

小结

版权

发表评论取消回复