代码教程——第三十三章 一个页尾

其实写到这里,页尾大家应该都会做了的,还是那点知识而已,我都懒得写了,而且我猜性急的朋友应该也都写出来了。算了,虽然很无聊,但是还是写一遍好了。

老板说就这么多内容吧,然后你觉得如释重负啊!可是呢,就算这样也不能完啊,就算是虎头蛇尾总也是要给他一个结尾的啊。

其实结尾跟咱们的导航部分有点类似啦,都是一个通栏,然后中间一个居中的区域用来放内容啊。所以嘛,到了后面简直就是没什么新鲜的东西的啊。

来,我们先来写一个简单单的催眠一下。反正我也已经很困了啊

好啦,依旧是千篇一律的先来点 Html(糊涂妹啦):

<div id=“footer”>

<ul>

<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>

</ul>

</div><!– #footer End –>

内容是我瞎写的,不用在意,这个不要我去解释了吧。其实很简单的说。然后我们去定义一些 CSS (彩色式)

#footer {

background:#F3F3F3;

border-top: 3px solid #EFEFEF;

}

#footer ul {

width:800px;

margin: 0 auto;

padding:15px 0;

overflow: hidden;

}

#footer ul li {

float: left;

margin: 0;

width: 160px;

list-style: none;

text-align: center;

}

#footer ul li a {

text-decoration: none;

color: #333;

}

到了这里我就不去过多的解释 CSS 了,因为我们用了很多遍了好吗?你应该差不多看懂了,否则大家该怀疑我故意占篇幅换稿费啦~(虽然并没有什么稿费……哭……)只是说一下:#footer ul 中的 overflow: hidden; 是用来清除浮动的,好啦,你又学了一个小小的新技能哦。来看看效果吧:

就是这么的简单,这根本就是前边的内容啊,分明作者……还是骗稿费的……(然后真的并没有稿费啊!)

当然这些都不要紧,关键是,要是老板看了这些教程,会觉得果然就是个骗工资的,于是责令整改啊,要做一个高大上的,跟那谁家小谁的网站一个样式的页尾……

不是说好不改了的嘛,哎,谁叫人家是老板捏!捏!,你懂的,说到捏,你有木有觉得很解气啊!但是还是要把工作做掉的,所以……前边的推翻重新来~

<div id=“footer”>

<div class=“footer-content”>

<ul>

<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>

</ul>

<ul>

<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>

</ul>

<div id=“qrcode”>

<img src=“images/qrcode.png” alt=“”>

</div>

</div><!– .footer-content End –>

</div><!– #footer End –>

别,别在意内容,我已经比刚才更加的随意了……嘘,老板现在不在身边。

至少,内容丰富了不是?那就好了,我就是糊弄下老板,你们……可别糊弄自己哦!

然后是 CSS ,其实,还是那点东西……

#footer {

padding: 30px 0;

background:#F3F3F3;

border-top: 3px solid #EFEFEF;

}

#footer .footer-content {

width: 960px;

margin: 0 auto;

}

#footer ul {

float: left;

width:300px;

margin: 0;

padding:0;

}

#footer ul li {

padding:10px 0;

}

#footer ul li a {

text-decoration: none;

color: #333;

}

#qrcode {

float: right;

}

#qrcode img {

width: 250px;

height: 250px;

}

然后你让我给你们解释什么?哪一句没学过?你指出来,我马上就划掉!来看看效果~

然后这章就结束了哈!但是你要自己动手试试哦~我一个页面都讲完了,你们也该写出个什么页面了吧??记得交作业哦,虽然我不看,你们先努力把自己的页面写好写漂亮,后面我会告诉你们怎么把他们发布到网上去,跟你的女盆友们炫耀……虽然她们其实更在乎怎样把自己的照片修的美美哒~

好了,下一章我们讲点新鲜玩意儿~

 

本章代码

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 代码教程——第三十三章 一个页尾

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏