数字化教学资源平台网页制作

2024-04-19 01:07:53

这个是老师布置的作业
我写的这个网页还有一点点小瑕疵
仅供参考

效果图：

HTLM：

<body>

<div id="box">

<div id="header">

<div class="link"><a href="#">网站地图</a>|<a href="#">联系我们</a>

</div>

<div id="menu">

<div class="menulist">

<div class="menucontent">

<ul id="nav">

<li><a href="#">        首页</a></li>

<li>|</li>

<li><a href="#">关于我们</a></li>

<li>|</li>

<li><a href="#">精品课程</a></li>

<li>|</li>

<li><a href="#">公告通知</a></li>

<li>|</li>

<li><a href="#">技术支持</a></li>

<li>|</li>

<li><a href="#">在线课程</a></li>

</ul>

</div>

</div>

<div class="menuleft"></div>

<div class="clear"></div>

</div>

<div id="content">

<div class="services_lefttop"></div>

<div class="services_lefttitle"><span class="titlewhite"><a href="#">在线开放课程</a></span></div>

<div class="services_leftcontent">

<ul>

<li><a href="#">网页制作与网站设计 1</a></li>

<li><a href="#">网页制作与网站设计 2</a></li>

<li><a href="#">网页制作与网站设计 3</a></li>

<li><a href="#">网页制作与网站设计 4</a></li>

<li><a href="#">网页制作与网站设计 5</a></li>

</ul>

</div>

<div class="newstitle"><span class="titlewhite">专题学习网站</span></div>

<div class="newscontentbing">

<div class="newscontent">

<div class="newscontenttitle"><a href="#">计算机应用技术</a></div>

<a href="#">计算机应用技术专题学习网站介绍</a>

</div>

<div class="newscontent">

<div class="newscontenttitle"><a href="#">计算机应用技术</a></div>

<a href="#">计算机应用技术专题学习网站介绍</a>

</div>

<div class="newscontent">

<div class="newscontenttitle"><a href="#">计算机应用技术</a></div>

<a href="#">计算机应用技术专题学习网站介绍</a>

</div>

<div class="newscontent">

<div class="newscontenttitle"><a href="#">计算机应用技术</a></div>

<a href="#">计算机应用技术专题学习网站介绍</a>

</div>

<div class="middle">

<img src="data:images/show.jpg" class="middle_show" alt="pic"/>

</div class="clear"></div>

</div>

<div class="middletitle"><span class="titlered_left">教学案例库</span></div>

<div class="middlecontentbig">

<div class="middleleft">

<img src="data:images/pic1.jpg" width="70" height="80" alt="pic"/>

<div class="piccontent">

<div class="pictile"><a href="#">网页制作</a></div>

<div class="pictiler"><a href="#">专业教学案例库相关内容介绍</a></div>

</div>

</div>

<div class="middleright">

<img src="data:images/pic2.jpg" width="70" height="80" alt="pic"/>

<div class="piccontent">

<div class="pictile"><a href="#">网页制作</a></div>

<div class="pictiler"><a href="#">专业教学案例库相关内容介绍</a></div>

</div>

</div>

<div class="clear"></div>

<div class="middleleft">

<img src="data:images/pic3.jpg" width="70" height="80" alt="pic"/>

<div class="piccontent">

<div class="pictile"><a href="#">网页制作</a></div>

<div class="pictiler"><a href="#">专业教学案例库相关内容介绍</a></div>

</div>

</div>

<div class="middleright">

<img src="data:images/pic4.jpg" width="70" height="80" alt="pic"/>

<div class="piccontent">

<div class="pictile"><a href="#">网页制作</a></div>

<div class="pictiler"><a href="#">专业教学案例库相关内容介绍</a></div>

</div>

</div>

<div class="clear"></div>

<div class="middlecenter">

<img src="data:images/pic5.jpg" width="70" height="80" alt="pic"/>

<div class="piccontentcenter">

<div class="pictile"><a href="#">网页制作</a></div>

<div class="pictiler"><a href="#">专业教学案例库相关内容介绍</a></div>

</div>

<div class="clear"></div></div>

</div>

<div class="right">

<div class="aboutstop"></div>

<div class="home_right">

<div class="aboutustitle"><span class="titlered_right">关于我们</span></div>

<div class="aboutuscontent">

欢迎访问我们的数字化教学资源站点！欢迎访问我们的数字化教学资源站点！欢迎访问我们的数字化教学资源站点！

</div>

<div class="aboutusmore">

<div class="more"><a href="#">more<img src="data:images/index_144.gif"alt="pic"></a></div>

<div class="clear"></div>

</div>

<div class="aboutusbottom"></div>

<div class="welcomepic"><img src="data:images/velcome.jpg" width="171"height="155"alt="pic"/></div>

<div class="welcomcontent"><a herf="#">欢迎访问本站</a></div>

</div>

<div class="clear"></div>

</div>

<div class="footer">

<div class="footerleft"></div>

<div class="footercontent">

<div class="footercontentleft">欢迎访问本站</div>

<div class="footercontentright">2012版权所</div>

</div>

</div>

<div class="footerright"></div>

</div>

</body>

CSS:

<style type="text/css">

*{

margin:0px;

padding:0px;

font-family:宋体；

color="#548595B";

font-size:11px;

list-style-type:none;

text-decoration:none;

}

body{

height: 100%;

background-color:rgb(249, 248, 248);

}

img{

border: none;

}

a{

color: #fff;

text-decoration: none;

}

a:link{

text-decoration: none;

}

a:hover{

text-decoration: underline;

}

form{

margin: 0px;

padding: 0px;

}

.clear{

line-height: 1px;

clear: both;

visibility: hidden;

}

#box{

width: 820px;

margin: 0 auto;

background-color :#fff;

}

#header{

width: 790px;

height: 155px;

margin: 0 auto;

background: url('/images/top.jpg') no-repeat right;

}

.link{

float: right;

margin: 5px 5px 0 0;

color: #ffff;

}

#menu{

width: 790px;

margin: 0 auto;

padding: 10px 0 5px 0;

}

.menulist{

float: right;

width: 620px;

height: 28px;

left: 102px;

top:160px;

position:relative;

background: url('/images/index_20.gif') repeat-x;

}

.menuleft{

float: right;

width: 13px;

height: 28px;

left:102px ;

top:160px;

position:relative;

background: url('/images/index_19.gif') no-repeat;

}

.menucontent ul li{

color: #fff;

font-weight: bold;

float: left;

padding: 0px 5px;

}

.menucontent ul li a{

font-weight: bold;

color: #fff;

margin-bottom: 7px;

font-size: 13px;

}

#nav{

margin-left: 5px;

line-height: 16px;

list-style-type: none;

font-size: 14px;

text-align: center;

}

#content{

width: 800px;

margin: 0 auto 10px ;

padding-top: 170px;

}

.titlewhite{

margin-left: 18px;

font-size: 14px;

color: white;

font-weight: bold;

font-family: "黑体";

}

.titlewhite a{

font-size: 14px;

font-weight:bold;

font-family: "宋体";

}

.services_lefttop{

width: 191px;

height: 5px;

background: url('/images/index_37.gif') no-repeat;

background-color: #fff;

font-size: 0;

}

.services_lefttitle{

width: 191px;

background-color: #006699;

height: 20px;

}

.services_leftcontent{

background-color: #e0edf3;

height: 130px;

width: 181px;

padding: 10px 0 14px 10px;

}

.services_leftcontent li{

margin-bottom: 10px;

font-size: 12px;

padding-left: 20px;

background: url('/images/ar.gif') no-repeat left;

}

.services_leftcontent li a{

color: #539CC0;

font-size: 12px;

}

.newstitle{

width: 181px;

margin: 16px 0 0;

background-color: #006699;

padding: 5px;

}

.newscontentbing{

width: 184px;

height: 327;

padding: 5px 0 3px 7px;

background-color: #CDE3EC;

}

.newscontent{

width: 175px;

border-top: #666666 1px dashed;

padding: 3px 0 20px 0;

line-height: 16px;

}

.newscontent a{

color: #58595B;

}

.newscontenttitle a{

text-decoration: underline;

color:#024592;

font-weight: bold;

}

.titlered_left{

bottom:510px ;

left:210px;

position: relative;

margin-left: 15px;

font-size :14px;

font-weight:bold;

color: #cc0000;

font-family: "黑体";

}

.middle{

bottom:520px ;

left:180px;

position: relative;

float: left;

margin-left: 18px;

}

.middle a{

color:#58595b;

}

.middle_show{

width: 390px;

height: 227px;

}

.middletitle{

width: 390px;

margin: 16px 0 8px;

}

.middleleft{

float: left;

bottom:510px ;

left:205px;

position: relative;

padding-bottom: 5px;

border-right: #666666 1px dashed;

border-bottom: #666666 1px dashed;

width: 194px;

height: 80px;

}

.middle img{

float:left;

}

.middleright{

float: left;

bottom:510px ;

left:200px;

position: relative;

padding-bottom: 5px;

border-bottom: #666666 1px dashed;

width: 194px;

height: 80px;

}

.middleright img{

margin-left: 5px;

}

.middlecenter{

width: 580px;

height: 80px;

float: left;

bottom:510px ;

left:10px;

position: relative;

border-bottom: #666666 1px dashed;

}

.piccontent{

line-height: 15px;

margin: 3px 0 4px 10px;

width:80px;

height: 80px;

}

.pictile a{

bottom: 70px;

right: -70px;

position: relative;

color: #58595b;

font-size: 11px;

font-weight: bold;

}

.pictiler a{

bottom: 70px;

right: -70px;

position: relative;

color: #58595b;

font-size: 2px;

}

.piccontentcenter{

left: 200px;

top:80px;

position: relative;

float: left;

width: 191px;

margin-left: 5px;

height: 80px;

}

.right{

float: right;

}

.right a{

color: #58595B;

}

.aboutstop{

width: 170px;

height: 6px;

right:0px;

bottom: 940px;

position: relative;

background: url('/images/index_29.gif') no-repeat;

font-size: 0;

}

.aboutustitle{

width: 171px;

height: 105px;

right:0px;

bottom: 940px;

position: relative;

background-color: #CDE3EC;

}

.aboutuscontent{

right:0px;

bottom: 1025px;

position: relative;

background-color: #cde3ec;

height: 200px;

width: 150px;

padding: 0 10px;

line-height: 18px;

}

.aboutusmore{

right:0px;

bottom: 1025px;

position: relative;

width: 171px;

background-color: #cde3ec;

}

.more{

float: right;

margin: 0 10px 10px 0;

}

.aboutusbottom{

width: 170px;

height: 4px;

font-size: 0px;

right:0px;

bottom: 1025px;

position: relative;

background: url('/images/index_53.gif') no-repeat;

}

.titlered_right{

margin-left: 15px;

font-size :14px;

font-weight:bold;

color: #cc0000;

font-family: "黑体";

}

.welcomepic{

right:0px;

bottom: 1025px;

position: relative;

margin-top: 16px;

}

.welcomcontent{

right:0px;

bottom: 1028px;

position: relative;

background-color: #E0EDF3;

height: 90px;

text-align: center;

padding: 10px;

}

.footer{

margin: 0 auto;

width: 790px;

height: 36px;

padding-bottom: 5px;

}

.footerleft{

float:left;

right:580px;

bottom:390px;

position: relative;

background: url('/images/index_83.gif') no-repeat left;

width: 5px;

height: 26px;

}

.footercontent{

bottom: 1015px;

position: relative;

float:left;

width: 780px;

height: 26px;

background-color: #006699;

}

.footercontentleft{

float:left;

margin: 3px 0 0 10px;

color:#ffff;

font-weight: bold;

}

.footercontentright{

float:right;

margin: 3px 0 0 10px;

color:#ffff;

font-weight: bold;

}

.footerright{

right:1px;

bottom: 1015px;

position: relative;

float: left;

background: url('/images/index_86.gif') no-repeat right;

width: 5px;

height: 26px;

}

</style>

数字化教学资源平台网页制作相关推荐

数字化教学资源平台网页布局案例
数字化教学资源平台网页布局案例例图如下代码片下面展示一些内联代码片. 1.关于HTML页面 <!DOCTYPE html> <html><head>< ...
HTML数字化教学资源平台,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc 11.3 实例1:数字化教学资源平台网站布局 11.3.1效果图的分析与切片本实 ...
Django学生个性化培养的教学资源平台的设计与实现计算机毕设源码19385
摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题.针对学生个性化培养的教学资 ...
计算机cfd教学,规整填料CFD模拟X - 天津大学研究生数字化教学(E-LEARNING)平台.pptx...
规整填料CFD模拟X - 天津大学研究生数字化教学(E-LEARNING)平台规整填料CFD模拟文献报告;规整填料内液体流动的研究;扩散模型推导的基础是液体在填料内的随机流动,而对规整填料,其流道十 ...
北京市计算机工业学校吧 03413,2014年广东省中职学校“创新杯”教师信息化教学设计和说课大赛通知“创新杯”说课大赛可参考使用的数字化教学资源.doc...
2014年广东省中等职业学校"创新杯"教师信息化教学设计和说课大赛可参考使用的数字化教学资源文化课可参考使用的数字化教学资源序号课程名称盘名配书书名书号(ISBN)1语文语文 ...
襄阳教育云平台实名认证_襄阳教育云平台手机版(襄阳教学资源平台)V3.7.6 中文版...
襄阳教育云平台手机版(襄阳教学资源平台)是一款拥有丰富教学资源的客户端应用.旨在确保更好体验平台资源及应用,利用襄阳教育云平台可以更好的辅助教师授课,同步课程高效教学,并且襄阳教育云平台让学生可以随时 ...
springboot毕设项目高性能教学资源平台设计与实现 19r71（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目高性能教学资源平台设计与实现 19r71(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mys ...
周报——网络教学资源平台设计之课程管理系统序列图
从最初的选实训题目到联系老师,了解题目的需求,然后后是我们小组一起分析,这个项目应该具有的功能,最后分工到每个人.至今已有三周的时间,在这个过程中我学到了很多,让我对"纸 ...
网络教学资源平台的功能（初稿）
1.1. 精品课程制作功能要求(系统设计要求) 项目描述在线Web网页编辑器提供在线编辑Web网页,插入图形.图像.动画.Flash.音频/视频文件,并与正文混排课件制作平台提供网络课程制作 ...

最新文章

热门文章