博客列表 >仿站——2018年3月28日

仿站——2018年3月28日

Y的博客
Y的博客原创
2018年03月29日 17:14:19659浏览

花了很长时间才写完作业,直接上代码吧。

以下是首页代码:

实例

<!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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Document_副本.png

总结:

        还有很多知识点不够熟悉,需要再去从头看。这次建站虽然花费了很长时间,但是收获很大。实践还是很重要的。知道自己哪里有不足,更能去掌握更多的知识,还是要多多练习。


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议