“表单和导航”的版本间的差异
来自CloudWiki
(未显示同一用户的14个中间版本) | |||
第1行: | 第1行: | ||
*前置知识点:[[罗汉塔]]、[[图片、列表和导航]] | *前置知识点:[[罗汉塔]]、[[图片、列表和导航]] | ||
− | |||
− | |||
− | |||
− | |||
+ | 实战案例_商院电商源代码:https://share.weiyun.com/5FUn2P5 | ||
+ | |||
+ | ==准备工作== | ||
+ | *添加表单前,先找好表单放置的区域 | ||
+ | *比如中下图画红框的区域。 | ||
+ | *[[文件:w8-56.png|700px]] | ||
+ | |||
+ | ==添加表单== | ||
+ | *[[文件:w8-57.png|700px]] | ||
+ | *知识点:[[表单的基本标记]]、[[表单的高级标记]] | ||
*知识点:[[表单的基本标记]] | *知识点:[[表单的基本标记]] | ||
− | |||
*源码: | *源码: | ||
<nowiki><form> | <nowiki><form> | ||
第13行: | 第18行: | ||
</form></nowiki> | </form></nowiki> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | *页面此时的完整代码: | ||
+ | <nowiki><!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></nowiki> | ||
==导航== | ==导航== | ||
− | === | + | ===超链接简易版导航=== |
− | * | + | *直接使用超链接就可以制作一个简单的导航: |
− | + | *[[文件:w8-58.png|700px]] | |
− | |||
− | *[[文件:w8- | ||
*代码: | *代码: | ||
− | <nowiki><div id=" | + | <nowiki><div id="layer1-2"> |
− | + | <a href="#">学校概况</a> | |
− | + | <a href="#">机构设置</a> | |
− | + | <a href="#">教育教学</a> | |
− | + | <a href="#">创新创业</a> | |
− | + | <a href="#">科技服务</a> | |
− | </div></nowiki> | + | </div></nowiki> |
− | === | + | ===将超链接转化为块级元素=== |
− | * | + | *但是我们知道,导航之所以称为导航条,是因为将超链接转化成了块级元素。 |
− | + | *所以我们添加如下CSS代码: | |
− | * | + | <nowiki> |
− | + | #layer1-2{width:100%;height:40px;background-color:darkblue;color:white; | |
− | + | } | |
− | + | #layer1-2 a{ | |
− | + | width:16%; | |
− | + | float:left; | |
− | + | height:40px; | |
− | + | color:#FFFFFF; | |
− | + | }</nowiki> | |
− | + | *添加之后的效果为: | |
− | + | [[文件:w8-59.png|700px]] | |
− | + | ===导航栏最终效果=== | |
− | + | *[[文件:w8-60.png|700px]] | |
− | * | + | *我们再继续优化:使文字居中,去掉下划线,增加悬停 |
<nowiki><style> | <nowiki><style> | ||
− | # | + | #layer1-2 { |
− | width: | + | width:100%; |
− | height: | + | height:40px; |
− | background-color: | + | background-color:darkblue; |
font-weight:bold;/*字体加粗*/ | font-weight:bold;/*字体加粗*/ | ||
font-size:1em;/*字号*/ | font-size:1em;/*字号*/ | ||
text-align:center; /* 这个属性使盒子中的链接居中 */ | text-align:center; /* 这个属性使盒子中的链接居中 */ | ||
− | } | + | } |
− | # | + | #layer1-2 a{ |
− | + | width:16%; | |
− | width:16%; | ||
float:left; | float:left; | ||
− | height: | + | height:40px; |
− | |||
− | |||
− | line-height: | + | color:white; |
− | + | line-height:40px; /* 行高*/ | |
text-decoration:none; /*下划线*/ | text-decoration:none; /*下划线*/ | ||
− | + | ||
} | } | ||
− | # | + | #layer1-2 a:hover{ /* 鼠标经过时 */ |
background-color:#002099; /* 改变背景色 */ | background-color:#002099; /* 改变背景色 */ | ||
color:#ffff00; /* 改变文字颜色 */ | color:#ffff00; /* 改变文字颜色 */ | ||
− | + | ||
} | } | ||
</style> | </style> | ||
</nowiki> | </nowiki> | ||
+ | *页面此时的完整代码: | ||
+ | <nowiki><!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{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></nowiki> |
2018年12月21日 (五) 13:28的最新版本
实战案例_商院电商源代码:https://share.weiyun.com/5FUn2P5
准备工作
添加表单
<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{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>