一个简单的厦大网站前端实现_厦门大学科技处html设计-CSDN博客

本文链接：https://blog.csdn.net/song_4/article/details/42106429

之前按照厦大的设计图用html和css简单的做了个样子出来，把它放在这里吧。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<title>XMU</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" type="text/css"> 
<link rel="stylesheet" href="css/XMU.css"type="text/css"> 
</head>
    <body>
        <div id="container">
            <div id="tp">
            <img src="./images/top.png"/> 
            </div>
            <div id="top">
            <img src="./images/biaoti.jpg"/> 
            <div id="nav">
              <ul>
            <li><a href="#1">首页</a></li>
            <li><a href="#2">导航一</a></li>
            <li><a href="#3">导航二</a></li>
            <li><a href="#4">导航三</a></li>
            <li><a href="#5">导航四</a></li>
            <li><a href="#6">导航五</a></li>
                </ul>
              </div>
              </div>
            <div id="pic">
                <img src="./images/xiaomen.jpg"/> 
                <div id="three">
                  <div id="fudong1">
                   <h2>离开始还有</h2>   <h1>5</h1><h2>天</h2>
                  </div>
                  <div id="fudong2">
                    <h1>厦门大学 国际节</h1>
                  </div>
                  <div id="fudong3">
                    <h1>——英语达人秀</h1>
                  </div>
                </div>
            </div>
            <div id="main">
                <div id="lside">
                    <div id="ltop">
                            <img src="./images/pingwei.jpg">
                        <div class="one">
                            <img src="./images/character.jpeg">
                            <h3>姓 名</h3>
                            <h5>  简介：简要介绍简要介绍简要</h5>
                                <h5>     介绍简要介绍简要介绍简</h5>
                        </div>
                        <div class="one">
                              <img src="./images/character.jpeg">
                               <h3>姓 名</h3>
                               <h5>  简介：简要介绍简要介绍简要</h5>
                                <h5>     介绍简要介绍简要介绍简</h5>
                        </div>
                        <div class="one">
                              <img src="./images/character.jpeg">
                               <h3>姓 名</h3>
                               <h5>  简介：简要介绍简要介绍简要</h5>
                                <h5>     介绍简要介绍简要介绍简</h5>
                        </div>
                    </div>
                    <div id="lfoot">
                        <img src="./images/lianxi.jpg">
                    </div>
                </div>
                <div id="rside">
                        <img src="./images/saishi.jpg">
                        <div id="saishi">
                        <img src="./images/news.jpg">
                        <div id="fudong4">
                        <h2>头条：头条新闻ABCDEFHI</h2>
                        </div>
                            <div id="toutiao">
                            <h1>头条：头条新闻ABCDEFHI</h1>
                            <h4>头条新闻的部分描述头条新闻的部分描述头条新闻的部分描述</h4>
                            <h4>头条新闻的部分描述头条新闻的部分描述头条新闻的部分描述</h4>
                            </div> 
                            <div id="toutiao2">
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            </div>
                            <div id="toutiao3">
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            <li>新闻新闻新闻新闻新闻</li>
                            </div>
                            <div id="pic1">
                        <img src="./images/zise.jpg">
                        <h3><a href="#">更多>></a></h3>
                            </div>
                            </div>
                         <div id="xuanshou">
                           <img src="./images/xuanshou.jpg">
                         <div id="row1">
                         <div class="fangge"></div>
                         <div class="fangge"></div>
                         <div class="fangge"></div>
                         </div>
                         <div id="row2">
                         <div class="fangge"></div>
                         <div class="fangge"></div>
                         <div class="fangge"></div>
                         </div>
                         <div id="pic2">
                         <img src="./images/tiaowen.jpg">
                         </div>
                          <h3><a href="#">更多>></a></h3>
                         </div>
                    <div id="jieshao">
                        <img src="./images/jieshao.jpg">
                        <div id="fangkuang">
                        <div id="fangkuang1">
                            <img src="./images/bisai.jpg">
                        </div>
                        <div id="fangkuang2">
                            <img src="./images/jiangxiang.jpg">
                        </div>
                        </div>
                         </div>
                        <div id="wangyou">
                            <img src="./images/wangyou.jpg">
                            <div id="pinglun">
                              <form>
                                 <input type="text" name="pinglun" />
                                 <input type="button" value="登录">
                              </form>
                            </div>
                            </div>
                            <div id="saicheng">
                               <img src="./images/saicheng.jpg">
                               <div id="fangkuai">LOGO</div>
                               <div id="changkuai">详细介绍</div>
                            </div>
                  <div id="rfoot"></div>
            </div>
            <div id="footer">
              <img src="./images/top.png"/> 
              <h3>这里放置友情链接等信息</h3></div>
                <div class="clear"></div>
        </div>
    </body>
</html>

CSS：

.clear{
	clear:both;
}

body{
	background: white;

}

#container{
	width: 1080px;
	background-color: #f3f3f3;
	margin: 0px auto;
}

#tp img{
	background-color: #f3f3f3;
	width: 1080px;
	height: 50px;
	float: left;
}

#top{
	width: 1080px;
	background-color: #f3f3f3;
	height: 150px;
	float:left;
}

#top img{
	padding-left: 30px;
	float: left;
}

#nav{
	padding-top: 30px;
	padding-left: 100px;
	float: left;
}

ul li{
	font-size: 18px;
	padding-left: 30px;
	font-family: "Simhei",sans-serif;
	list-style: none;
	float: left;
}

ul a{
	text-decoration: none;
}

ul a:hover{
	padding-bottom:5px;
	border-bottom: 3px solid #000f5c;
	cursor:pointer;
}

ul a:visited{
	color: white;
}

#pic img{
	background-color: #f3f3f3;
	width:1000px;
	padding-left: 40px;
	padding-right: 40px;
	float: left;
	position: relative;
}
#fudong1{
	width: 300px;
	height: 60px;
	background-color: rgba(96,96,96,0.7);
	position:absolute;
	right: 905px;
	top:250px;
}

#fudong1 h2{
	display: inline;
	font-family: "simhei",sans-serif;
	color: white;
	padding-left: 30px;

}

#fudong1 h1{
	display: inline;
	font-family: "simhei",sans-serif;
	color: orange;
	font-size: 60px;
	line-height: 40px;
}

#fudong2{
	width: 600px;
	height: 120px;
	background-color: rgba(96,96,96,0.7);
	position:absolute;
	right: 159px;
	top:300px;

}

#fudong2 h1{
	display: inline;
	font-family: "simhei",sans-serif;
	color: white;
	font-size: 60px;
	padding-left: 50px;
	line-height: 120px;
}

#fudong3{
	width: 500px;
	height: 60px;
	background-color: rgba(0,77,255,0.4);
	position:absolute;
	right: 150px;
	top:400px;

}

#fudong3 h1{
	display: inline;
	font-family: "simhei",sans-serif;
	color: white;
	font-size: 30px;
	padding-left: 250px;
	line-height: 60px;
}


#main{
	background-color: #f3f3f3;
	padding-top: 60px;
	float: left;
}

#lside{
	background-color: #f3f3f3;
	width: 275px;
	height: 1800px;
	float: left;
	
}

#ltop{
	width: 275px;
	padding-top: 10px;
	float: left;

}

.one img{
	width: 180px;
	height: 150px;
	padding-left: 50px;
}

#ltop h3{
   padding-left: 110px;
}

#ltop h5{
	color: gray;
	border-bottom: 1px solid #23b3ce;
}


#ltop img{
	padding-bottom: 20px;
}

#lfoot{
	width: 400px;
	height: 400px;
	background-image: url(../images/tiaoxing.jpg);
	background-repeat: repeat-y;
	float: left;
}

#lfoot img{
	float: left;
}


#rside{
	border: 1px solid gray;
	background: white;
	padding-top: 10px;
	width:800px;
	float: left;
}

#rtop{
	width: 800px;
	border:1px solid gray;
	border-radius: 5px;
	background: white;
	float: left;
}

#saishi img{
	width: 300px;
	height: 300px;
	padding-top: 10px;
	padding-left: 10px;
	float: left;
	position: relative;
}

#fudong4{
	width: 300px;
	height: 30px;
	background-color: rgba(0,0,0,0.6);
	position:absolute;
	left:420px;
	top:1000px;

}

#fudong4 h2{
	display: inline;
	font-family: "simhei",sans-serif;
	color: white;
	font-size: 20px;
	padding-left: 45px;
	line-height: 30px;
}

#toutiao{
	float: left;
	padding-left: 20px;
}

#toutiao h1{
	color: #b10f0a;
	padding-left: 20px;
}


#toutiao2{
	width: 200px;
	float: left;
	padding-left: 10px;
	color: gray;
}

#toutiao3{
	width: 200px;
	float: left;
	padding-left: 10px;
	color: gray;
}


#toutiao img{
	padding-top:10px;
	width: 300px;
	height: 2px;
}

#pic1 img{
	width: 400px;
	height: 5px;
	padding-top: 30px;
	float: left;
}

#toutiao h3{
	float: right;
}

#pic1 a{
	color: gray;
	padding-top: 20px;
	text-decoration: none;
	float: right;
}

#xuanshou{
	float: left;
}

#xuanshou img{
	height: 35px;
	padding-top: 40px;
	padding-bottom: 20px;
	padding-right: 70px;
	float: left;
}

#row1{
	background: white;
	float: left;
}

#row2{
	background: white;
	float: left;
}

#xuanshou a{
	color: gray;
	padding-top: 20px;
	text-decoration: none;
	float: right;
}

#jieshao{
	padding-top: 20px;
	background: white;
	width: 800px;
	float:left;
}

#jieshao img{
	float: left;
}
.fangge{
	width:250px;
	height:200px;
	border-bottom:5px solid white; 
	border-left:10px solid white; 
	border-right:5px solid white; 
	border-radius:2px;
	float:left;
	background:#a8a8a8;

}

#pic2 img{
	height: 10px;
	width: 500px;
	padding-left: 10px;
}

#row2 a{
	float: right;
	text-decoration: none;
	color: gray;
}


#fangkuang{ 
	background: white;
	padding-top: 20px;
	padding-left: 11px;
	float: left;
}
#fangkuang1{
	background-color: #eeeeee;
	width: 380px;
	height: 225px;
	border-radius: 2px;
	border: 5px solid white;
	float: left;
}

#fangkuang2{
	background-color: #eeeeee;
	width: 380px;
	height: 225px;
	border-radius: 2px;
	border: 5px solid white;
	float: right;
}

#fangkuang2 img{
	float: right;
}

#wangyou{
	width: 800px;
	padding-top: 20px;
	background-color: white;
	float: left;
}

#pinglun{
	margin-top: 20px;
	margin-left: 25px;
	margin-bottom: 25px;
	width: 750px;
	height: 200px;
	border:1px solid gray;
	background-color: #eeeeee;
	float: left;
	overflow:scroll
}

input[type="text"]{
	width: 500px;
	height: 20px;
	margin:150px 20px;
}

input[type="botton"]{
	width: 50px;
	height: 20px;
	margin:150px 20px;
}

#saicheng{
	width:800px;
	background: white;
	float: left;
}

#fangkuai{
	margin-left: 35px;
	margin-top:30px;
	margin-bottom:30px;
	width: 200px;
	height: 200px;
	background-color: #eeeeee;
	border-right:10px solid white;
	float: left;
}

#changkuai{
	margin-left: 15px;
	margin-top:30px;
	margin-bottom:30px;
	width: 500px;
	height: 200px;
	background-color: #eeeeee;
	float: left;
}

#footer{
	float: left;
	padding-top: 50px;
}

#footer h3{
	padding-left: 500px;
}

#footer img{
	background-color: #f3f3f3;
	width: 1080px;
	height: 50px;
	float: left;
}

写的代码格式错乱无章..果然还是个网站小白..