基于html、jsp、css制作的"慕课网"首页界面设计练习

来源：互联网发布：java银行项目经验编辑：程序博客网时间：2024/05/18 10:42

1.网页效果

2.源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网页头部练习</title>

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_taobao2010.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_taobao2010.css" type="text/css">
<script type="text/javascript">
myFocus.set({
id:'boxID',
time:2
});
</script>
<style type="text/css">
.text{
width:1000px;
margin:0 auto;

}
.logo{
height:80px;
background-color:white;
}
.leftlogo{
width:200px;
float:left;
}
.rightlogo{
width:300px;
height:30px;
color:#8E8E8E;
margin-top:15px;
float:right;
}
.rightlogo img{
vertical-align:middle;
}
.nav{
height:40px;

background-color:#8E8E8E;

}
.left-nav{
width:700px;
height:40px;
float:left;
}

.left-nav ul{
list-style:none;
}
.left-nav li{
float:left;

}
.left-nav a{
color:#FFF;
font-family:"微软雅黑";
width:110px;
float:left;
line-height:20px;
}
.left-nav a:hover{
color:red;
}

.right-nav{
width:300px;
height:40px;
float:right;
padding-top:10px;
}
#boxID{
height:300px;
width:1000px
overflow:hidden;
}
#boxID ul{
list-style:none;
}

.main{
height:250px;
border:5px;
margin:20px 0;
}
.left-main{
width:300;
height:250px;
background:white;
border:10px solid #E8E8E8;
float:left;
}
.biaoti{
width:300px;
height：20px;
margin-top:-20px;
background:white;
border-bottom:2px solid #E8E8E8;
}
.biaoti h5{
color:gray;
font-family:"微软雅黑";
font-size:20px;
padding-top:5px;
padding-left:20px;
}
.left-main a{
color:gray;
font-family:"微软雅黑";
line-height:40px;
}
.left-main a:hover{
color:red;

}

.mid-main{
width:300;
height:250px;
margin:0 20px;
float:left;
background:white;
border:10px solid #E8E8E8;

}
.right-main{
width:300;
height:250px;
float:left;
background:white;
border:10px solid #E8E8E8;
}
.right-main a{
color:gray;
font-family:"微软雅黑";
line-height:40px;
}
.right-main a:hover{
color:red;

}

.huodong{
width:300px;
height：20px;
margin-top:-20px;
background:white;
border-bottom:2px solid #E8E8E8;
background:white;
}
.huodong h5{
color:gray;
font-size:20px;
padding-top:5px;
font-family:"微软雅黑";

padding-left:20px;
}
.kecheng{
width:300px;
height：20px;
margin-top:-20px;
border-bottom:2px solid #E8E8E8;

}
.kecheng h5{
color:gray;
font-family:"微软雅黑";
font-size:20px;
padding-top:5px;
padding-left:20px;
}

.more1
{
width:50px;
float:right;
padding-top:0px;
margin-top:-40px;
padding-right:20px;

}
.more1 a{
color:gray;
}
.more1 a:hover{
color:red;
}
</style>
<body>
<div class="text">
<div class="logo">
<div class="leftlogo">
<img class="muke" src="./muke.jpg">
</div>

<div class="rightlogo">
<img src="./dianhua.jpg">
123-456-789
</div>

</div>

<div class="nav">

<div class="left-nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">新闻动态</a></li>
<li><a href="">课程中心</a></li>
<li><a href="">在线课程</a></li>
</ul>
</div>

<div class="right-nav">
<form action="" method="post">
<input type="text">
<input type="submit" value="搜索">
</form>
</div>

</div>

<div id="boxID">
<div class="pic">
<ul>
<li><img src="./img5.jpg"></li>
<li><img src="./img3.jpg"></li>
<li><img src="./img6.jpg"></li>
</ul>
</div>
</div>

<div class="main">
<div class="left-main">
<div class="biaoti">
<h5>新闻中心</h5>
<div class="more1">
<a href="">more&gt&gt</a>
</div>
</div>
<a>[慕课访谈]"有为屌丝"在路上</a>
<br>
<a>[慕课访谈]美女程序员的成长之路</a>
<br>
<a>[程序员]请晒出你的大学</a>
<br>
<a>[问卷调查]慕课用户学习情况</a>
<br>
</div>

<div class="mid-main">
<div class="huodong">
<h5>活动中心</h5>
<div class="more1">
<a href="">more&gt&gt</a>
</div>
</div>
</div>

<div class="right-main">
<div class="kecheng">
<h5>课程中心</h5>
<div class="more1">
<a href="">more&gt&gt</a>
</div>
</div>
<a href="http://www.imooc.com/search/?words=java">[java]JAVA自学三月通</a>
<br>
<a href="http://www.imooc.com/search/?words=css">[html/css]网页基础教学</a>
<br>
<a href="http://www.imooc.com/search/?words=C">[c语言]深入学习c语言</a>
<br>
<a href="http://www.imooc.com/search/?words=%E6%95%B0%E6%8D%AE%E5%BA%93">[数据库]基于mySql网站数据库的开发</a>
<br>
</div>
</div>

<div class="yewei">

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

阅读全文

0 0