花了很长时间才写完作业,直接上代码吧。
以下是首页代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 头部 --> <div class="head"> <div class="header"> <div class="left"><img src="images/logo.png"></div> <div class="list"> <ul> <li><a href="">网站首页</a></li> <li><a href="">医院概况</a></li> <li><a href="">新闻中心</a></li> <li><a href="">就医指南</a></li> <li><a href="">医护动态</a></li> <li><a href="">科研教学</a></li> <li><a href="">在线服务</a></li> </ul> </div> </div> <div class="right"><input type="text" name="name" placeholder="请输入收缩内容"><button>搜索</button></div> </div> <!-- 主体 --> <div class="content"> <!-- 新闻中心 --> <div class="news"> <div class="paget">新闻中心</div> <div class="newsimg"><img src="images/news.jpg"></div> <div class="newsli"> <ul> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> <li>海天2万里,全力以赴挽救“蓝盔勇士”生命</li> </ul> </div> </div> <hr> <!-- 就医指南 --> <div class="img"> <div class="paget">就医指南</div> <div class="imgp"> </div> <div class="imgg"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> </div> </div> <hr> <!-- 科研教学 --> <div class="keji"> <div class="paget">科研教学</div> <div class="newsli"> <ul> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> <li>输血科开展血栓弹力图检测新项目</li> </ul> </div> <div class="newsimg"><img src="images/news.jpg"></div> </div> <hr> <!-- 在线服务 --> <div class="online"> <div class="paget">在线服务</div> <div class="zixun"> <p>在线咨询</p> <input type="text" name="" style="width:400px; height:150px"> </div> <div class="chaxun"> <p>报告查询</p> <img src="images/so.jpg"></div> </div> </div> <!-- 底部 --> <div class="foot"> <div class="footfrom"> <div class="foot1"> <div class="footleft"> <p><img src="images/logo.png"></p> <p>联系电话:*****</p> <p>地址:北京市******</p> </div> <div class="footmain"> <h3>医院荣誉</h3> <ul> <li>国家中医药管理局重点中西医结合示范医院</li> <li>国家中医药管理局重点中西医结合示范医院</li> <li>国家中医药管理局重点中西医结合示范医院</li> <li>国家中医药管理局重点中西医结合示范医院</li> <li>国家中医药管理局重点中西医结合示范医院</li> <li>国家中医药管理局重点中西医结合示范医院</li> <li>国家中医药管理局重点中西医结合示范医院</li> </ul> </div> <div class="footright"> <h3>关于我们</h3> <ul> <li>医院概况</li> <li>医护团队</li> <li>出诊查询</li> <li>物资采购</li> <li>远程医学</li> <li>诚聘英才</li> <li>联系我们</li> </ul> </div> </div> <hr> <div class="foot2"> <p>CopyRight 2013 All Right Reserved 版权所有 ICP:xxxxxxxx 网站地图</p> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
样式重置reset.css
实例
/*样式重置*/ html { overflow-y: auto; overflow-x: hidden; } body, h1,h2,h3, ul,li,p { margin: 0; padding: 0; font-family: 'microsoft yehei', Verdana, Arial; color: #505050; } p, li, a { font-size: 14px; } ul, li { list-style-type: none; } a:link, a:visited, a:active { color: #505050; text-decoration: none; } a:hover { text-decoration: none; color: #f00; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
公共样式:common.css
实例
/*头部样式*/ body {background-color: #5E94A2;} .head { width: 100%; height: 130px; background-color: rgba(231,231,231,0.65); } .head .header { width: 1100px; height: 130px; margin: auto; overflow: hidden; } .head .header .left { width: 180px; height: 126px; float: left; } .head .header .list{ width: 100%; height: 126px; } .head .header .list ul li { float: left; line-height: 126px; padding: 0 20px; } .head .header .list ul li a { width: 80px; text-align: center; font: 16px "微软雅黑"; color: #025931; font-weight: 500; } .head .header .list ul li:hover { background-color: #44BB8C; cursor: pointer; } .head .right { width: 185px; height: 24px; float: right; margin-right: 0px; margin-top: -80px; border-radius: 20px; background: #529f8f; background-color: rgba(82,159,143,0.9); } .head .right input{ float: left; width: 140px; height: 20px; background: none; border: 0 solid #F00; text-indent: 10px; font: 14px "宋体"; color: #FFF; line-height: 20px; } } .head .right button { width: 45px; height: 20px; float: right; border: 0 solid #F00; } .foot { width: 100%; height: 490px; background-color:#529f8f; } .foot .footfrom { width: 1100px; height: 490px; margin: auto; } .foot .footfrom .foot1 { width: 1100px; height: 295px; font: 14px "微软雅黑"; color: #FFF; padding-top: 75px; } .foot .footfrom .foot1 .footleft { width: 450px; height: 250px; float: left; text-align: center; border-right: 1px solid #fff; padding-top: 50px; } .foot .footfrom .foot1 .footmain { width: 400px; height: 300px; float: left; line-height: 24px; text-indent: 20px; border-right: 1px solid #fff; } .foot .footfrom .foot1 .footright { width: 230px; height: 250px; float: left; line-height: 24px; text-indent: 20px; } .foot .footfrom hr { margin-top: 40px; } .foot .footfrom .foot2{ width: 1100px; height: 70px; text-align: center; font: 14px "微软雅黑"; color: #FFF; margin-top: 20px; line-height: 24px; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
首页样式:index.css
实例
.content { width: 1110px; height: 2000px; margin: auto; } /*新闻样式*/ .content .news { width: 900px; height: 500px; margin: auto; overflow: hidden; margin-top: 50px; } .paget { width: 100%; height: 120px; text-align: center; font: 35px "微软雅黑"; line-height: 100px; color: #FFF; } .content .news .newsimg{ width: 450px; height: 252px; border: 3px solid #FFFFF0; float: left; margin-top: 20px; } .content .news .newsli { width: 400px; height: 340px; float: left; margin-top:-230px; margin-left: 500px; line-height: 20px; text-indent: 20px; } .content .news .newsli ul li{ font: 16px "微软雅黑"; color: #FFF; padding: 3px; } /*就医指南样式*/ .content .img { width: 1110px; height: 400px; margin: auto; text-align: center; overflow: hidden; margin-top: 50px; } .content .img .paget { width: 100%; height: 120px; text-align: center; font: 35px "微软雅黑"; line-height: 100px; color: #FFF; } .content .img .imgg { margin-top: 10px; padding: 0 5px; } /*科研教学样式*/ .content .keji { width: 900px; height: 500px; margin: auto; overflow: hidden; margin-top: 50px; } .content .keji .newsli { width: 400px; height: 340px; float: left; line-height: 30px; text-indent: 30px; margin-top: 40px; margin-left: 30px; } .content .keji .newsimg{ width: 450px; height: 252px; border: 3px solid #FFFFF0; float: left; margin-top: 20px; margin-left: -30px; } .content .keji .newsli ul li{ font: 16px "微软雅黑"; color: #FFF; padding: 4px; } /*在线服务样式*/ .content .online { width: 1000px; height: 400px; overflow: hidden; margin: auto; margin-top: 50px; } .content .online .zixun { float: left; padding: 0 40px; } .content .online .zixun p { font: 16px "微软雅黑"; color: #FFF; margin-bottom: 10px; } .content .online .chaxun { float: left; padding: 0 60px; margin-top: 10px; } .content .online .chaxun p { font: 16px "微软雅黑"; color: #FFF; margin-bottom: 10px; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图:
总结:
还有很多知识点不够熟悉,需要再去从头看。这次建站虽然花费了很长时间,但是收获很大。实践还是很重要的。知道自己哪里有不足,更能去掌握更多的知识,还是要多多练习。