這次主要寫寫自己碰到的難題：
首先是在div中劃兩條對角線：
附上參考的博文：https://www.cnblogs.com/chun6/p/6132258.html
使用旋轉實現加入斜線。
我的代碼：
background: linear-gradient(22deg, transparent 50%,black , black , transparent 50.1%),
linear-gradient(-22deg, transparent 50%, black, black, transparent 50.1%);
調整度數使得位置合適，調整透明度使得線條粗細符合條件，再就是顏色了。
下一個問題。
在頁面上加上點擊或鼠標移動到該位置出現下拉列表，之前一直想的是要創建一個下拉列表對象，一直寫不出，後來網上找了很久，功夫不負有心人，找到了。
轉換思想，做一個<ul><li>的列表形式，li先隱藏，當鼠標移動要出現下拉列表的ul上，將其li顯示。
附上CSS代碼：
ul
{
padding:5px 10px 0px 10px;
margin-right:10px;
height:70px;
display: block;
float:right;
color:black;
font-weight:bolder;
}
ul li
{
list-style-type:none;
display:none;
text-align:center;
}
ul:hover
{
color:gray;
}
#select:hover li
{
display: block;
}
li:hover
{
cursor:pointer;
color: black;
}
其中"#select:hover li"的意思是鼠標移動到id爲#select時，觸發這個標籤裏的li標籤。
感謝這段代碼：
HTML：http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
CSS:http://line25.com/wp-content/uploads/2012/css-menu/demo/style.css
接下來的一個問題就是檢測用戶是否登入，然後根據這個狀態，顯示歡迎語句或提示語句。
附上參考博文：http://blog.csdn.net/oaa608868/article/details/53539954
通過在註冊頁面將用戶名保存在sessionStorage中，登入檢測該變量是否爲undefined，而將一個標籤的innerHTML設置爲不同的值，從而可以達到提示和歡迎的功能。
附上我的代碼：
登入頁面： if (code == '0'){
sessionStorage.setItem("name",username);
window.location.href="index.html";
}
首頁頁面：
html文件
<div class="inform" id="login"><a href="login.html">您好，您未登錄，請先進行登入!</a></div>
<div id="div1">
js文件
function show(){
var username=sessionStorage.getItem("name");
if(username!=undefined)
{
document.getElementById('login').innerHTML="尊敬的"+username+",歡迎進入社團格子";
console.log(username);
}
}
window.οnlοad=function(){
show();
}
最後，將鼠標移動到圖片，圖片放大：
代碼：.photo img
{
margin-left:50px;
transition: all 0.6s
}
.photo img:hover
{
cursor: pointer;
transform: scale(1.05);
}
transform: scale(1.05):將圖片放大爲原來的1.05倍。
transition: all 0.6s:所有屬性變化在0.6s內完成。
附上參考博文：http://blog.csdn.net/u014175572/article/details/51535768
總的來說這次做的還是挺順利的，加油。