基础综合项目(一)
来自CloudWiki
盒子的流式布局
<!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;} #layer2{width:70%; height:auto;margin:0px auto;color:black;} #layer3{width:100%; height:30px; background:#074C97;color:white;text-align:center;} .content p{text-indent:2em;line-height:150%;} #source {text-align:right;} </style> </head> <body> <div id="layer1"><h1>山东商业职业技术学院</h1></div> <div id="layer2" class="content"> <h3>学院简介</h3> <hr /> <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校,办学历史可追溯到1936年的济南惠鲁商业学校。 经过80多年的积淀,学校以“立德树人 兴商润民”为使命,以建设“创业型高水平商科院校”为目标愿景,秉承 “尚德蕴能,日精日新”的校训, 坚持“经营、创新、开放、共生”的发展理念,坚持为社会用人需求服务,为学生就业成才服务,为学生终生幸福奠基, 教学质量、办学特色得到社会各界的广泛肯定。</p> <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 研究中心等省市级科研机构。依托鲁商集团,建有国家农产品现代物流工程技术研究中心。</p> <p id="source"><i>来源:党群部</i></p> </div> <div id="layer3">学校地址:济南市旅游路4516号 邮编:250103</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"> *{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>
给页面添加图片和链接
<!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>
添加导航菜单
<!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>