HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）

效果图：原界面：先放原界面的代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>WEATHER</title></head><body id="weather" style="text-align: center; padd

Timer95

28279人浏览 · 2021-07-21 18:19:08

Timer95 · 2021-07-21 18:19:08 发布

文章目录

效果图展示
前言
步骤
3.添加背景
补充

效果图展示

效果图：
在这里插入图片描述

原界面：
在这里插入图片描述

先放原界面的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WEATHER</title>
    </head>

    <body id="weather" style="text-align: center; padding: 5px; background-color:skyblue;">
        <form action="/year" method="POST">
            <br>
            <p>某城市某年的天气情况</p>
            <div class="form">
                <p>查找的城市</p>
                <input class="form-name" placeholder="输入城市的名字，如：成都" name="city" type="text" autofocus>
            </div><br>
            <div class="form" style="margin-top: 30px;">
                <p>查找的年份</p>
                <input class="form-name" placeholder="输入过去十年内的年份，如：2020" name="year" type="text" autofocus>
            </div><br>
            <input type="submit" value="搜索" class="btn" /></br>           
        </form>
        <br><br>
        <a href="/high_temperature" target="_blank">全国省会城市最高气温</a>
        <br><br>
        <a href="/low_temperature" target="_blank">全国省会城市最低气温</a>

    </body>

</html>

前言

页面分成三个模块：
1.查找某城市某年天气情况，自己输入城市和年份->3标题+2文本框+1按钮
2. 查找全国省会城市最低气温->1超链接
3. 查找全国省会城市最高气温->1*超链接

目的：
原页面太丑了，想弄一个导航栏来代替超链接，然后美化一下文本框和按钮
参考博客：HTML+CSS登陆界面实例

步骤

0.创建css文件

先创建一个login.css 文件，导入进login.html里面

<head>
        <meta charset="UTF-8">
        <meta name="weather_project">
        <title>WEATHER</title>
        <!-- 引入 css文件 -->
        <link rel="stylesheet" href="../login.css"/> 
    </head>

1.美化中间板块

1.先改第一个模块，也就是这一块
请添加图片描述

1.1 html改变

在form表单里加了一个div模块 div id="city_year"，便于css定位进行美化
将一开始的文字“某城市某年的天气情况”从<p>模块换成了<h1>，因为后面想对这串文字的字体进行单独设置
input 的一些属性也进行了修改

将网页代码更改为

<form action="/year" method="POST">
            <div id="city_year">
                <h1>某城市某年的天气情况</h1>
                <!-- <p>某城市某年的天气情况</p> -->

                <div class="form">
                    <div class="item">
                        <p>查找的城市</p>
                        <input  placeholder="城市名字，如：成都" name="city" type="text">
                    </div>
                </div><br>
                <div class="form">
                    <div class="item">
                        <p>查找的年份</p>
                        <input class="form-name" placeholder="仅限十年以内，如：2020" name="year" type="text" autofocus>
                    </div>
                </div><br>
            
            
                <!-- <input type="submit" value="搜索" class="btn" /></br>   -->
                <!-- 用button实现的Login登陆按钮 -->
                <button type="submit">搜索</button>              
            </div>
        </form>

1.2. css部分

/* Login模块的居中显示 */
#city_year {
    border: 1px solid white;
    width: 30%;
    text-align: center;
    margin: 0 auto;
    margin-top: 10%;  /* 高度调整 */
    background: #00000080;
    padding: 20px 50px;

    /* 将按钮的左右边框设置为圆弧 */
    border-radius: 30px; 
    /* 圆角弧度24px */
    transition:0.2s;
}

/* Login标题的颜色控制 */

#city_year h1 {
    color: white;
}

/* 对输入窗口进行修改 */
#city_year .form .item p {
    font-size: 18px; /* 修改按钮文字的大小 */
    color: white;
}
#city_year .form .item input{
    width: 200px; /* 设置合适的宽度 */
    border: 0; /* 首先将边界取消，方便下面修改下部边界宽度 */
    border-bottom: 5px solid white; /* 将下边界进行修改，显示出横线效果 */
    font-size: 18px; /* 将字体适当的变大加粗 */
    background: #ffffff00; /* 将输入框设置为透明 */
    color: white; /* 上面的文本颜色设置为白色，但是placeholder的颜色要单独设置 */
    padding: 5px 10px; /* 为了placeholder的内容不是顶格显示，增加内部边界 */
}

/* 对button进行美化 */
#city_year button {
    /* 设置合适的按钮的长和宽 */
    width: 150px; 
    /* height: 30px; */
    text-transform: uppercase;
    border: 3px solid #FFFFFF; /* 设置按钮的边界粗细和颜色 */
    margin-top: 18px; /* 设置合适的上部外框的宽度，增加与上面的password框的距离 */
    text-align: center;
    font-size: 18px; /* 修改按钮文字的大小 */
    /* 设置按钮里面字体颜色 */
    color: #FFFFFF;
    line-height: 50px;
    border-radius: 30px; /* 将按钮的左右边框设置为圆弧 */
    cursor: pointer;
    /* 圆角弧度24px */
    transition:0.2s;
    /* 设置按钮背景为透明 */
    background:rgba(0,0,0,0);   
}

于是界面会变成这样：
请添加图片描述

1.3. placeholder美化

当然，还要对placeholder里面的文字进行设置，改变字体颜色和大小。
于是在HTML文件的head和body板块之间增加style模块

<!-- 单独设置placeholder的颜色 -->
    <style>
        input::-webkit-input-placeholder {
            color:white;
        }
        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: white;
        }
        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: white;
        }
        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: white;
        }
    </style>

效果如下：
请添加图片描述

2.增加导航栏

2.1 html文件增加代码

在login.html的body里面增加代码

<!-- 实现顶部导航栏功能 -->
        <div id="nav">
            <ul class="item">
                <li class="cur"><a href="/">首页</a></li>
                <li><a href="/low_temperature" target="_blank">全国省会城市最低气温</a></li>
                <li><a href="/high_temperature" target="_blank">全国省会城市最高气温</a></li>
            </ul>
        </div>

并且修改一下body的属性
本来是：

    <body id="weather" style="text-align: center; padding: 5px; background-color:skyblue;">

直接改成（为了之后自己设置背景图片）

<body>

效果：
请添加图片描述

2.2 CSS文件增加代码

在login.css 里面增加代码，对导航栏进行美化

2.2.1 增加一个底部方框

/* 导航栏 */
#nav{
	width: 100%;
	height: 60px;
	background-color: #00000080;
}

请添加图片描述
2.2.2 变成无序列表

/* 无序列表 */
#nav ul {
    float:left;
    margin: 0px;
    padding: 0 0 0 0;
    width: 920px;
    list-style: none;
}

请添加图片描述

2.2.3 文字并排

/* 让链接横排 */
#nav ul li {
    display: inline;
}

请添加图片描述

2.2.4 美化

/* 字体美化等 */
#nav ul li a {
    float: left;
    padding: 11px 20px; 
    font-size: 28px;
    text-align: center;
    text-decoration: none;
    /* background: url(../images/templatemo_menu_divider.png)        center right no-repeat; */
    color: #fff;    
    font-family: Tahoma;
    outline: none;
}

请添加图片描述
2.2.5 鼠标经过时改变颜色

/* 鼠标经过该链接，变色 */
#nav li a:hover {
    color:cornflowerblue;
    background-color:white;
    /*弧度*/
    /* border-radius: 30px;  */
   
}

在这里插入图片描述
目前界面效果：

3.添加背景

在css文件里面添加

/* 增加背景图 */
body {
    background: url("../img/bg1.jpg") center; /* 首先增加背景图 */
    background-size: 100% auto; /* 设置背景的大小 */
    background-repeat: no-repeat; /* 将背景设置为不重复显示 */
}