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

百科大全

更新时间：2025-10-05 15:49:1644

admin管理员组
文章数量:1794759

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

文章目录

效果图展示
前言
步骤
- 0.创建css文件
- 1.美化中间板块
- - 1.1 html改变
  - 1.2. css部分
  - 1.3. placeholder美化
- 2.增加导航栏
- - 2.1 html文件增加代码
  - 2.2 CSS文件增加代码
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>  <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>  <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>   <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模块

<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>

效果：

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结束了

补充

背景图片为“言叶之庭”的截图，需要自取

本文标签：文本框按钮过程代码详细

版权声明：本文标题：HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686816060a106434.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。