web前端课程大作业-高校学生事务中心

文章目录

概述

仿制高校的学生事务中心，+一个登录和注册页面
代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
	margin:0;
	padding:0;
	line-height: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background: #ffffff;
}

a:link, a:visited { color: #008fc1; text-decoration: none; }
a:active, a:hover { text-decoration: underline; }

h1 {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 18px;
	font-weight: bold;
	color:#008fc1;
}

h2 {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color:#ffffff;
}

h3 {
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	font-weight: bold;
	color: #37a7ce;
	text-decoration: underline;
}

h4 {
	margin: 0px;
	padding: 10px 0px 0px 0px;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}

p {
	margin: 10px 0px;
	color: #5b5847;
	text-align: justify;
}

img {
	margin: 0px;
	padding: 0px;
}

#container {
	margin: 0px auto;
	width: 930px;
	margin-top: 15px;
}

.send_btn {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	height: 19px;
	width: 27px;
	font-size: 14px;
	font-weight: bold;
	color: #0a8eb8;
	text-decoration: none;
	background: none;
	border: none;
}

.textfield {
	margin: 0px 5px 0px 0px;
	padding: 0px;
	float: left;
	height: 19px;
	width: 175px;
	font: 12px Arial;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
	border: 1px solid #CCCCCC;
}

.more_button a{
	clear: both;
	display: block;
	width: 57px;
	height: 19px;
	margin-left: 100px;
	padding: 0px 0px 0px 10px;
	background: url(images/readmore.gif) no-repeat;
	color: #FFFFFF;
	text-decoration: none;
}

/* ----- Header ----- */

#header1 {
	clear: both;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	width: 930px;
	height: 147px;
}

#logosection {
	margin: 0px 3px 0px 0px;
	float: left;
	width: 235px;
	height: 147px;
	background: url(images/logo_background.gif) no-repeat;
}

.sitelogo {
	margin: 20px 0px 0px 20px;
	padding: 0px;
	height: 80px;
	background:url(images/company_logo.gif) no-repeat;
}

.sitename {
	margin: 10px 0px 0px 20px;
	padding: 0px;
	font: 35px Arial;
	font-weight: bold;
	color: #ffffff;
}

.sitename span {
	font-weight: normal;
}

#header {
	margin: 0px;
	float: right;
	width: 690px;
	height: 147px;
	background: url(images/heading_background.jpg) no-repeat;
}

#header .title{
	padding: 50px 0px 0px 180px;
	font-size: 20px;
	font-weight:bold;
	color: #333333;
	line-height: 25px;
}

#header .bigtext{
	font-size: 30px;
	font-weight:bold;
	color: #ffffff;
}

/* ----- End of Header ----- */

/* ------------- Menu ------------------ */
#menu1 {
	clear: both;
	margin-bottom: 5px;
	padding: 0px;
	width: 930px;
	height: 35px;
	background: #ffffff;
}

#search {
	float: left;
	width: 225px;
	height: 28px;
	padding: 7px 0px 0px 10px;
	background: url(images/menu1_background.gif) repeat-x;
}

#menu {
	float: right;
	width: 690px;
	height: 35px;
	margin: 0px;
	background: url(images/menu1_background.gif) repeat-x;

}

#menu ul {
	margin: 0px;
	text-align: right;
	list-style: none;
}

#menu ul li {
	margin: 0px;
	display: inline;
}

#menu1 ul li a {
	margin: 0px;
	display:inline-block;
	height: 30px;
	padding: 5px 20px 0px 20px;
	font: 14px arial;
	color:#000000;
	text-decoration: none;

}

#menu ul li a:hover, #menu ul li .current {
	color: #FFF;
	background: url(images/menu1hover_background.gif) repeat-x;
}

/* ---------- End of Menu ------------- */

/* ----------------- Content ----------------------- */

#content {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 930px;
}

#left_column {
	float: left;
	margin: 0px 10px 5px 0px;
	padding: 20px 10px;
	width: 215px;
	background: #e0e0e0;
	min-height: 400px;
}

#middle_column {
	float: left;
	margin: 0px 0px 5px 0px;
	padding: 20px 5px;
	width: 465px;
	min-height: 400px;
}

#right_column {
	float: right;
	margin: 0px 0px 5px 10px;
	padding: 20px 0px 0px 0px;
	width: 200px;
	background: #1f9dc6ba;
	min-height: 500px;
}

/* left column */

#leftcolumn_box01 {
	width: 215px;
	padding: 0px;
	background: #008fc1;
	margin: 0px 0px 10px 0px;
}
#imagebutton {
	width: 215px;
	margin: 0px 0px 10px 0px;
}


#leftcolumn_box01 .leftcolumn_box01_top{
	width: 195px;
	height: 15px;
	padding: 10px;
	background: url(images/leftsection_top.gif) no-repeat;
}
#leftcolumn_box01 .leftcolumn_box01_bottom{
	width: 195px;
	padding: 10px;
	color: #FFFFFF;
}

#leftcolumn_box02 {
	width: 190px;
	padding: 10px 10px 10px 15px;
	background: #6ebfdc;
	border-top: 5px solid #008fc1;
	margin: 0px 0px 10px 0px;
}
#leftcolumn_box02 ul {
	margin: 0px;
	padding: 10px 0px 0px 5px;
	list-style: none;
}

#leftcolumn_box02 ul li{
	display: block;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

#leftcolumn_box02 ul li a{
	padding: 0px 0px 0px 15px;
	margin: 0px;
	color: #ffffff;
	text-decoration: none;
	background: url(images/list_icon02.gif) center left no-repeat;
}

#leftcolumn_box02 ul li a:hover{
	text-decoration: none;
}

/* end of left column */

/* middle column */

#section1 {
	float: left;
	width: 205px;
	margin-right: 10px;
	padding: 10px;
	background: #dceff6;
}
#section1 p{
	margin: 0px;
	padding: 0px 0px 10px 0px;
}

#section2 {
	float: right;
	width: 205px;
	padding: 0px;
	background: #bcbcbc;
}

#section2 .section2_top{
	height: 24px;
	padding: 10px 0px 0px 10px;
	background: url(images/section2_title.gif) no-repeat;
}
#section2 .section2_bottom{
	float: left;
	padding: 10px;
}

#section2 ul {
	margin: 0px;
	padding: 10px 0px 0px 0px;
	list-style: none;
}

#section2 ul li{
	display: block;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

#section2 ul li a{
	padding: 0px 0px 0px 15px;
	margin: 0px;
	color: #000000;
	text-decoration: none;
	background: url(images/list_icon01.gif) center left no-repeat;
}

#section2 ul li a:hover{
	color: #ffffff;
	background: url(images/list_icon02.gif) center left no-repeat;
}


/* end of middle */

/* right column */

/* #right_box01 {
	width: 185px;
	height: 38px;
	padding: 10px 5px;
	color:#FFFFFF;
	font-size: 15px;
	background: url(images/rightsection_background.gif) no-repeat;
	margin: 0px 0px 10px 5px;
}

.rightbig_button a{
	clear: both;
	display: block;
	width: 165px;
	height: 48px;
	margin: 0px 0px 10px 5px;
	padding: 10px 20px 0px 10px;
	background: url(images/rightsection_background.gif) no-repeat;
	color:#FFFFFF;
	font-size: 18px;
	text-decoration: none;
}

#right_box02 {
	clear: both;
	width: 190px;
	padding: 0px;
	margin: 0px 0px 10px 5px;
}
#right_box02 .rightbox02_top{
	width: 190px;
	height: 25px;
	padding: 10px 0px 0px 0px;
	background: #008fc1 url(images/rightsection_top.gif) no-repeat;
}
#right_box02 .rightbox02_bottom{
	width: 170px;
	padding: 15px 10px 10px 10px;
	background: #cce8f2;
}
#right_box02 .customer_section{
	clear: both;
	margin: 0px 0px 20px 0px;
	padding: 0px;
}
#right_box02 p{
	padding: 0px;
	margin: 0px;
} */
/* end of right column */



/* ----- Form ----- */
.form_row{
	padding: 3px 0px;
}

form{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	text-align: right;
}

label {
	margin-right: 10px;
}

input{
	width: 110px;
	height: 18px;
}

.button{
	width: 60px;
	height: 25px;
}


/* ----- End of Form ----- */

/* ----- Footer ----- */

#footer {
	clear: both;
	padding: 10px 0px 0px 0px;
	width: 930px;
	height: 50px;
	text-align: center;
	color: #666;
	background: #d5d5d5;
	text-align: center;
    line-height: 50px;
}
#footer_bottom {
	width: 930px;
	height: 10px;
	margin: 0px;
	padding: 0px;
	background: #d5d5d5 url(images/footer_bottom.gif) no-repeat;
}

/* IE6 hack */
* html #footer_bottom {
	width: 930px;
	height: 10px;
	margin-bottom: -10px;
	padding: 0px;
	background: #d5d5d5 url(images/footer_bottom.gif) no-repeat;
}

#footer a{
	color: #666;
}

#footer a:hover{
	color: #ffffff;
}

/* ----- End of Footer ----- */
    </style>
</head>
<body>
    <div id="container">
        <div id="header1">
          <div id="logosection">
            <div class="sitelogo"></div>
            <div class="sitename"> Mysite<span></span> </div>
          </div>
          <div id="header">
            <div class="title"> The<br />
              <span class="bigtext">Mysite</span><br />
              高校学生中心</div>
          </div>
        </div>
        <div id="menu1">
          <div id="search">
            <input class="textfield" type="text" value="搜索..."/>
            <input class="send_btn" type="submit" value="Go" />
          </div>
          <div id="menu">
            <ul>
              <li><a href=# class="current">Home</a></li>
              <li><a href="login.html">登录</a></li>
              <li><a href="login.html">注册</a></li>

            </ul>
          </div>
        </div>
        <div id="content">
          <div id="left_column">
            <div id="leftcolumn_box01">
              <div class="leftcolumn_box01_top">
                <h2>用户登录</h2>
              </div>
              <div class="leftcolumn_box01_bottom">
                <form method="get" action=#>
                  <div class="form_row">
                    <label>Email</label>
                    <input class="inputfield" name="email_address" type="text" id="email_addremss"/>
                  </div>
                  <div class="form_row">
                    <label>Password</label>
                    <input class="inputfield" name="password" type="password" id="password"/>
                  </div>
                  <input class="button" type="submit" name="Submit" value="Login" />
                </form>
              </div>
            </div>
            <div id="leftcolumn_box02">
              <h2>相关学习网站</h2>
              <ul>
                <li><a href="https://www.nowcoder.com/">.牛客网</a></li>
                <li><a href="https://www.w3cplus.com/">.w3cplus_引领web前沿</a></li>
                <li><a href="https://www.imooc.com/">慕课网-程序员的梦工厂</a></li>
                <li><a href="https://codepen.io/">codepen</a></li>
                <li><a href="https://juejin.cn/">掘金 - juejin.im </a></li>
              </ul>
            </div>
            <div id="imagebutton"> <img src="images/back_background.png" alt="" /></div>
          </div>
          <div id="middle_column">
            <h1>欢迎来到南京工程学院！</h1>
            <p> 南京工程学院（ Nanjing Institute of Technology ）位于江苏省南京市，是经教育部批准成立的一所以工学为主，工学、经济学、管理学、文学、理学、法学等学科协调发展的多科性普通本科大学。 学校是全国高等院校 应用型本科院校 专门委员会主任委员单位，全国服务特需硕士研究生培养单位联盟副理事长单位， 新建本科院校 教学工作合格评估方案主要起草单位，也是教育部" 卓越工程师教育培养计划 "和教育部CDIO工程教育改革首批试点高校，是 国家级新工科研究与实践项目 入选高校， 中国电力高校联盟 、 CDIO工程教育联盟 成员单位。 2017年，学校成为江苏省省级硕士立项建设单位。</p>
            <br />
            <div id="section1">
              <h3>服务指南</h3>
			  <p>    </p>
              <p> 1号窗口：门诊部</p>
              <p> 2号窗口：党委学生工作部、学生工作处、人民武装部</p>
			  <p> 3号窗口：团委</p>
			  <p> 4号窗口：教务处、教师教学发展中心</p>
			  <p> 5号窗口：财务处</p>
			  <p> 6-7号窗口：网络信息中心</p>
			  <p> 8号窗口：党委保卫部、保卫处</p>
			  <p> 10号窗口：后勤保障处</p>
			  <p> 11号窗口：党办、校办、组织部</p>

            </div>
            <div id="section2">
              <div class="section2_top">
                <h2>校园新闻</h2>
              </div>
              <div class="section2_bottom">
                <ul>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3985.htm">【聚焦主题教育】红船之...</a></li>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3984.htm">【聚焦主题教育】我校党...</a></li>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3983.htm">同话校友情，共商发展计---...</a></li>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3982.htm">江苏省第二届"红石榴杯"...</a></li>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3981.htm">史国君书记在中央党校全...</a></li>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3980.htm">【聚焦主题教育】党委...</a></li>
                  <li><a href="https://xssw.njit.edu.cn/info/1004/3979.htm">江苏省教育督导委员会...</a></li>
				  <li><a href="https://xssw.njit.edu.cn/">reference</a></li>

                </ul>
                <div class="more_button"><a href=#>More...</a></div>
              </div>
            </div>
          </div>
          <div id="right_column">
			  <!-- <img src="images/right-background.jpg" alt=""> -->
            <!-- <div class="rightbig_button"><a href=#>Customer Care Center</a></div>
            <div class="rightbig_button"><a href=#>Training &amp; Education</a></div>
            <div id="right_box02">
              <div class="rightbox02_top">
                <h2 align="center">Our Customers Say</h2>
              </div>
              <div class="rightbox02_bottom">
                <div class="customer_section"> <img src="images/templatemo.gif" alt="" />
                  <p> Pellentesque mattis, faucibus vitae, feugiat vitae.</p>
                  <div class="more_button"><a href=#>More...</a></div>
                </div>
                <div class="customer_section"> <img src="images/flashmo.gif" alt="" />
                  <p>Nam sit amet justo vel libero tincidunt dignissim.</p>
                  <div class="more_button"><a href=#>More...</a></div>
                </div>
              </div>
            </div>
            <a target="_blank" href=#><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="www.865171.cn"><img style="border:0;width:88px;height:31px"  src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="" vspace="8" border="0" /></a><br /> -->
          </div>
        </div>
        <div id="footer"> </div>
        <div id="footer_bottom"></div>
      </div>
</body>
</html>
页面截图

代码链接

链接: https://pan.baidu.com/s/1c-7nDlgn_I5AektDwkVaHg?pwd=cuii 提取码: cuii
--来自百度网盘超级会员v3的分享