起因
这不是计算机网络就要结课了吗,就有了一个上机实验,前几个我看的云里雾里,但到了这第七个web网页,却让我眼前一亮。
要求是跟下图要求一致,必须div+css,JavaScript,jQuery。
然后是效果图:
说实话有点辣眼睛,我好歹也写过几个网页,这种风格,有点难以接受啊。
我决定自己优化一下,做出一份好的上机报告!
创建项目
传统老三项,建立项目文件夹,创建index.html文件,css文件夹,img文件夹,js文件夹。
如图:
准备工作
这老师要求jQuery,因为太久没有写前端项目,再加上电脑重装过,jQuery在我的电脑上是没有的,只好去重新下载一个。网址是https://jquery.com/download/。如果没办法下载,可以完全复制下来然后粘贴到一个新文件里面的。
然后上面还有一个导航栏,是不是使用bootstrap更为方便简单呢?那就再下载一个bootstrap。网址:http://getbootstrap.com/。我下载的版本是3.4.1的
然后呢,就是一些图片了,随手找了一两张。logo没找到,就用了长江大学的校徽,嘿嘿嘿。
HTML部分
我使用的编译器是VS code,感觉使用的很舒服,把项目拖到vscode打开,开始编辑我们的HTML部分。
从效果图中不难看出,他有一个页眉部分,然后是主体,主体是在中间的,上面是一个logo图,然后是一个导航栏,然后加载一个图片。最下面的部分是三种不同的颜色分割占据的一个地方。
我们可以使用两个div组成页眉和主体部分,既然要优化一下,那就加一个页尾。然后用一个整体的div包裹起来。 大致就是这样:
<div class="hyc">
<div class="top"></div>
<div class="main"></div>
<div class="bottom"></div>
</div>
先来看看这简陋的页眉部分。左边,是一个蓝色长条,右边是一个橙色短条加一个设为收藏,设为首页的两个按键。 有点简约,我就在想,你是不是好歹得加一个登录/注册? 然后鼠标放上去就有下划线啥的。初步设想可以使用 `span>a` 实现。 鉴于这次只是一个页面,没啥后台,就弄个空链接就好了。
<div class="top">
<div class="right">
<span><a href="#">设为收藏</a></span>
<span><a href="#">设为首页</a></span>
<span><a href="#">注册</a>
/
<a href="#">登录</a>
</span>
</div>
</div>
写完之后,看一下还挺像那么一回事,但是是不是少了点什么?
没错,少了咱的CSS,层叠样式表。
CSS部分
咱也没啥取名天赋,就一个css.css文件放在css文件夹里面好了,下面开始写样式表。
页眉
这个比较简单,设置一下背景颜色,定位一下位置,然后去掉a标签的下划线,再加一个点击样式就欧克了
.top{
background-color: #3399ff;
}
.right{
width: 20%;
background-color: #ff9900;
position: relative;
left: 80%;
}
.right span{
margin-left: 11%;
}
.right span a{
text-decoration: none;
}
.right span a:hover{
text-decoration: red;
}
js部分
这个点击收藏是不是点了,就收藏一下,但是这咱也办不到啊,但是这个字变一下还是可以做到的。
然后呢,这个设为首页,那按照正常的是检测是不是首页,是的话不显示,不是显示。但是没这个实力,就不弄这么花里胡哨的东西了,就弄一个点击了他就消失了。
登录/注册的话,写个登录/注册页面?但是咱原本就这一个页面啊,是不是有点太麻烦了?算了,弄一个点击显示暂未开放此功能算了。生活不易,小猪叹气。
$('.one').click(function(){
$('.one').find('a').text("已收藏")
})
$('.two').click(function(){
$('.two').hide()
})
$('.three').click(function() {
alert('此功能为开放')
})
来看看完成效果图: