“表单和导航”的版本间的差异
来自CloudWiki
（→导航） |
（→导航栏最终效果） |
||
| 第111行： | 第111行： | ||
===导航栏最终效果=== | ===导航栏最终效果=== | ||
*[[文件:w8-60.png|700px]] | *[[文件:w8-60.png|700px]] | ||
| − | *我们再继续优化: | + | *我们再继续优化:使文字居中，去掉下划线，增加悬停 |
<nowiki><style> | <nowiki><style> | ||
#layer1-2 { | #layer1-2 { | ||
2018年1月21日 (日) 15:08的版本
准备工作
- 添加表单前，先找好表单放置的区域
- 比如中下图画红框的区域。
添加表单
<form> 请输入关键词: <input type="text" name="fname"> <input type="submit" value="搜索"> </form>
- 页面此时的完整代码：
<!doctype html>
<html>
<head>
<title>我的第一个 HTML 页面</title>
<meta charset="gb2312">
<style type="text/css">
*{margin:0;padding:0;}
#layer1{width:100%; height:120px; background:blue;}
#layer1-1{width:100%;height:80px;background-color:lightblue;}
#layer1-1 img {height:100%;}
#layer1-1-1 {width:35%; height:80px; text-align:center;float:left;}
#layer1-1-2 {width:65%; height:80px; line-height:80px;text-align:center;float:left;}
#layer1-2{width:100%;height:40px;background-color:darkblue;color:white;}
#layer2-1{width:45%; height:410px; float:left;}
#layer2{width:100%;height:auto;background-color:lightblue;}
#layer2-1{width:45%; height:410px; float:left;}
#layer2-1 img {width:100%;}
#layer2-2{width:55%; height:410px;;float:left;}
#layer2-2 a {font-size:1em;color:black;text-decoration:none;}
#layer2-2 ul{ padding:0; margin:0;}
#layer2-2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%; }
.clear{clear:both;}
#layer3{width:100%; height:100px; background:gray; text-align:center;line-height:100px;}
</style>
</head>
<body>
<div id="layer1">
<div id="layer1-1">
<div id="layer1-1-1">
<img src="image/logo.png" alt="山东商职学院" />
</div>
<div id="layer1-1-2">
<form action="" method="">
<p>请输入关键词：<input type="text" name="fname" />
<input type="image" src="image/03.png" alt="Submit" style="vertical-align:middle;" /></p>
</form>
</div>
<div class="clear"></div>
</div>
<div id="layer1-2"> 学校概况 教育教学 机构设置 创新创业 科研服务</div>
</div>
<div id="layer2">
<div id="layer2-1">
<img src="image/02.png" alt="学院新闻" />
</div>
<div id="layer2-2">
<h3>学校要闻</h3>
<br/>
<ul>
<li>马克思主义学院召开陶行知教育...</li>
<li>我校承办2017年山东省“农产品质量...</li>
<li>2017山东养老服务业高峰论坛在我...</li>
<li>校报荣获全国高校校报协会2016年...</li>
<li>浙江纺织服装职业技术学院、河北...</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="layer3"><p>学校邮编：250000 学校地址：旅游路4516号</p></div>
</body>
</html>
导航
超链接简易版导航
- 直接使用超链接就可以制作一个简单的导航：
- 代码：
<div id="layer1-2"> <a href="#">学校概况</a> <a href="#">机构设置</a> <a href="#">教育教学</a> <a href="#">创新创业</a> <a href="#">科技服务</a> </div>
将超链接转化为块级元素
- 但是我们知道，导航之所以称为导航条，是因为将超链接转化成了块级元素。
- 所以我们添加如下CSS代码：
#layer1-2{width:100%;height:40px;background-color:darkblue;color:white;
}
#layer1-2 a{
width:16%;
float:left;
height:40px;
color:#FFFFFF;
}
- 添加之后的效果为：
导航栏最终效果
- 我们再继续优化:使文字居中，去掉下划线，增加悬停
<style>
#layer1-2 {
width:100%;
height:40px;
background-color:darkblue;
font-weight:bold;/*字体加粗*/
font-size:1em;/*字号*/
text-align:center; /* 这个属性使盒子中的链接居中 */
}
#layer1-2 a{
width:16%;
float:left;
height:40px;
color:white;
line-height:40px; /* 行高*/
text-decoration:none; /*下划线*/
}
#layer1-2 a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
- 页面此时的完整代码：
<!doctype html>
<html>
<head>
<title>我的第一个 HTML 页面</title>
<meta charset="gb2312">
<style type="text/css">
*{margin:0;padding:0;}
#layer1{width:100%; height:120px; background:blue;}
#layer1-1{width:100%;height:80px;background-color:lightblue;}
#layer1-1 img {height:100%;}
#layer1-1-1 {width:35%; height:80px; text-align:center;float:left;}
#layer1-1-2 {width:65%; height:80px; line-height:80px;text-align:center;float:left;}
#layer1-2 {
width:100%;
height:40px;
background-color:darkblue;
font-weight:bold;/*字体加粗*/
font-size:1em;/*字号*/
text-align:center; /* 这个属性使盒子中的链接居中 */
}
#layer1-2 a{
width:16%;
float:left;
height:40px;
color:white;
line-height:40px; /* 行高*/
text-decoration:none; /*下划线*/
}
#layer1-2 a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
#layer2-1{width:45%; height:410px; float:left;}
#layer2{width:100%;height:auto;background-color:lightblue;}
#layer2-1{width:45%; height:410px; float:left;}
#layer2-1 img {width:100%;}
#layer2-2{width:55%; height:410px;;float:left;}
#layer2-2 a {font-size:1em;color:black;text-decoration:none;}
#layer2-2 ul{ padding:0; margin:0;}
#layer2-2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%; }
.clear{clear:both;}
#layer3{width:100%; height:100px; background:gray; text-align:center;line-height:100px;}
</style>
</head>
<body>
<div id="layer1">
<div id="layer1-1">
<div id="layer1-1-1">
<img src="image/logo.png" alt="山东商职学院" />
</div>
<div id="layer1-1-2">
<form action="" method="">
<p>请输入关键词：<input type="text" name="fname" />
<input type="image" src="image/03.png" alt="Submit" style="vertical-align:middle;" /></p>
</form>
</div>
<div class="clear"></div>
</div>
<div id="layer1-2"> 学校概况 教育教学 机构设置 创新创业 科研服务</div>
</div>
<div id="layer2">
<div id="layer2-1">
<img src="image/02.png" alt="学院新闻" />
</div>
<div id="layer2-2">
<h3>学校要闻</h3>
<br/>
<ul>
<li>马克思主义学院召开陶行知教育...</li>
<li>我校承办2017年山东省“农产品质量...</li>
<li>2017山东养老服务业高峰论坛在我...</li>
<li>校报荣获全国高校校报协会2016年...</li>
<li>浙江纺织服装职业技术学院、河北...</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="layer3"><p>学校邮编：250000 学校地址：旅游路4516号</p></div>
</body>
</html>
