“项目综合实训(二)”的版本间的差异
来自CloudWiki
(→给网页添加导航和列表) |
|||
(未显示2个用户的12个中间版本) | |||
第2行: | 第2行: | ||
==盒子的基本布局== | ==盒子的基本布局== | ||
*[[文件:W3-35.png ]] | *[[文件:W3-35.png ]] | ||
+ | *知识点:[[所谓的“盒子模型”]]、[[盒子模型的实现]]、[[盒子的基本属性]] | ||
+ | *要点: | ||
+ | **盒子布局通过div+css来实现的,div管框架,css管属性 | ||
+ | **盒子的宽度应尽量设置为百分比形式 | ||
+ | |||
==盒子的嵌套布局== | ==盒子的嵌套布局== | ||
− | *[[文件: | + | *[[文件:W5-17.png|650px]] |
+ | *知识点:[[盒子的嵌套布局]]、[[盒子的嵌套布局(二)]]、 | ||
+ | *要点: | ||
+ | **先在网页中用大一点的盒子进行框架的布局,然后再在每个盒子中嵌套更小的盒子 | ||
+ | **当盒子内部的元素需要竖直排列时,不需要增加额外的属性,盒子内的元素按先后顺序上下排列。 | ||
+ | **当盒子内部的元素需要水平排列时,要给需要浮动的元素添加float属性;同时,要在盒子内部的最后,增加一个空白盒子,将其属性设置为clear:both。 | ||
− | == | + | ==给网页添加色彩和图片== |
*[[文件:w5-15.png|650px]] | *[[文件:w5-15.png|650px]] | ||
+ | *知识点:[[CSS常用属性]]、[[CSS的选择符]]、[[CSS常用属性(二)]]、[[CSS常用属性(二)]]、[[盒子的基本属性]]、[[插入图像]]、[[图像样式]] | ||
+ | *要点: | ||
+ | **如果是模仿的网页,网页的色彩尽量与原网页相同,可以用浏览器的取色功能进行取色; | ||
+ | **插入图像时,尽量不要为图像同时指定宽和高,防止图像变形; | ||
+ | **合适的为每个元素设定选择符和对应的CSS属性; | ||
+ | *源代码: | ||
+ | <nowiki><!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"> | ||
+ | *{margin:0;padding:0;} | ||
+ | #layer1{width:100%; height:auto; text-align:center;} | ||
+ | #layer1-1{width:45%; height:120px; background:white;text-align:center;float:left;} | ||
+ | #layer1-1 h2{line-height:350%;} | ||
+ | #layer1-1 img{width:520px;} | ||
+ | #layer1-2{width:55%; height:120px;background:#8DD1F9;;color:#074C97;text-align:center;float:left;} | ||
+ | #layer1-2 h3{line-height:350%;} | ||
+ | #layer1-2 h3{line-height:350%;} | ||
+ | #layer1-3{clear:both;} | ||
+ | #layer2{width:100%; height:auto;color:black;} | ||
+ | #layer2-1{width:100%;height:auto;background-repeat:no-repeat; | ||
+ | } | ||
+ | #layer2-1 img{width:100%;} | ||
+ | #layer2-2{width:100%;height:auto;padding-left:2%;} | ||
+ | .layer2-2-1{width:30%;height:auto;border-style:solid;border-width:medium;margin:10px;border-color:#074C97;float:left;} | ||
+ | |||
+ | .layer2-2-4{clear:both;} | ||
+ | #layer2-2 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;line-height:180%;text-align:left;} | ||
+ | #layer2-2 p{font-size:1em;line-height:100%;text-indent:2em;text-decoration:none;} | ||
+ | #layer2-2 a {font-size:1em;line-height:200%;color:black;text-decoration:none;} | ||
+ | #layer3{width:100%; height:auto; line-height:200%; background:#EBEBEB;color:black;text-align:center;} | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="layer1"> | ||
+ | <div id="layer1-1"><h2>山东商业职业技术学院</h2></div> | ||
+ | <div id="layer1-2"><h3>学校概况 机构设置 教育教学 就业创业 科技服务</h3> | ||
+ | |||
+ | <div id="layer1-3"></div> | ||
+ | </div> | ||
+ | <div id="layer2"> | ||
+ | <div id="layer2-1"><img src="01.png" alt="校园图片"/></div> | ||
+ | <div id="layer2-2"> | ||
+ | <div class="layer2-2-1"> | ||
+ | <h3>学校要闻</h3> | ||
+ | |||
+ | <br/> | ||
+ | <p><a href="#">学校服务学习基地揭牌仪式暨社团...</a></p> | ||
+ | <p><a href="#">我校承办2017年山东省“农产品质量...</a></p> | ||
+ | <p><a href="#">2017山东养老服务业高峰论坛在我...</a></p> | ||
+ | <p><a href="#">校报荣获全国高校校报协会2016年...</a></p> | ||
+ | <p><a href="#">浙江纺织服装职业技术学院、河北...</a></p> | ||
+ | </div> | ||
+ | <div class="layer2-2-1"><h3>通知公告</h3> | ||
+ | |||
+ | <br/> | ||
+ | <p><a href="#">关于组织开展国家职业指导师、心理...</a></p> | ||
+ | <p><a href="#">关于公布2017年公开招聘工作人员进...</a></p> | ||
+ | <p><a href="#">关于公布2017年公开招聘工作人员笔...</a></p> | ||
+ | <p><a href="#">2017年公开招聘工作人员笔试公告...</a></p> | ||
+ | <p><a href="#">关于2017年公开招聘工作人员现场...</a></p> | ||
+ | </div> | ||
+ | <div class="layer2-2-1"><h3>媒体报道</h3> | ||
+ | |||
+ | <br/> | ||
+ | <p><a href="#">新浪山东:山东商职院承办2017年...</a></p> | ||
+ | <p><a href="#">大众网:山东商职院承办山东省职...</a></p> | ||
+ | <p><a href="#">新浪山东:2017山东养老服务业高...</a></p> | ||
+ | <p><a href="#">新浪山东:全国高校“形势与政策”...</a></p> | ||
+ | <p><a href="#">大众网:全国高校“形势与政策”课...</a></p> | ||
+ | |||
+ | </div> | ||
+ | <div class="layer2-2-4"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="layer3"> | ||
+ | <p>学校地址:济南市旅游路4516号 邮编:250103</p> | ||
+ | <p>电话:0531-86335888 招生电话:0531-86335555</p> | ||
+ | <p>鲁ICP备05002370 </p> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </nowiki> | ||
+ | |||
==给网页添加导航和列表== | ==给网页添加导航和列表== | ||
*[[文件:w5-16.png|650px]] | *[[文件:w5-16.png|650px]] | ||
+ | *知识点:[[超链接标记及属性]]、[[超链接的伪类]]、[[超链接块元素的实现]]、[[列表的类型和样式]]、[[列表的实际应用]]、[[盒子的"炫酷"属性 ]] | ||
+ | *要点: | ||
+ | **有两种实现导航的方法,分别见于[[导航条的制作]]、[[列表的实际应用]] | ||
+ | **通过盒子的伪类选择符,实现导航栏的悬停效果 | ||
+ | **可以给盒子添加圆角等个性化的样式,[[盒子的"炫酷"属性 ]]中有介绍。 | ||
+ | *源代码: | ||
+ | <nowiki><!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"> | ||
+ | *{margin:0;padding:0;} | ||
+ | #layer1{width:100%; height:auto; text-align:center;} | ||
+ | #layer1-1{width:45%; height:120px; background:white;text-align:center;float:left;} | ||
+ | #layer1-1 h2{line-height:350%;} | ||
+ | #layer1-1 img{width:520px;} | ||
+ | #navigation { | ||
+ | width:55%; height:120px; | ||
+ | background:#8DD1F9;color:#074C97; | ||
+ | font-weight:bold;text-align:center; /* 这个属性使盒子中的链接居中 */ | ||
+ | text-align:center; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | float:left; | ||
+ | } | ||
+ | #navigation a{ | ||
+ | |||
+ | width:16%; | ||
+ | float:left; | ||
+ | height:120px; | ||
+ | line-height:120px; | ||
+ | color:#074C97; | ||
+ | padding:5px 5px 5px 0.5em; | ||
+ | text-decoration:none; | ||
+ | |||
+ | |||
+ | } | ||
+ | #navigation a:hover{ | ||
+ | background-color:#074C97; /* 改变背景色 */ | ||
+ | color:#ffff00; /* 改变文字颜色 */ | ||
+ | } | ||
+ | #layer1-2 h3{line-height:350%;} | ||
+ | #layer1-3{clear:both;} | ||
+ | #layer2{width:100%; height:auto;color:black;} | ||
+ | #layer2-1{width:100%;height:auto;background-repeat:no-repeat; | ||
+ | } | ||
+ | #layer2-1 img{width:100%;} | ||
+ | #layer2-2{width:100%;height:auto;padding-left:3%;padding-top:5px;background:#FAFBFB;} | ||
+ | .layer2-2-1{ | ||
+ | width:30%;height:300px; | ||
+ | margin:2px;padding-bottom:15px; | ||
+ | border-style:solid;border-width:medium; | ||
+ | border-color:#074C97;border-radius:1.5em;float:left;} | ||
+ | .layer2-2-1 h3{text-indent:2em;;border-top-left-radius:1em; | ||
+ | border-top-right-radius:1em;} | ||
+ | .layer2-2-1 ul{ margin:0; | ||
+ | list-style-position: outside; | ||
+ | } | ||
+ | .layer2-2-1 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%;} | ||
+ | .layer2-2-4{clear:both;} | ||
+ | #layer2-2 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;line-height:180%;text-align:left;} | ||
+ | |||
+ | #layer2-2 a {font-size:1em;color:black;text-decoration:none;} | ||
+ | #layer3{width:100%; height:auto; line-height:200%; background:#EBEBEB;color:black;text-align:center;} | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="layer1"> | ||
+ | <div id="layer1-1"><img src="logo.png" /></div> | ||
+ | <div id="navigation"> | ||
+ | <a href="#">学校概况</a> | ||
+ | <a href="#">机构设置</a> | ||
+ | <a href="#">教育教学</a> | ||
+ | <a href="#">创新创业</a> | ||
+ | <a href="#">科技服务</a> | ||
+ | </div> | ||
+ | <div id="layer1-3"></div> | ||
+ | </div> | ||
+ | <div id="layer2"> | ||
+ | <div id="layer2-1"><img src="01.png" alt="校园图片"/></div> | ||
+ | <div id="layer2-2"> | ||
+ | <div class="layer2-2-1"> | ||
+ | <h3>学校要闻</h3> | ||
+ | <br/> | ||
+ | |||
+ | <ul> | ||
+ | |||
+ | <li><a href="#">马克思主义学院召开陶行知教育...</a></li> | ||
+ | <li><a href="#">我校承办2017年山东省“农产品质量...</a></li> | ||
+ | <li><a href="#">2017山东养老服务业高峰论坛在我...</a></li> | ||
+ | <li><a href="#">校报荣获全国高校校报协会2016年...</a></li> | ||
+ | <li><a href="#">浙江纺织服装职业技术学院、河北...</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="layer2-2-1"><h3>通知公告</h3> | ||
+ | |||
+ | <br/> | ||
+ | <li><a href="#">关于组织开展国家职业指导师、心理...</a></li> | ||
+ | <li><a href="#">关于公布2017年公开招聘工作人员进...</a></li> | ||
+ | <li><a href="#">关于公布2017年公开招聘工作人员笔...</a></li> | ||
+ | <li><a href="#">2017年公开招聘工作人员笔试公告...</a></li> | ||
+ | <li><a href="#">关于2017年公开招聘工作人员现场...</a></li> | ||
+ | </div> | ||
+ | <div class="layer2-2-1"><h3>媒体报道</h3> | ||
+ | |||
+ | <br/> | ||
+ | <li><ahref="#">新浪山东:山东商职院承办2017年...</a></li> | ||
+ | <li><a href="#">大众网:山东商职院承办山东省职...</a></li> | ||
+ | <li><a href="#">新浪山东:2017山东养老服务业高...</a></li> | ||
+ | <li><a href="#">新浪山东:全国高校“形势与政策”...</a></li> | ||
+ | <li><a href="#">大众网:全国高校“形势与政策”课...</a></li> | ||
+ | |||
+ | </div> | ||
+ | <div class="layer2-2-4"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="layer3"> | ||
+ | <p>学校地址:济南市旅游路4516号 邮编:250103</p> | ||
+ | <p>电话:0531-86335888 招生电话:0531-86335555</p> | ||
+ | <p>鲁ICP备05002370 </p> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </nowiki> | ||
+ | 返回 [[网页设计与开发]] |
2017年12月2日 (六) 00:57的最新版本
学校首页
盒子的基本布局
盒子的嵌套布局
- 知识点:盒子的嵌套布局、盒子的嵌套布局(二)、
- 要点:
- 先在网页中用大一点的盒子进行框架的布局,然后再在每个盒子中嵌套更小的盒子
- 当盒子内部的元素需要竖直排列时,不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
- 当盒子内部的元素需要水平排列时,要给需要浮动的元素添加float属性;同时,要在盒子内部的最后,增加一个空白盒子,将其属性设置为clear:both。
给网页添加色彩和图片
- 知识点:CSS常用属性、CSS的选择符、CSS常用属性(二)、CSS常用属性(二)、盒子的基本属性、插入图像、图像样式
- 要点:
- 如果是模仿的网页,网页的色彩尽量与原网页相同,可以用浏览器的取色功能进行取色;
- 插入图像时,尽量不要为图像同时指定宽和高,防止图像变形;
- 合适的为每个元素设定选择符和对应的CSS属性;
- 源代码:
<!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"> *{margin:0;padding:0;} #layer1{width:100%; height:auto; text-align:center;} #layer1-1{width:45%; height:120px; background:white;text-align:center;float:left;} #layer1-1 h2{line-height:350%;} #layer1-1 img{width:520px;} #layer1-2{width:55%; height:120px;background:#8DD1F9;;color:#074C97;text-align:center;float:left;} #layer1-2 h3{line-height:350%;} #layer1-2 h3{line-height:350%;} #layer1-3{clear:both;} #layer2{width:100%; height:auto;color:black;} #layer2-1{width:100%;height:auto;background-repeat:no-repeat; } #layer2-1 img{width:100%;} #layer2-2{width:100%;height:auto;padding-left:2%;} .layer2-2-1{width:30%;height:auto;border-style:solid;border-width:medium;margin:10px;border-color:#074C97;float:left;} .layer2-2-4{clear:both;} #layer2-2 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;line-height:180%;text-align:left;} #layer2-2 p{font-size:1em;line-height:100%;text-indent:2em;text-decoration:none;} #layer2-2 a {font-size:1em;line-height:200%;color:black;text-decoration:none;} #layer3{width:100%; height:auto; line-height:200%; background:#EBEBEB;color:black;text-align:center;} </style> </head> <body> <div id="layer1"> <div id="layer1-1"><h2>山东商业职业技术学院</h2></div> <div id="layer1-2"><h3>学校概况 机构设置 教育教学 就业创业 科技服务</h3> <div id="layer1-3"></div> </div> <div id="layer2"> <div id="layer2-1"><img src="01.png" alt="校园图片"/></div> <div id="layer2-2"> <div class="layer2-2-1"> <h3>学校要闻</h3> <br/> <p><a href="#">学校服务学习基地揭牌仪式暨社团...</a></p> <p><a href="#">我校承办2017年山东省“农产品质量...</a></p> <p><a href="#">2017山东养老服务业高峰论坛在我...</a></p> <p><a href="#">校报荣获全国高校校报协会2016年...</a></p> <p><a href="#">浙江纺织服装职业技术学院、河北...</a></p> </div> <div class="layer2-2-1"><h3>通知公告</h3> <br/> <p><a href="#">关于组织开展国家职业指导师、心理...</a></p> <p><a href="#">关于公布2017年公开招聘工作人员进...</a></p> <p><a href="#">关于公布2017年公开招聘工作人员笔...</a></p> <p><a href="#">2017年公开招聘工作人员笔试公告...</a></p> <p><a href="#">关于2017年公开招聘工作人员现场...</a></p> </div> <div class="layer2-2-1"><h3>媒体报道</h3> <br/> <p><a href="#">新浪山东:山东商职院承办2017年...</a></p> <p><a href="#">大众网:山东商职院承办山东省职...</a></p> <p><a href="#">新浪山东:2017山东养老服务业高...</a></p> <p><a href="#">新浪山东:全国高校“形势与政策”...</a></p> <p><a href="#">大众网:全国高校“形势与政策”课...</a></p> </div> <div class="layer2-2-4"></div> </div> </div> <div id="layer3"> <p>学校地址:济南市旅游路4516号 邮编:250103</p> <p>电话:0531-86335888 招生电话:0531-86335555</p> <p>鲁ICP备05002370 </p> </div> </body> </html>
给网页添加导航和列表
<!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"> *{margin:0;padding:0;} #layer1{width:100%; height:auto; text-align:center;} #layer1-1{width:45%; height:120px; background:white;text-align:center;float:left;} #layer1-1 h2{line-height:350%;} #layer1-1 img{width:520px;} #navigation { width:55%; height:120px; background:#8DD1F9;color:#074C97; font-weight:bold;text-align:center; /* 这个属性使盒子中的链接居中 */ text-align:center; margin:0; padding:0; float:left; } #navigation a{ width:16%; float:left; height:120px; line-height:120px; color:#074C97; padding:5px 5px 5px 0.5em; text-decoration:none; } #navigation a:hover{ background-color:#074C97; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ } #layer1-2 h3{line-height:350%;} #layer1-3{clear:both;} #layer2{width:100%; height:auto;color:black;} #layer2-1{width:100%;height:auto;background-repeat:no-repeat; } #layer2-1 img{width:100%;} #layer2-2{width:100%;height:auto;padding-left:3%;padding-top:5px;background:#FAFBFB;} .layer2-2-1{ width:30%;height:300px; margin:2px;padding-bottom:15px; border-style:solid;border-width:medium; border-color:#074C97;border-radius:1.5em;float:left;} .layer2-2-1 h3{text-indent:2em;;border-top-left-radius:1em; border-top-right-radius:1em;} .layer2-2-1 ul{ margin:0; list-style-position: outside; } .layer2-2-1 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%;} .layer2-2-4{clear:both;} #layer2-2 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;line-height:180%;text-align:left;} #layer2-2 a {font-size:1em;color:black;text-decoration:none;} #layer3{width:100%; height:auto; line-height:200%; background:#EBEBEB;color:black;text-align:center;} </style> </head> <body> <div id="layer1"> <div id="layer1-1"><img src="logo.png" /></div> <div id="navigation"> <a href="#">学校概况</a> <a href="#">机构设置</a> <a href="#">教育教学</a> <a href="#">创新创业</a> <a href="#">科技服务</a> </div> <div id="layer1-3"></div> </div> <div id="layer2"> <div id="layer2-1"><img src="01.png" alt="校园图片"/></div> <div id="layer2-2"> <div class="layer2-2-1"> <h3>学校要闻</h3> <br/> <ul> <li><a href="#">马克思主义学院召开陶行知教育...</a></li> <li><a href="#">我校承办2017年山东省“农产品质量...</a></li> <li><a href="#">2017山东养老服务业高峰论坛在我...</a></li> <li><a href="#">校报荣获全国高校校报协会2016年...</a></li> <li><a href="#">浙江纺织服装职业技术学院、河北...</a></li> </ul> </div> <div class="layer2-2-1"><h3>通知公告</h3> <br/> <li><a href="#">关于组织开展国家职业指导师、心理...</a></li> <li><a href="#">关于公布2017年公开招聘工作人员进...</a></li> <li><a href="#">关于公布2017年公开招聘工作人员笔...</a></li> <li><a href="#">2017年公开招聘工作人员笔试公告...</a></li> <li><a href="#">关于2017年公开招聘工作人员现场...</a></li> </div> <div class="layer2-2-1"><h3>媒体报道</h3> <br/> <li><ahref="#">新浪山东:山东商职院承办2017年...</a></li> <li><a href="#">大众网:山东商职院承办山东省职...</a></li> <li><a href="#">新浪山东:2017山东养老服务业高...</a></li> <li><a href="#">新浪山东:全国高校“形势与政策”...</a></li> <li><a href="#">大众网:全国高校“形势与政策”课...</a></li> </div> <div class="layer2-2-4"></div> </div> </div> <div id="layer3"> <p>学校地址:济南市旅游路4516号 邮编:250103</p> <p>电话:0531-86335888 招生电话:0531-86335555</p> <p>鲁ICP备05002370 </p> </div> </body> </html>
返回 网页设计与开发