开发者学堂课程【零基础学前端 HTML+CSS :广告区域】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/398/detail/5155
广告区域
基本内容
一、明确广告区域位置
二、广告上面的“文字”
三、广告页面制作
一、明确广告区域位置
这节课的内容就是解决一下广告条的制作,如下图所示:
首先,广告页面的颜色和上节课所学的“快租客”、“提交”框里的颜色相同;
从页面可以知道高度是100,宽度是100%。
二、广告上面的“文字”
</div>
<div
id="ad"
>
注册快租客立即领取200元房费</div>
<div
id=“main”> 主区域</div>
<div
id=“dianping”>
点评</div>
<div id=“foot"> 底部信息
</div>
<body>
三、广告页面制作
与上节课所学的“nav-s”代码类似。
#
ad
{
width: 100% ;
//广告界面的宽度
min-width: 960px ;
max -width: 1920px ;
//此处直接将”搜索区域“的代码复制
background-color:
#
FDCA
00;
//广告的背景颜色,和快租客”、“提交”框里的颜色相同;
height: 100px ;
//广告界面的高度
//刷新之后,可以看到广告页面与上方的搜索页面有一道缝隙、广告字体也略显小。
line
-
height
:100
px
;
//将文字“注册快租客立即领取200元房费”调整到广告页面的中间位置。如下图所示:
font
-
size
:30
px
;
//文本像素,将文本字体调大。
//文字的字体为:微软雅黑,这个在之后的课程学习中会触及到,此处不再讲解。
刷新之后得到如下图所示的广告页面