本文通过逐步指导，展示了如何使用HTML和CSS对一个简单的天气查询页面进行美化，包括创建CSS文件、美化中间板块、增加导航栏和添加背景。主要操作涉及元素布局、样式调整、placeholder美化和导航栏设计，最终实现了页面的视觉升级。
文章目录
效果图展示
效果图：
原界面：
先放原界面的代码：
<!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; /* 将背景设置为不重复显示 */
}
ok结束了
补充
背景图片为“言叶之庭”的截图，需要自取
扫一扫
2040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
