创造你的浏览器主页（一）

博主： zhiwei
发布时间：2021 年 08 月 20 日
1551次浏览
暂无评论
6728字数
分类：分享

## 关于 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>
```

> 目前的代码

[![](https://zhiwei.zone/usr/uploads/2021/10/3839940988.png)](https://s1.ax1x.com/2020/07/19/UWwSpt.png)

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

### 让我们改亿下下 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>
```

> 目前的代码

[![](https://zhiwei.zone/usr/uploads/2021/10/2433059031.png)](https://s1.ax1x.com/2020/07/19/UWrlx1.png)

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

## 小结

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

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

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

创造你的浏览器主页（一）

zhiwei • 2021 年 08 月 20 日

## 关于 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>
```

> 搞定~

### 让我们来看看效果

> 目前的代码

[![](https://zhiwei.zone/usr/uploads/2021/10/3839940988.png)](https://s1.ax1x.com/2020/07/19/UWwSpt.png)

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

### 让我们改亿下下 HTML

### 让我们加亿点点 CSS

### 让我们再来看看效果

> 目前的代码

[![](https://zhiwei.zone/usr/uploads/2021/10/2433059031.png)](https://s1.ax1x.com/2020/07/19/UWrlx1.png)

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

## 小结

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

发表评论 取消回复

创造你的浏览器主页（一）

发表评论取消回复