今天学了HTML5如何制作生动的列表和超链接，我理解了制作表格可以利用JavaScript就可以不用一点的一点的制作表格，利用循环省下许多重复的步骤，还有超链接利用标签<a href="....."></a>就可以链接到网页还有本地的图片，突然感觉我们平时习以为常的网页原来有这么高级，程序猿好辛苦QAQ。
不过我发现有趣的一点是改变不同数据就有不同的变化，挺好玩的 (?>ω<*?)
li {
float:left;
width:55px;
padding:0 0 4px 0;
text-align:center;
background:url(file:///J|/c语言/html/上机/3月/综合实例/images/line1.gif) no-repeat left center;
}
就像我将padding:0 0 4px 0;改成padding:0 0 25px 0; 我就能发现两行字的间距变大的。实践给了我一个很直观的效果，我觉得比起老师一直强调我，更能让我记住。
在这里我想到了前几天邹欣老师写的一篇文章中说到习而学的软件工程：“我认为给学生具体的, 能实践的, 能马上看到因果关系的教材和练习, 是激发学生兴趣, 好奇心, 求知欲的好方法。” 联系我自己，我觉得这句话很对，每当自己艰难敲出代码又加以修改运行成功的时候，内心有喜悦爆棚的感觉。真棒！我一定要努力敲代码，制作一个自己的个人网页。哈哈哈。
然后总结一下上学期，觉得自己没有遇到问题问老师，含糊的吞下不懂得东西，真的很糟糕。我希望自己能够在新的一学期里努力学习，当然还有敲代码。做不成学霸，至少可以不当学渣。^(*￣(oo)￣)^
代码如下：
<style type="text/css">
h1 { font-size:16px; }
/*导入背景图*/
#menu {
width:965px;
height:126px;
background:url(file:///J|/c语言/html/上机/3月/综合实例/images/bg6.jpg) no-repeat right bottom;
}
ul, li {
padding:0;
margin:0;
list-style:none;
}
ul {
float:right;
margin-right:2px;
margin-top:55px;
width:790px;
font-size:12px;
}
/*浮动显示列表项，该方法比较灵活，但也容易出现错位和排列不整齐的问题。解决的方法就是：固定外框和项目的宽度*/
li {
float:left;
width:55px;
padding:0 0 25px 0;
text-align:center;
background:url(file:///J|/c语言/html/上机/3月/综合实例/images/line1.gif) no-repeat left center;
}
li:nth-child(2n-1) { /*匹配1、3、5、7、11...项的列表项*/
font-weight:bold;
background:none;/*清除加粗列表项的背景*/
}
li:nth-child(55) {font-size:11px;}/*为特定位置列表项定义样式缩小显示*/
li:nth-child(22n+1){ margin-left:-1px;}/*微调每行第一个列表项，以便对齐*/
li:nth-child(22){ color:red;}/*为特定位置的列表项定义样式突出显示*/
</style>
<script language="javascript">
<!--
var now=new Date(); //定义变量获取当前时间
var hour=now.getHours(); //定义变量获取当前时间的小
if ((hour>5)&&(hour<=7))
alert("早上好！OvO"); //如果当前时间在5～7时之间，则输出“早上好！”
else if ((hour>7)&&(hour<=11))
alert("上午好！祝您好心情"); //如果时间在7～11时之间，则输出“上午好！祝您好心情”
else if ((hour>11)&&(hour<=13))
alert("中午好！"); //如果时间在11～13时之间，则输出“中午好！”
else if ((hour>13)&&(hour<=17))
alert("下午好！"); //如果时间在13～17时之间，则输出“下午好！”
else if ((hour>17)&&(hour<=21))
alert("晚上好！=-="); //如果时间在17～21时之间，则输出“晚上好！”
else if ((hour>21)&&(hour<=23))
alert("夜深了，注意身体哦"); //如果时间在21～23时之间，则输出“夜深了，注意身体哦”
else alert("凌晨了！该休息了！"); //如果时间不符合上述条件，则输出“凌晨了！该休息了！”
-->
</script>
</head>
<body>
<h1>制作生动的列表</h1>
<div id="menu">
<ul>
<li><a href="http://www.baidu.com"target="_blank">百度 </a></li>
<li> <a href="file:///J|/c语言/html/上机/3月/综合实例/table.html">表格</a></li>
<li><a href="tablejs.html">动态表格</a></li>
<li> 财经</li>
<li>股票 </li>
<li> 基金</li>
<li> 科技 </li>
<li> 手机</li>
<li> 数码 </li>
<li> 体育 </li>
<li> 中超</li>
<li> NBA </li>
<li> 娱乐 </li>
<li> 明星 </li>
<li> <a href="https://www.so.com/s?ie=utf-8&src=se7_toolbar&q=%E7%99%BE%E5%BA%A6%E9%9F%B3%E4%B9%90%E7%9B%92">音乐</a>> </li>
<li> 微博 </li>
<li> 视频 </li>
<li> 播客 </li>
<li> 大片 </li>
<li> 房产 </li>
<li> 家居 </li>
<li> 读书 </li>
<li> 女性 </li>
<li> 宠物 </li>
<li> 空间</li>
<li> 邮箱 </li>
<li> 出国</li>
<li> 论坛</li>
</ul>
</div>
</body>
</html>
时间： 2024-09-10 13:12:15