关于南财信工院网页设计的课上讲授内容

南财信工院网站：http://cie.njue.edu.cn，界面外观如：

课上讲授网页上半端的设计方法，请同学自行练习并完成后续的网页内容，最好按照该网页原有的设计思路和方法进行，边学边练，当然也可以自己独立完成

课上代码（仅供参考）为：
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>无标题文档</title>
<!–<link href=”http://cie.njue.edu.cn/css/main.css” rel=”stylesheet” type=”text/css”>–>
</head>
<body>

<style>

.page {
width: 1000px;
margin: 0 auto;
}

.logo {
width: 290px;
height: 100px;
float: left;
}

.logo1 {
width: 503px;
height: 100px;
float: left;
}

.r_header {
width: 100px;
height: 100px;
float: right;
}

.top_btn {
background: url(btn_1.png) no-repeat;
margin-top: 10px;
}

.top_btn a {
display: block;
width: 72px;
text-align: center;
line-height: 22px;
color: #525252;
outline: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

.menu {
width: 1000px;
display: inline-block;
}

.menu ul li {
float: left;
width: 90px;
height: 37px;
display: block;
line-height: 37px;
text-align: center;
background:url(top-menu-bg.png) left top no-repeat;
font: 14px/37px 微软雅黑;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.focus {
width: 666px;
height: 240px;
float: left;
background-color: darkgray;
}

.tztg {
width: 326px;
height: 240px;
float: right;
background-color: #0352a3;
}

.t_cent_list .txt a.tlink:link, .t_cent_list .txt a.tlink:visited {
color: #fff;
text-decoration: none;
}

.t_cent_list {
height: 62px;
border-bottom:1px dashed #b3d9ff;
}

.t_cent_list .txt {
float: left;
margin: 0 0 0 60px;
width: 240px;
height: 40px;
font: 14px/22px 微软雅黑;
color: #fff;
}

.t_cent_list em {
float: left;
margin: 10px;
width: 42px;
height: 40px;
background: url(icon_1.png) no-repeat;
}
.t_title {
width: 326px;
height: 52px;
border-bottom:1px solid #b3d9ff;
}

.t_title h2 {
padding-left: 8px;
color: #fff;
font: 18px/52px 微软雅黑;
float: left;
}
.more {
float: right;
padding-right: 8px;
color: #fff;
font: 12px/52px Arial;
}

</style>

<div class=”page”>
<div class=”header”>
<div class=”logo”><a href=”http://cie.njue.edu.cn/”><img src=”logo.png” width=”290″ alt=”logo”/></a></div>
<div class=”logo1″><img src=”logo_1.png” width=”503″ alt=”logo”/></div>
<div class=”r_header”>
<div class=”top_btn”><a href=”#”>设为首页</a>
</div>
<div class=”top_btn”><a href=”#”>加入收藏</a>
</div>
<div class=”top_btn”><a href=”http://cie.njue.edu.cn/” target=”right”>旧版回顾</a></div>
</div>
</div>
<div class=”menu”>
<ul>
<li class=”none_line curr”><a href=”http://cie.njue.edu.cn/”>首页</a></li>
<li><a href=”cieBrief.jsp”>学院概况</a></li>
<li><a href=”#” onclick=”submitAction(‘学院动态’)”>学院动态</a></li>
<!– <li><a href=”#” onclick=”submitAction(‘师资队伍’)”>师资队伍</a></li> –>
<li><a href=”cieTeam.jsp”>师资队伍</a></li>
<li><a href=”#” onclick=”submitAction(‘科学研究’)”>科学研究</a></li>
<li><a href=”#” onclick=”submitAction(‘学科建设’)”>学科建设</a></li>
<li><a href=”#” onclick=”submitAction(‘教学工作’)”>教学工作</a></li>
<li><a href=”#” onclick=”submitAction(‘学生工作’)”>学生工作</a></li>
<li><a href=”#” onclick=”submitAction(‘党群工作’)”>党群工作</a></li>
<li><a href=”#” onclick=”submitAction(‘招生就业’)”>招生就业</a></li>
<li><a href=”virtualLab.jsp”>虚拟实验室</a></li>
</ul>

</div>

</div>
</div>
</div>

</div>
<div class=”t_cent”>
<div class=”t_cent_list clr”><em/><span class=”txt”><a href=”viewDetail?id=715″
class=”tlink”>学术讲座：信息管理座谈会</a></span>
</div>
<div class=”t_cent_list clr”><em/><span class=”txt”><a href=”viewDetail?id=715″
class=”tlink”>学术讲座：信息管理座谈会</a></span>
</div>
<div class=”t_cent_list clr”><em/><span class=”txt”><a href=”viewDetail?id=715″
class=”tlink”>学术讲座：信息管理座谈会</a></span>
</div>
</div>

</div>

</div>
</div>
</body>
</html>

完整代码及其图片下载：3，演示效果为：

李树青

关于南财信工院网页设计的课上讲授内容

发表评论取消回复

发表评论 取消回复

发表评论取消回复