此次任务是百度搜索的简易栏目设计,由于设计过于简单,所以就不用外链式进行编写了,直接用内嵌式。先看整体效果图。
标题栏使用了下划线text-decoration: underline,整体由一整个div标签包裹,先设置div标签的页面占比,再对字体进行设置,大小颜色。
线上代码分析图
再上代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度搜索</title>
<style>
.box1{
width:40%;
height: 100%;
}
span{
color: red;
}
.p1{
text-decoration: underline;
color: blue;
font-family: simhei;
}
.p2{
font-size: 18px;
color: #4A4A4A
}
.s1{
text-decoration: underline;
color: red;
}
.s2{
color:#559C40;
}
.s3{
color:#656565;
}
</style>
</head>
<body>
<div class="box1">
<h2 class="p1"><span class="s1">什么是CSS</span>?-CSS教程</h2>
<p class="p2">猴子提示:可以通过简单更改<span>CSS</span>文件,改变网页的整体表现形式,从而减少我们的工作量,所以它是每一个网页设计人员的必修课.知道什么是<span>CSS</span>了,现在就开始学习<span>CSS</span>吧....</p>
<p><span class="s2">www.dreamdu.com/css/wh...</span><span class="s3">-百度快照-85%好评</span></p>
</div>
</body>
</html>