您的位置：首页 > Web前端 > HTML

链接、表格、层及页面总体的设计及使用

2016-06-04 17:52 302 查看
1. 随意输入一篇文章，并利用下列标记（标记可以自由组合）给这篇文章建立多样化的文字编排效果。

<Hn>、<FONT>、<B>、<I>、<U>、<BIG>、<SMALL>、<STRIKE>、<BR>、<P>、<DIV>、<HR>

<html>
<head>
<h1 align="center">等待……</h1>
</head>
<body bgcolor="pink" >
<pre align="center">
<p>
浅夏的清晨，风吹来了馨香的气息，我约花儿草儿，于清风中来一场心灵的盛会。每一朵花儿都是天使，于清寂中努力的盛开，每一棵小草，也都尽力的生长着，装点着自己的诗行，这是一个盛放的季节，柔柔的清风和温暖的阳光，将心灵舒展到了极致。
</p>
<p>
时光，重叠在一棵树上，将浅夏葱茏的韵律，写意在季节的眉眼，这样的时节人是清爽的，迈着轻盈的脚步，在风上漫步，看时光如素，如一阕用温婉书写的岁月最美诗词。
</p>
<p>
如果说四季是一幅水墨画，浅夏给我的感觉应是淡淡的，淡淡的风，淡淡的云，淡淡的心情。
</p>
<p>
这样的季节适合读一些清淡的文字。养一颗如水的心。淡淡的，是风中传来的栀子花的清香，是阳光洒在窗帘上水晶般温暖的写意，是悠悠白云飘过的悠闲。
</p>
<p>
日子，缄默无声，花儿静静地绽放成一抹景致，用芬芳阐释自己，书写清丽的花语，我依然喜欢依着一抹芬芳而行，沐暖暖阳光，看花朵与绿叶，相互依偎着，如并肩站在阳光下的情侣，在浅夏的风中，妥贴着欢喜心。
</p>
</pre>
</body>
</html>


2. 利用表格建立如下网页（歌曲自选，至少选择3首歌曲）。



<html>
<head>
<script>
var num1=0,num2=0,num3=0;
function a1()
{
num1++;
document.getElementById("count1").innerHTML=num1;
}
function a2()
{
num2++;
document.getElementById("count2").innerHTML=num2;
}
function a3()
{
num3++;
document.getElementById("count3").innerHTML=num3;
}

</script>
</head>
<body bgcolor="pink" >
<br><br><br><br><br><br>
<table align="center" border="1" bgcolor="#00CCFF" width="800" height="300">
<tr><td colspan="4" align="center">Jay Chou————>前世情人</td></tr>
<tr><td align="center">编号</td><td align="center">歌曲名称</td><td align="center">在线播放</td><td align="center">点击次数</td></tr>
<tr><td align="center">1</td><td align="center">不能说的秘密</td><td align="center" onclick="a1()" ><a href="http://y.qq.com/#type=song&mid=002MXZNu1GToOk&tpl=yqq_song_detail&play=1"  target="_blank">播放</a></td><td align="center"><p id="count1">0</p></td></tr>
<tr><td align="center">2</td><td align="center">阳光宅男</td><td align="center" onclick="a2()"><a href="http://y.qq.com/#type=song&mid=001bnNGN127Kbq&tpl=yqq_song_detail&play=1" target="_blank">播放</a></td><td align="center"><p id="count2">0</p></td></tr>
<tr><td align="center">3</td><td align="center">晴天</td><td align="center" onclick="a3()"><a href="http://y.qq.com/#type=song&mid=0039MnYb0qxYhV&tpl=yqq_song_detail&play=1" target="_blank">播放</a></td><td align="center"><p id="count3">0</p></td></tr>
</table>
</body>
</html>


效果图（点击播放一次点击次数加一）：



3.制作如下所示页面。



<html>
<head>
<style type="text/css">
a:link {color: #FFFFFF}
a:visited {color: #FFFFFF}
a:hover {color: #FFFFFF}
a:active {color: #FFFFFF}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body >
<div  style="background-color:#494949;width:1350px;height:50px" ><font size="1"><br></font>
   <font face="微软雅黑" color="white">东北林业大学</font>
                        
                        
         
<font face="微软雅黑" color="white">读书  讲课  课程</font>
</div>
<div  style="background-image:url(a1.jpg);width:1350px;height:250px" >
<br><br><br><br>
               <font size="7" color="white" face="微软雅黑">Web程序设计</font><br>
               <font size="2" color="white" face="微软雅黑">东北林业大学 高心丹等</font><br>
               <span style="width:50px;background-color:#00BB00;font-size:15px;font-color:white";font-face="微软雅黑"><a href="http://mooc1.chaoxing.com/mycourse/studentcourse?courseId=87940579&clazzid=700799&enc=867761b72db0b42c41350a550d1e4b1a"><b>进入课程</b></a></span>
<br><br><br>
<table bgcolor="#292929" align="center" width="1000" height="55" border="1">
<tr><td align="center" bgcolor="#FF6500"><font face="微软雅黑" color="white" >   首页   </font></td><td align="center"><font face="微软雅黑" color="white">课程章节</font></td><td align="center"><font face="微软雅黑" color="white">教师团队</font></td><td align="center"><font face="微软雅黑" color="white">教学资源</font></td><td align="center"><font face="微软雅黑" color="white">教学方法</font></td><td align="center"><font face="微软雅黑" color="white">教学条件</font></td><td align="center"><font face="微软雅黑" color="white">参考资料</font></td></tr>
</table>
</div>
<table width="1100" height="380" ><tr>
<td>            <img src="a2.jpg" width="350" height="250"></img></td>
<td>
   
</td>
<td><br>
<font face="微软雅黑" size="4"><b>课程介绍</b></font><br>
<font  size="3">
《Web程序设计》这门课主要讲授Java Web及其相关技术的开发。通过对《Web程序设
计》这门课程的学习，使学生初步掌握基于B/S模式的程序开发的主要内容和方式，
掌握Java Web编程的基本思想及思路，能够独立编写处理基于基本应用的的Web程
序，并结合数据库的操作管理功能，实现信息管理与查询功能。要求学生通过本课程
学习，掌握Web程序设计的流程；Web服务器的配置，客户端脚本编写及基本页面格式
设计的等基本知识；掌握网Web程序设计及可视化编程功能，掌握可视化编程技巧及
技术，力图使学生能够独立开发出简单的企业电子商务网站。主要内容包括：Java 
Web平台安装、HTML语言、CSS层叠样式，Javascript脚本程序设计、JSP内建对象使
用、JavaBean及Servlet在Java Web中的应用、Java Web与数据库的连接及应用等内容。
</font>
</td>
</tr>
</body>
</html>


效果图(由于这csdn吃我空格，效果会变T—T)：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 网页
相关文章推荐
新的分享
章节导航