HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮） |
您所在的位置：网站首页 › 如何制作网页界面 › HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮） |
HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）
|
文章目录
效果图展示前言步骤0.创建css文件1.美化中间板块1.1 html改变1.2. css部分1.3. placeholder美化
2.增加导航栏2.1 html文件增加代码2.2 CSS文件增加代码
3.添加背景补充
效果图展示
效果图： 原界面： 先放原界面的代码： DOCTYPE html> WEATHER 某城市某年的天气情况 查找的城市 查找的年份 全国省会城市最高气温 全国省会城市最低气温 前言页面分成三个模块： 1.查找某城市某年天气情况，自己输入城市和年份->3标题+2文本框+1按钮 2. 查找全国省会城市最低气温->1超链接 3. 查找全国省会城市最高气温->1*超链接 目的： 原页面太丑了，想弄一个导航栏来代替超链接，然后美化一下文本框和按钮 参考博客：HTML+CSS登陆界面实例 步骤 0.创建css文件先创建一个login.css 文件，导入进login.html里面 WEATHER 1.美化中间板块1.先改第一个模块，也就是这一块 模块换成了，因为后面想对这串文字的字体进行单独设置input 的一些属性也进行了修改 将网页代码更改为 某城市某年的天气情况 查找的城市 查找的年份 搜索 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); }于是界面会变成这样： 当然，还要对placeholder里面的文字进行设置，改变字体颜色和大小。 于是在HTML文件的head和body板块之间增加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; }效果如下： 在login.html的body里面增加代码 首页 全国省会城市最低气温 全国省会城市最高气温并且修改一下body的属性 本来是： 直接改成（为了之后自己设置背景图片） 效果： 在login.css 里面增加代码，对导航栏进行美化 2.2.1 增加一个底部方框 /* 导航栏 */ #nav{ width: 100%; height: 60px; background-color: #00000080; }
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; }
在css文件里面添加 /* 增加背景图 */ body { background: url("../img/bg1.jpg") center; /* 首先增加背景图 */ background-size: 100% auto; /* 设置背景的大小 */ background-repeat: no-repeat; /* 将背景设置为不重复显示 */ }
ok结束了 补充背景图片为“言叶之庭”的截图，需要自取 |
2.2.2 变成无序列表
2.2.5 鼠标经过时改变颜色
目前界面效果： 
【本文地址】