作业之网站首页界面

来源：互联网发布：ktv歌曲制作软件编辑：程序博客网时间：2024/04/29 08:27

在我学习了两天的HTML之后，老师布置了作业。让我们自己去设计一个网站界面，我当时也是为了复习自己所

学的知识，便有了以下的代码。虽然界面很丑，但是我还是觉得很有意义，所以还是发上来，否则的话，以后想找都

找不到了..

首先上下预览图：

以下为源码：

<html><head><title>信息管理系统</title><style>body {padding-top:0px;padding-right:0px;padding-left:0px;padding-bottom:0px;background: url(imgs/0202.jpg);}    .dabiaoti{background:url(imgs/0201.jpg) no-repeat;width: 1290px;height:50px;padding-left:60px;padding-top:10px;}.biaoti01{float:left;font-size: 2.4em;}.biaoti02{font-size: 1.4em;float:left;margin-top:15px;}.biaoti03{margin-top:35px;background:url(imgs/0203.jpg) no-repeat;float:right;}.biaoti04{margin-top:35px;background:url(imgs/0203.jpg) no-repeat;float:right;margin-right:3px;}.biaoti05{background:url(imgs/0203.jpg) no-repeat;float:right;margin-top:35px;margin-right:3px;}a{text-decoration: none;}.caidan01{float:left;border: 1px solid black;width:1306px;height:30px;padding-top:13px;padding-left:42px;border-top:none;}.caidan02{border: 1px  solid black;float:left;margin-bottom:0px;width:101px;height:40px;padding-left:42px;padding-top:20px;border-top:none;border-bottom:none;}.caidan03{border: 1px  solid black;float:left;clear:left;margin-bottom:0px;width:101px;height:40px;padding-left:42px;padding-top:20px;border-top:none;border-bottom:none;}.caidan04{border: 1px  solid black;float:left;clear:left;margin-bottom:0px;width:101px;height:40px;padding-left:42px;padding-top:20px;border-top:none;border-bottom:none;}.liebiao01{border: 1px  solid black;float: left;clear:left;margin-bottom:0px;margin-top:0px;padding-right:39px;border-top:none;border-bottom:none;}.liebiao02{border: 1px  solid black;float: left;clear:left;margin-bottom:0px;margin-top:0px;padding-right:39px;border-top:none;border-bottom:none;}.liebiao03{border: 1px  solid black;float: left;clear:left;margin-bottom:0px;margin-top:0px;padding-right:39px;border-top:none;border-bottom:none;}#xiaobiaoti{border: 1px solid black;width: 1347px;height:20px;margin-bottom:0px;padding-top:20px;padding-bottom:10px;padding-left:0px;}#xiaobiaoti li{display:inline;margin-left:50px;}.time{position:relative;left:450px;}.banben{border:1px solid black;float:left;clear:left;width:115px;height:70px;border-top:none;margin-top:0px;padding-left:28px;padding-top:30px;padding-bottom:0px;}</style></head><body><div class="dabiaoti"><div class="biaoti01" >武汉市</div><div class="biaoti02">信息管理系统</div><div class="biaoti03"><a href="#">退出系统</a></div><div class="biaoti04"><a href="#">用户信息</a></div><div class="biaoti05"><a href="#">修改密码</a></div></div><ul id="xiaobiaoti"><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><li><a href="#">帮助</a></li><li class="time">服务器时间</li></ul><div class="caidan02"><a href="#">规划设计</a></div><ul class="liebiao01"><li>规划素材</li> <li>项目管理</li><li>规划环境</li><li>规划辅助</li><li>规划调整</li></ul><div class="caidan03"><a href="#">规划决策</a></div><ul class="liebiao02"><li>规划表现</li><li>项目展示</li><li>规划分析</li></ul><div class="caidan04"><a href="#">规划公示</a></div><ul class="liebiao03"><li>网络发布</li><li>项目展示</li></ul><div class="banben">版本：V1.1<br/>作者:纪淼淇</div></body></html>

因为当时还没有学习超链接，JavaScript等以及后面的一些知识，写这个作业只是为了复习盒子模型以及CSS的

一些知识。所以异常的简陋。通过写这个作业让我更加清晰的认识到自己哪儿存在问题，继续坚持，努力，加油！~~

0 0