本週沒有進行前端的學習，主要是寫了一系列簡單的靜態網頁，下面將附上代碼
html代碼
<html>
<head>
<title>西郵羽協</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body id="body_background">
<div id="top">
<p id="sign_up">
<span><a href="#" id="underline" class="span1">註冊</a></span>
<span class="span_padding">|</span>
<span class="span_padding"><a href="#" id="underline" class="span1">登錄</a></span>
</p>
</div>
<div class="background1" id="body">
<div id="div_button">
<a id="underline" href="#">
<button id="button1">
<span id="div_left_span">首頁</span>
</button>
<a id="underline" href="more.html">
<button id="button2">
<span id="div_left_span">瞭解更多</span>
</button>
</a>
</div>
<div id="sign_center">
<img src="sign.jpg" class="sign_jpg">
</div>
<p id="p_1"> Faster,Higher,Stronger</p>
<div id="div_join">
<a href="#">
<button id="button_join">
<span id="span_join">Join us</span>
</button>
</a>
</div>
<div id="div_xuanchuan">
<a href="#">
<button class="button_xuanchuan">
<img src="4.jpg" id="img_bumen">
<span id="span_bumen">宣傳部</span>
</button>
</a>
<p id="p_jieshao">在宣傳部你可以學到很多綜合技能，想提高個人綜合能力就來宣傳部吧
</p>
</div>
<div id="div_zuzhi">
<a href="#">
<button class="button_xuanchuan">
<img src="3.jpg" id="img_bumen">
<span id="span_bumen">組織部</span>
</button>
</a>
<p id="p_jieshao">如果你覺得你有較強的組織能力，策劃能力，那就加入組織部吧
</p>
</div>
<div id="div_xuanchuan">
<a href="#">
<button class="button_xuanchuan">
<img src="2.jpg" id="img_bumen">
<span id="span_bumen">仲裁部</span>
</button>
</a>
<p id="p_jieshao">如果你想學習羽毛球的比賽規則，或者對於成爲一個公平公正的裁判有興趣，歡迎加入仲裁部
</p>
</div>
<div id="div_xuanchuan">
<a href="#">
<button class="button_xuanchuan">
<img src="1.jpg" id="img_bumen">
<span id="span_bumen">技術部</span>
</button>
</a>
<p id="p_jieshao">這個技術小分隊很有可能使你們有機會進入體育館和大神以及指導老師面對面進行交流
</p>
</div>
</div>
<p id="p_share">分享至：
<a href="#"><img src="qq.jpg" id="img_share"></a>
<a href="#"><img src="wechat.jpg" id="img_share"></a>
<a href="#"><img src="xin.jpg" id="img_share"></a>
</p>
</body>
</html>
css文件
padding:0;}
#body_background{
background-color: gray;
}
#div_all{
width: 80%;
margin:0 auto;
}
#top{
width: 100%;
height: 30px;
background-color: gray;
padding-top: 0px;
}
#sign_up{
padding-left: 90%;
padding-top: 5px;
}
#underline{
text-decoration: none;
}
.span1{
color: white;
}
.span_padding{
padding-left: 5px;
}
.background1{
background:url(background4.jpg) 0px 0px;
height: 100%;
width: 100%;
background-repeat: repeat-x;
overflow: hidden;
}
#body{
width:100%;
height:100%;
}
.sign_jpg{
width: 150px;
height: 150px;
border-radius: 50%;
border: solid 1px transparent;
margin-top: 50px;
}
#sign_center{
width: 150px;
height: 150px;
margin: 0 auto;
}
#div_button{
margin-left:515px;
width: 100%;
height:30px;
}
#button1{
border: solid thin white;
width: 15%;
height: 30px;
background-color:rgba(153, 204, 153, 0.5);
display: inline;
}
#div_left_span{
color: #fff;
text-align: center;
}
#button2{
border: solid thin white;
width: 15%;
height: 30px;
margin-left: -5px;
background-color:rgba(142, 142, 142, 0.3);
display: inline;
}
#p_1{
font-size: 40px;
color: white;
font-weight:bold;
text-align: center;
padding-top: 50px;
}
#button_join{
border: dotted 2px white;
height: 70px;
width: 200px;
background-color: transparent;
}
#span_join{
color: white;
font-size: 30px;
font-weight: bold;
}
#div_join{
padding-top: 50px;
margin:0 auto;
height: 70px;
width: 200px;
}
.button_xuanchuan{
height: 150px;
width: 150px
border:solid thin white;
background-color:rgba(255, 255, 255, 0.2);
}
#div_xuanchuan{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 200px;
height: 100%;
width: 150px;
float: left;
}
#img_bumen{
width: 100px;
height: 100px;
margin:10px 25px 0px 25px;
border-radius: 50%;
text-align:center;
}
#span_bumen{
color: white;
font-weight: bold;
letter-spacing: 2px;
}
#p_jieshao{
margin-top: 20px;
color: white;
letter-spacing: 1px;
}
#div_zuzhi{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 200px;
height: 100%;
width: 150px;
float: left;
}
#p_share{
color:white;
text-align: right;
font-size: 15px;
}
#img_share{
width: 23px;
font-weight: 23px;
border-radius: 50%;
padding-left: 5px;
margin-top: 3px;
}
由於我是羽協的部長 所以簡單的做了一個簡單的關於羽協的網站的首頁。目前面臨的問題是，每個瀏覽器的不兼容性，我的這個網頁只能在chorme瀏覽器上較好的展示。
