小白刚学html时期的第二个作品--底部公告栏

最新推荐文章于 2023-01-12 17:11:04 发布

苏格拉没有鞋底

最新推荐文章于 2023-01-12 17:11:04 发布

阅读量638

点赞数 2

分类专栏： html 文章标签：小白 html 底部公告栏小白时期html作品

本文链接：https://blog.csdn.net/sgld995/article/details/103344741

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这是写一个底部的公告栏，图片还是没显示出来。
也不怎么会排版，多担待

<html>
<head>
<title>
</title>
</head>
<body>
<div class = "footer">
	<div><span class="apple">&nbsp<img src="link_ico.png">&nbsp友情链接</span><br/><br/>
	<a href="http://www.people.com.cn/">&nbsp&nbsp<img src="people.jpg" width="70px" height="20px"></a>
	<a href="http://www.xinhuanet.com/">&nbsp&nbsp<img src="xinhua_net.gif" width="70px" height="20px"></a>
	<a href="http://www.chinanews.com/">&nbsp&nbsp<img src="chinaNews_net.png" width="70px" height="20px"></a>
	<a href="http://www.ifeng.com/">&nbsp&nbsp<img src="fenghuang_net.png" width="70px" height="20px"></a><br/><br/>
	<a href="http://www.chinaqw.com/">&nbsp&nbsp中国侨网</a>
	<a href="http://www.fj.chinanews.com/new2014/fjxw/list.html">&nbsp&nbsp福建新闻网</a>
	<a href="http://paper.jyb.cn/zgjyb/html/2019-09/19/node_2.htm">&nbsp&nbsp中国教育报</a>
	<a href="http://www.hwjyw.com/">&nbsp&nbsp中国华文教育网</a>
	</div>
	<div style="left: 420px; position: absolute; top: 20px;"><img src="contactUs_ico.png"><span class="apple">&nbsp联系我们</span><br/><br/>
	<span class="egg">泉州校区地址：</span>&nbsp福建省泉州市城华北路269号<br/>
	<span class="egg">邮编：</span>362021&nbsp<span class="egg">电话：</span>0595-22693560<br/><br/>
	<span class="egg">厦门校区地址：</span>福建省厦门市集美区集美大道668号<br/>
	<span class="egg">邮编：</span>361021&nbsp<span class="egg">电话：</span>0595-6160171<br/><br/>
	<span class="dog">投稿邮箱：</span><span class="cat">xinwen@hqu.edu.cn</span></div>
	<div style="left: 820px; position: absolute; top: 20px;"><img src="2D_code_ico.gif"><span class="apple">&nbsp二维码</span><br/><br/>
	<img src="2D_code.png" width="100px" height="100px">	<br/><br/>
	<span class="dog">“用手机扫一扫相应的二维码马上关注！”</span></div>
	<div style="left:950px; position: absolute; top: 60px;"><img src="footer_link_list_ico.png"><span class="fish">&nbsp华侨大学新闻中心微博</span><br/><br/>
	&nbsp&nbsp华侨大学新闻中心微信<br/><br/>
	&nbsp&nbsp华侨大学报官方微博<br/><br/>
	&nbsp&nbsp华侨大学报官方微信
	</div>
</div><!--划一块区域-->
</body>
<style type="text/css">
a:link {color: grey} /* 未访问的链接 */
a{text-decoration:none}
.apple{font-size:18px;color:white;}
.egg{font-size:15px;color:white;}
.cat{font-size:16px;color:yellow;}
.dog{color:yellow;}
.fish{color:white}
.footer{height:180px;
width:100%;
background-color:red;
padding-top:10px;
color:#999;
font-size:12px}
<!--用css设置这块区域的参数-->

</style>
</html>

效果图是这样滴
在这里插入图片描述
真的算是一般吧，慢慢进步。

苏格拉没有鞋底

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
小白刚学html时期的第二个作品--底部公告栏

这是写一个底部的公告栏，图片还是没显示出来。也不怎么会排版，多担待<html><head><title></title></head><body><div class = "footer"> <div><span class="apple">&nbsp<img...
复制链接

扫一扫