基於html、jsp、css製作的"慕課網"首頁介面設計練習
阿新 • • 發佈：2019-02-11
<!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>></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>></a>
</div>
</div>
</div>
<div class="right-main">
<div class="kecheng">
<h5>課程中心</h5>
<div class="more1">
<a href="">more>></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>
<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>></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>></a>
</div>
</div>
</div>
<div class="right-main">
<div class="kecheng">
<h5>課程中心</h5>
<div class="more1">
<a href="">more>></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>