“基础综合项目(一)”的版本间的差异
来自CloudWiki
(→2.盒子的嵌套布局) |
(→4.添加导航菜单) |
||
(未显示同一用户的4个中间版本) | |||
第66行: | 第66行: | ||
<title>无标题文档</title> | <title>无标题文档</title> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | *{letter-spacing:0.2em;} | |
h2{text-align:center;} | h2{text-align:center;} | ||
p{text-align:left;} | p{text-align:left;} | ||
− | + | h3{text-align:center;} | |
#layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} | #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} | ||
#layer1 h1{height:100px;line-height:100px;} | #layer1 h1{height:100px;line-height:100px;} | ||
#layer2{width:100%; height:auto;margin:0px auto;color:black;} | #layer2{width:100%; height:auto;margin:0px auto;color:black;} | ||
− | + | #layer2-1{ | |
width:30%; height:auto; | width:30%; height:auto; | ||
padding-top:2%;margin:0 auto; | padding-top:2%;margin:0 auto; | ||
color:black;text-align:center;float:left; | color:black;text-align:center;float:left; | ||
} | } | ||
− | + | #layer2-1 p{text-align:center;line-height:250%;} | |
− | + | #layer2-2{ | |
width:60%; height:auto; | width:60%; height:auto; | ||
margin:0 auto;color:black; | margin:0 auto;color:black; | ||
text-align:center;float:left; | text-align:center;float:left; | ||
} | } | ||
− | + | .content p{text-indent:2em;line-height:150%;} | |
− | + | #source {text-align:right;} | |
− | + | #layer2-3{clear:both;} | |
#layer3{ | #layer3{ | ||
width:100%; height:30px; | width:100%; height:30px; | ||
第93行: | 第93行: | ||
text-align:center; | text-align:center; | ||
} | } | ||
− | + | #layer3 p{ | |
height:30px;line-height:30px; | height:30px;line-height:30px; | ||
text-align:center; | text-align:center; | ||
第138行: | 第138行: | ||
*这一步主要实现了给网页添加链接和图片 | *这一步主要实现了给网页添加链接和图片 | ||
*相关知识点:[[超链接标记及属性]]、[[插入图像]]、[[图文混排]] | *相关知识点:[[超链接标记及属性]]、[[插入图像]]、[[图文混排]] | ||
+ | *要点: | ||
+ | **超链接和图片的路径要把握清楚 | ||
+ | **图文混排时,如果图片在文字左侧,给图片添加float:left属性,如果在右侧,给图片添加float:right属性 | ||
*源代码: | *源代码: | ||
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
第145行: | 第148行: | ||
<title>无标题文档</title> | <title>无标题文档</title> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | *{letter-spacing:0.2em;} | |
h2{text-align:center;} | h2{text-align:center;} | ||
p{text-align:left;} | p{text-align:left;} | ||
− | + | h3{text-align:center;} | |
#layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} | #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} | ||
− | + | #layer1 h1{height:100px;line-height:100px;} | |
#layer2{width:100%; height:auto;margin:0px auto;color:black;} | #layer2{width:100%; height:auto;margin:0px auto;color:black;} | ||
− | + | #layer2-1{ | |
width:30%; height:auto; | width:30%; height:auto; | ||
− | + | padding-top:2%;margin:0 auto; | |
− | + | color:black;text-align:center;float:left; | |
} | } | ||
− | + | #layer2-1 p{text-align:center;line-height:250%;} | |
− | + | #layer2-2{ | |
width:60%; height:auto; | width:60%; height:auto; | ||
− | + | margin:0 auto;color:black; | |
− | + | text-align:center;float:left; | |
} | } | ||
− | + | .content p{text-indent:2em;line-height:150%;} | |
− | + | .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; } | |
− | + | #source {text-align:right;} | |
− | + | #layer2-3{clear:both;} | |
#layer3{ | #layer3{ | ||
width:100%; height:30px; | width:100%; height:30px; | ||
− | + | background:#074C97;color:white; | |
− | + | text-align:center; | |
} | } | ||
− | + | #layer3 p{ | |
height:30px;line-height:30px; | height:30px;line-height:30px; | ||
− | + | text-align:center; | |
} | } | ||
第213行: | 第216行: | ||
</body> | </body> | ||
</html></nowiki> | </html></nowiki> | ||
+ | |||
==4.添加导航菜单== | ==4.添加导航菜单== | ||
*[[文件:w4-41.png|700px]] | *[[文件:w4-41.png|700px]] | ||
*这一步主要将上一步的超链接改造为导航菜单 | *这一步主要将上一步的超链接改造为导航菜单 | ||
*相关知识点:[[超链接块元素的实现]] | *相关知识点:[[超链接块元素的实现]] | ||
+ | *要点: | ||
+ | **导航菜单核心是把a标签转化为块级元素 | ||
+ | **如果是水平导航栏,这种转化通过给a标签添加float:left来实现 | ||
+ | **如果是垂直导航栏,这种转化通过给a标签添加display:block;来实现; | ||
+ | **添加导航栏后,可通过添加伪类选择符设置悬停等效果。 | ||
*源代码: | *源代码: | ||
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
第224行: | 第233行: | ||
<title>无标题文档</title> | <title>无标题文档</title> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | *{letter-spacing:0.2em;} | |
h2{text-align:center;} | h2{text-align:center;} | ||
p{text-align:left;} | p{text-align:left;} | ||
− | + | h3{text-align:center;} | |
#layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} | #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} | ||
− | + | #layer1 h1{height:100px;line-height:100px;} | |
#layer2{width:100%; height:auto;margin:0px auto;color:black;} | #layer2{width:100%; height:auto;margin:0px auto;color:black;} | ||
− | + | #navigation{ | |
width:30%; height:auto; | width:30%; height:auto; | ||
− | + | font-weight:bold; | |
− | + | font-size:1em; | |
− | + | text-align:center; /* 这个属性使盒子中的链接居中 */ | |
− | + | margin:0 auto; | |
− | + | padding-top:30px; | |
− | + | float:left; | |
} | } | ||
− | + | #navigation a{ | |
width:90%; | width:90%; | ||
第251行: | 第260行: | ||
text-decoration:none; | text-decoration:none; | ||
− | + | border-top:1px solid white; | |
border-left:12px solid #151571; /* 左边的粗边 */ | border-left:12px solid #151571; /* 左边的粗边 */ | ||
} | } | ||
− | + | #navigation a:hover{ /* 鼠标经过时 */ | |
background-color:#002099; /* 改变背景色 */ | background-color:#002099; /* 改变背景色 */ | ||
color:#ffff00; /* 改变文字颜色 */ | color:#ffff00; /* 改变文字颜色 */ | ||
border-left:12px solid yellow; | border-left:12px solid yellow; | ||
} | } | ||
− | + | #layer2-2{ | |
width:60%; height:auto; | width:60%; height:auto; | ||
− | + | margin:0 auto;color:black; | |
− | + | text-align:center;float:left; | |
} | } | ||
− | + | .content p{text-indent:2em;line-height:150%;} | |
− | + | .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; } | |
− | + | #source {text-align:right;} | |
− | + | #layer2-3{clear:both;} | |
− | + | #layer3{ | |
width:100%; height:30px; | width:100%; height:30px; | ||
− | + | background:#074C97;color:white; | |
− | + | text-align:center; | |
} | } | ||
− | + | #layer3 p{ | |
height:30px;line-height:30px; | height:30px;line-height:30px; | ||
− | + | text-align:center; | |
} | } | ||
2017年11月25日 (六) 00:18的最新版本
- 这个实训通过4个步骤实现了一个简单的网页
- 同时,把前两个月所学的主要知识点融入到每个步骤中,达到活学活用的目的。
1.盒子的基本布局
- 这一步主要实现了盒子的基本布局(上下排列),网页由此分为头部、主体、页尾三个部分。
- 相关知识点:盒子模型的实现 CSS的选择符(二) 盒子的基本属性
- 要点:
- 盒子是块级元素,默认就是上下排列
- 为了自适应,盒子宽度尽量定义为百分比,高度尽量定义为auto,同一行内宽度之和不超过100%
- CSS选择符灵活使用,针对某个盒子用id选择符,针对某一类盒子用class选择符。
- 源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{letter-spacing:0.2em;} p{text-align:left;} h3{text-align:center;} #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} #layer2{width:70%; height:auto;margin:0px auto;color:black;} .content {text-indent:2em;line-height:150%;} #source {text-align:right;} #layer3{width:100%; height:30px; background:#074C97;color:white;text-align:center;} </style> </head> <body> <div id="layer1"><h1>山东商业职业技术学院</h1></div> <div id="layer2" > <h3>学院简介</h3> <hr /> <p class="content">山东商业职业技术学院是1999年经教育部批准设立的省属高职院校,办学历史可追溯到1936年的济南惠鲁商业学校。 经过80多年的积淀,学校以“立德树人 兴商润民”为使命,以建设“创业型高水平商科院校”为目标愿景,秉承 “尚德蕴能,日精日新”的校训, 坚持“经营、创新、开放、共生”的发展理念,坚持为社会用人需求服务,为学生就业成才服务,为学生终生幸福奠基, 教学质量、办学特色得到社会各界的广泛肯定。</p> <p class="content">学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 研究中心等省市级科研机构。依托鲁商集团,建有国家农产品现代物流工程技术研究中心。</p> <p id="source"><i>来源:党群部</i></p> </div> <div id="layer3">学校地址:济南市旅游路4516号 邮编:250103</div> </body> </html>
2.盒子的嵌套布局
- 这一步主要实现了盒子的嵌套,将中间的大盒子嵌套了一左一右两个小盒子。
- 相关知识点:盒子的嵌套布局 盒子的嵌套布局(二)
- 要点:
- 网页的布局一般使用盒子的嵌套来实现
- 当嵌套的小盒子垂直排列时,不用添加额外的属性;
- 当嵌套的小盒子水平排列时,需给每个小盒子加上float:left属性,同时最后加上一个空盒子消除浮动
- 源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{letter-spacing:0.2em;} h2{text-align:center;} p{text-align:left;} h3{text-align:center;} #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} #layer1 h1{height:100px;line-height:100px;} #layer2{width:100%; height:auto;margin:0px auto;color:black;} #layer2-1{ width:30%; height:auto; padding-top:2%;margin:0 auto; color:black;text-align:center;float:left; } #layer2-1 p{text-align:center;line-height:250%;} #layer2-2{ width:60%; height:auto; margin:0 auto;color:black; text-align:center;float:left; } .content p{text-indent:2em;line-height:150%;} #source {text-align:right;} #layer2-3{clear:both;} #layer3{ width:100%; height:30px; background:#074C97;color:white; text-align:center; } #layer3 p{ height:30px;line-height:30px; text-align:center; } </style> </head> <body> <div id="layer1"><h1>山东商业职业技术学院</h1></div> <div id="layer2" > <div id="layer2-1"> <p>学校概况</p> <p>机构设置</p> <p>教育教学</p> <p>创新创业</p> <p>科技服务</p> </div> <div id="layer2-2" class="content"> <h3>学院简介</h3> <hr /> <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校,办学历史可追溯到1936年的济南惠鲁商业学校。 经过80多年的积淀,学校以“立德树人 兴商润民”为使命,以建设“创业型高水平商科院校”为目标愿景,秉承 “尚德蕴能,日精日新”的校训, 坚持“经营、创新、开放、共生”的发展理念,坚持为社会用人需求服务,为学生就业成才服务,为学生终生幸福奠基, 教学质量、办学特色得到社会各界的广泛肯定。</p> <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 研究中心等省市级科研机构。依托鲁商集团,建有国家农产品现代物流工程技术研究中心。</p> <p id="source"><i>来源:党群部</i></p> </div> <div id="layer2-3"></div> </div> <div id="layer3"><p>学校地址:济南市旅游路4516号 邮编:250103</p></div> </body> </html>
3.给页面添加图片和链接
- 这一步主要实现了给网页添加链接和图片
- 相关知识点:超链接标记及属性、插入图像、图文混排
- 要点:
- 超链接和图片的路径要把握清楚
- 图文混排时,如果图片在文字左侧,给图片添加float:left属性,如果在右侧,给图片添加float:right属性
- 源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{letter-spacing:0.2em;} h2{text-align:center;} p{text-align:left;} h3{text-align:center;} #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} #layer1 h1{height:100px;line-height:100px;} #layer2{width:100%; height:auto;margin:0px auto;color:black;} #layer2-1{ width:30%; height:auto; padding-top:2%;margin:0 auto; color:black;text-align:center;float:left; } #layer2-1 p{text-align:center;line-height:250%;} #layer2-2{ width:60%; height:auto; margin:0 auto;color:black; text-align:center;float:left; } .content p{text-indent:2em;line-height:150%;} .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; } #source {text-align:right;} #layer2-3{clear:both;} #layer3{ width:100%; height:30px; background:#074C97;color:white; text-align:center; } #layer3 p{ height:30px;line-height:30px; text-align:center; } </style> </head> <body> <div id="layer1"><h1>山东商业职业技术学院</h1></div> <div id="layer2" > <div id="layer2-1"> <p><a href="">学校概况</a></p> <p><a href="">机构设置</a></p> <p><a href="">教育教学</a></p> <p><a href="">创新创业</a></p> <p><a href="">科技服务</a></p> </div> <div id="layer2-2" class="content"> <h3>学院简介</h3> <hr /> <img class="content_img" src="photo7.jpg"> <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校,办学历史可追溯到1936年的济南惠鲁商业学校。 经过80多年的积淀,学校以“立德树人 兴商润民”为使命,以建设“创业型高水平商科院校”为目标愿景,秉承 “尚德蕴能,日精日新”的校训, 坚持“经营、创新、开放、共生”的发展理念,坚持为社会用人需求服务,为学生就业成才服务,为学生终生幸福奠基, 教学质量、办学特色得到社会各界的广泛肯定。</p> <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 研究中心等省市级科研机构。依托鲁商集团,建有国家农产品现代物流工程技术研究中心。</p> <p id="source"><i>来源:党群部</i></p> </div> <div id="layer2-3"></div> </div> <div id="layer3"><p>学校地址:济南市旅游路4516号 邮编:250103</p></div> </body> </html>
4.添加导航菜单
- 这一步主要将上一步的超链接改造为导航菜单
- 相关知识点:超链接块元素的实现
- 要点:
- 导航菜单核心是把a标签转化为块级元素
- 如果是水平导航栏,这种转化通过给a标签添加float:left来实现
- 如果是垂直导航栏,这种转化通过给a标签添加display:block;来实现;
- 添加导航栏后,可通过添加伪类选择符设置悬停等效果。
- 源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{letter-spacing:0.2em;} h2{text-align:center;} p{text-align:left;} h3{text-align:center;} #layer1{width:100%; height:100px; background:#074C97;color:white;text-align:center;} #layer1 h1{height:100px;line-height:100px;} #layer2{width:100%; height:auto;margin:0px auto;color:black;} #navigation{ width:30%; height:auto; font-weight:bold; font-size:1em; text-align:center; /* 这个属性使盒子中的链接居中 */ margin:0 auto; padding-top:30px; float:left; } #navigation a{ width:90%; display:block; height:5em; line-height:4em; color:#FFFFFF; background-color:#1136c1; text-decoration:none; border-top:1px solid white; border-left:12px solid #151571; /* 左边的粗边 */ } #navigation a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } #layer2-2{ width:60%; height:auto; margin:0 auto;color:black; text-align:center;float:left; } .content p{text-indent:2em;line-height:150%;} .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; } #source {text-align:right;} #layer2-3{clear:both;} #layer3{ width:100%; height:30px; background:#074C97;color:white; text-align:center; } #layer3 p{ height:30px;line-height:30px; text-align:center; } </style> </head> <body> <div id="layer1"><h1>山东商业职业技术学院</h1></div> <div id="layer2" > <div id="navigation"> <a href="">学校概况</a> <a href="">机构设置</a> <a href="">教育教学</a> <a href="">创新创业</a> <a href="">科技服务</a> </div> <div id="layer2-2" class="content"> <h3>学院简介</h3> <hr /> <img class="content_img" src="photo7.jpg"> <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校,办学历史可追溯到1936年的济南惠鲁商业学校。 经过80多年的积淀,学校以“立德树人 兴商润民”为使命,以建设“创业型高水平商科院校”为目标愿景,秉承 “尚德蕴能,日精日新”的校训, 坚持“经营、创新、开放、共生”的发展理念,坚持为社会用人需求服务,为学生就业成才服务,为学生终生幸福奠基, 教学质量、办学特色得到社会各界的广泛肯定。</p> <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 研究中心等省市级科研机构。依托鲁商集团,建有国家农产品现代物流工程技术研究中心。</p> <p id="source"><i>来源:党群部</i></p> </div> <div id="layer2-3"></div> </div> <div id="layer3"><p>学校地址:济南市旅游路4516号 邮编:250103</p></div> </body> </html>