首页
问答
词典
文集
工具
退出登录
登录
我要提问
搜索
问答首页
如何利用 CSS 定位属性制作简单的边角旗帜广告?
正
2
0
1
3
-
0
9
-
0
9
1
7
:
4
9
:
5
6
版本:
1
/
1
2
0
1
3
-
0
9
-
0
9
1
7
:
4
9
:
5
6
版本:
1
/
1
有些网站会在页头添加一些广告,形式多式多样,比如顶部 banner,对联广告等。那么如何利用 CSS 定位属性制作顶部边角旗帜广告,也就是在页面顶部一角的广告呢?
有些网站会在页头添加一些广告,形式多式多样,比如顶部 banner,对联广告等。那么如何利用 CSS 定位属性制作顶部边角旗帜广告,也就是在页面顶部一角的广告呢? [图片]
边角旗广告
CSS
定位属性
Dreamweaver
更多标签...
HTML
Html代码
position
制作
版权归作者所有。任何形式转载须联系作者获得授权。
作者:
正解网
来源:正解网
链接:
http://localhost:9000/question/081ebfa5
投票
5
好问题
烂问题
修改
分享
扫码分享
分享到新浪微博
分享给QQ好友
分享到QQ空间
复制网址
OK了,粘贴即可!
问题状态
正解:
1
个
解答:
1
个
同问:
0
人
浏览:
33
次
相关问题
用 Dreamweaver 写网页时,如何用 CSS 美化输入框?
正解:
1
解答:
1
同问:
0
Dreamweaver 写页面代码时,如何解决 IE8 中渐变效果带锯齿的问题?
正解:
1
解答:
1
同问:
0
如何用 CSS 的 overflow 控制图像的显示大小?
正解:
1
解答:
1
同问:
0
写网页时,如何解决网页乱码问题?
正解:
1
解答:
1
同问:
0
在 Dreamweaver 中如何用 CSS 制作个性化的按钮?
正解:
1
解答:
1
同问:
0
修改提问
如何利用 CSS 定位属性制作简单的边角旗帜广告?
有些网站会在页头添加一些广告,形式多式多样,比如顶部 banner,对联广告等。那么如何利用 CSS 定位属性制作顶部边角旗帜广告,也就是在页面顶部一角的广告呢? ![](/image/0c223453ef0bf8999fe38d1f2dd626f6.gif)
边角旗广告
CSS
定位属性
Dreamweaver
HTML
Html代码
position
制作
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
1
个解答
正
2
0
1
3
-
0
9
-
0
9
1
7
:
4
9
:
5
6
版本:
1
/
1
2
0
1
3
-
0
9
-
0
9
1
7
:
4
9
:
5
6
版本:
1
/
1
只需观看完一个15秒以内的短视频广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
看完广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
只需观看完一个15秒以内的短视频广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
看完广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
730 人已浏览过此解答
免费查看解答
×
打开手机微信扫一扫免费查看解答
3步免费查看解答
2步免费查看解答
1️⃣ 长按保存下方小程序码
2️⃣ 打开手机微信的扫一扫
3️⃣ 点击右上角相册选取此码
1️⃣ 长按下方的小程序码
2️⃣ 在弹出的菜单中识别图中的小程序码
小程序码已失效
👉请点此刷新👈
60
s
自动显示解答
修改解答
这种广告的制作方法很简单,就是利用 CSS 中的定位属性 position 来制作的。步骤如下: ##操作步骤 1、首先制作一张边角的广告图片,比如上图中那样的。可以将其存为 jpg、gif 或者 png 图片,推荐使用 gif 图片,因为 jpg 不能是透明的,所以图片的背景必须与网页相同,而 png 图片会被 IE6 浏览器解析成灰色的底。 2、准备好图片后,在 HTML 代码中加入一句代码: <a id="topleft" href="#" title="topleft">左侧链接</a> 这里的方法是直接写入了一个链接,也可以为它添加一个容器,那样看 上去更规矩,比如: <div id="left-corner"> <a href="#" title="topleft">左侧链接</a> </div> 但这样写也加大了工作量,需要在 CSS 中多写几句。 3、如果按第一种直接写链接的方法,就可以将 CSS 直接写出: ![](/image/9139bf0ef3f63b59af9a61bf9a3a593f.jpg) 而第二种方法多了一个容器,所以要先给 left-corner 这个容器做定义,然后再定义连接,如下: ![](/image/3de622932cbe28b6b229bf9964340f29.jpg) ##提示 不管代码多少,两种方法都能做出相同的效果,就是代码多少的区别。另外,有些人可能会将定位 position 的值写成 fixed ,这样它就是悬浮在左上角的,但一些低端浏览器不能识别 fixed,那就会出现一些小问题,所以建议暂且还是使用 absolute 比较保险些。
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
我的解答
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
∧
回顶部