CUCS-Website/index3.html at master · ChineseUnionInComputerScienceUCI/CUCS-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html>
  <head>
    <link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style3.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link href="Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="resource/jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <title> CUCS</title>


  </head>
  <body>

      <!--Logo，顶部菜单-->
     <header >
      <div class="row">
        <div class="col-xs-4">
        <img id="logo" src="img/logo.png" height="50px" width="255px">
        </div>
        <nav class="col-xs-8">
           <div class="menu">
               <a href = "index.html"> 关于我们</a>
               <a >  成员</a>
               <a > 动态</a>
               <a> 资料库  </a>
               <a> 联系方式  </a>
           </div>
        </nav>
      </div>
      </header>

    <!--主要区域-->
      <section class="jumbotron">
        <div class="item_box box10">
          <div class="item_box_wp">
            <div class="voice_2">
              <ul>
                <li class="li1" id="li1">
                  <div class="fold" style="display:none;" >
                      <p>1234</p>
                  </div>
                  <div class="unfold" style="display:block;">

                      <img src="img/whiteBoardPainting.png" height="100%" width="100%" />

                  </div>
                </li>
                <li class="li2" id="li2">
                  <div class="fold" >
                    <span class="img"></span>
                    <span class="txt">点击展开</span>
                  </div>
                  <div class="unfold" >

                    <dt><img src="img/i-angus.png" /></dt>

                  </div>
                </li>
               <li class="li3" id="li3">
                 <div class="fold" >
                  <span class="img"></span>
                  <span class="txt">点击展开</span>
                 </div>
                 <div class="unfold" >

                   <dt><img src="img/i-angus.png" /></dt>

                 </div>
              </li>
              <li class="li4" id="li4">
                <div class="fold" >
                  <span class="img"></span>
                  <span class="txt">点击展开</span>
                </div>
                <div class="unfold" >

                  <dt><img src="img/i-angus.png" /></dt>

                </div>
              </li>
              </ul>
            </div>
          </div>
        </div>


      </section>

      <section class="container seperatorContainer">

        <img src="img/seperator2.png" width="100%">


      </section>


    <!--底部区域 -->
      <section class="container bottomSection ">


              <ul class = "Department">
                  <li ><a>宣传部 | Dept of publicity<br><img src="img/Lecture_Hall.png" height="75%" width="75%"></a></li>
                  <li><a href="dOfAcademy.html">学术部 | Dept of Academy<br><img src="img/Lecture_Hall2.png" height="75%" width="75%"></a></li>
                  <li><a >活动 | Dept of Outreaching<br><img src="img/ICS_Hall.png" height="75%" width="75%"></a></li>
                  <li><a >外联部 | Dept of Outreaching<br><img src="img/BS_Hall.png" height="75%" width="75%"></a></li>
              </ul>

      </section>

  <!--script-->
  	<script type="text/javascript">
		$(function(){
			$(".voice_2 ul li").each(function(){
				var fold = $(this).find(".fold");
				var unfold = $(this).find(".unfold");
				if(fold.is(":hidden")){
					$(this).css("width","50%");
				}else{
					$(this).css("width","15%");
				}
			})
			$(".voice_2 ul li").click(function(){
				var li_index = $(this).index();
                var current_color = $(this).css('background-color');
                $('.box10').css('background-color',current_color);
				$(this).animate({width:'50%'},'15%');
				$(this).find(".unfold").show();
				$(this).find(".fold").hide();
				$(this).siblings().animate({width:'15%'},'25%');
				$(this).siblings().find(".unfold").hide();
				$(this).siblings().find(".fold").show();
			})
		})
	</script>


  </body>
    <!--页脚-->

  <footer class="container">


          <p>Copyright2017 © Chinese Union of Computer Science at UC Irvine. All rights reserved</p>
  </footer>


</html>