第一天学CSS，仿百度的搜索结果页面

最新推荐文章于 2025-05-13 00:41:16 发布

原创最新推荐文章于 2025-05-13 00:41:16 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#百度 #css #search #阿里巴巴 #网游

2016之前文章专栏收录该内容

6 篇文章

订阅专栏

这是作者学习CSS的第一天，通过模仿百度搜索结果页面，掌握了基本的段落、链接和样式的设置。内容包括了对不同元素如标题、内容和链接的CSS样式定义，以及如何使用span标签进行文本高亮和下划线装饰。

今天是系统学习CSS的第一天，晚上做了个简单段落、链接等样式，依照百度搜索的结果页面。

Code:

<html>
<head>
<style>
<!--
p{
margin:0px;
font-family:Arial;
}
p.title{
padding-bottom:0px;
font-size:16px;
}
p.content{
padding-top:3px;
font-size:13px;
line-height:18px;
}
p.link{
font-size:13px;
padding-bottom:25px;
color:#008000;
}
span.search{
color:#c60a00;
}
span.quick{
color:#666666;
text-decoration:underline;
}
p.title span.search{
text-decoration::underline;
}
-->
</style>
</head>
<body>
<a href="http://www.baidu.com/"><img src="http://www.baidu.com/img/logo-yy.gif" border="0" width="137" height="46" alt="到百度首页"></a>
<a href="#">中国春节网</a>
欢迎光临中国春节网,您现在的位置是中国春节网首页! "年"兽的传说熬年的传说万年创建历法说中国古代历法发展 春节:传统和现代元宵灯节源于何时? 猜灯谜的来由十二生肖的源流、排列与信仰祭灶扫尘贴春联年画倒贴福字除夕夜 ...
www.chunjie.net.cn/ 46K 2006-12-18 - 百度快照
<a href="#">喜迎2004春节_TOM新闻</a>
·春节流行三类“拜年短信”:猴、祝福、个性 ·春节期间电视节目早知道(1月19日-1月25日) ·猴年贺岁:短信彩信...·TOM游戏与大家同过快乐春节 一起来玩免费网游! ·“对对联贺新春” 玩乐吧强档推荐许个愿吧 ·春节听觉搜爆-...
news.tom.com/hot/2004year/ 82K 2004-1-25 - 百度快照
<a href="#">春节 我把money献给你_阿里巴巴</a>
编者按:新年、春节、情人节,一年中时尚男女血拼的最佳时节。商家借节造势,推出的揽客“花招”也是层出不穷…… 新春最受欢迎的开...·春节期间:这些生意好赚钱(一)(图)01/20 ·鼎大祥“红腰带吉祥裤”销售红火01/18 春节 这些生意好...
info.china.alibaba.com/news/subject/v3000 ... 33K 2006-12-10 - 百度快照
</body>
</html>

感觉[CSS太好了，出来的效果很好~