广告区域| 学习笔记

简介: 快速学习广告区域。

开发者学堂课程【零基础学前端 HTML+CSS 广告区域】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5155


广告区域

 

基本内容

一、明确广告区域位置

二、广告上面的“文字”

三、广告页面制作

 

一、明确广告区域位置

这节课的内容就是解决一下广告条的制作如下图所示

image.png

首先,广告页面的颜色和上节课所学的“快租客”、“提交”框里的颜色相同

从页面可以知道高度是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: #FDCA00;

//广告的背景颜色快租客”、“提交”框里的颜色相同

height: 100px ;//广告界面的高度

//刷新之后可以看到广告页面与上方的搜索页面有一道缝隙广告字体也略显小

line-height:100px

//将文字“注册快租客立即领取200元房费”调整到广告页面的中间位置如下图所示

image.pngfont-size:30px//文本像素将文本字体调大

//文字的字体为微软雅黑这个在之后的课程学习中会触及到此处不再讲解

刷新之后得到如下图所示的广告页面image.png

相关文章
|
监控 数据挖掘 SEO
如何提高着陆页转化率?有效提高着陆页转化率的8个技巧
验证以商业和产品、营销和推广为最终目标的设计到底效果如何,转化率是最常用的指标。那么如何提高着陆页的转化率呢?接下来一起来看看小编整理的提高着陆页转化率的8个技巧吧。
101 0
如何提高着陆页转化率?有效提高着陆页转化率的8个技巧
|
前端开发
用HTML+css制作一个动态的天气图标
用HTML+css制作一个动态的天气图标
189 0
用HTML+css制作一个动态的天气图标
|
传感器 网络协议 物联网
5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量|学习笔记
快速学习5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量。
312 0
5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量|学习笔记
|
前端开发 开发者
点评区域| 学习笔记
快速学习点评区域。
点评区域| 学习笔记
|
存储
好客租房136-获取当前定位数据并渲染到列表中
好客租房136-获取当前定位数据并渲染到列表中
118 0
运营必备 - 百度首页信息流(定向维度)
运营必备 - 百度首页信息流(定向维度)
128 0
|
人工智能 定位技术
大讲堂 | 使用在线地图的搜索数据探索城区ROI
在本次公开课中,讲者将介绍如何使用在线地图的搜索记录找到城市中吸引人的区域(ROI)并对这些ROI给出功能、客源等画像。
335 0
|
搜索推荐 定位技术 UED
区域SEO:如何做区域特定的SEO
区域SEO:如何做区域特定的SEO 对于某些企业而言,较大区域的排名可能比本地SEO优化更有意义。 对于在各个领域提供服务并且可能无法获得办公室人流量的服务区域企业尤其如此。 实施精心策划的区域搜索引擎优化策略有助于扩大您的印象范围。
1233 0