收藏
批改状态：合格
老师批语：
花了很长时间才写完作业，直接上代码吧。
以下是首页代码：
<!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;
}点击 "运行实例" 按钮查看在线实例
效果图：
总结：
还有很多知识点不够熟悉，需要再去从头看。这次建站虽然花费了很长时间，但是收获很大。实践还是很重要的。知道自己哪里有不足，更能去掌握更多的知识，还是要多多练习。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
