html一个小文本框浮动于页面右侧,HTML实战篇:html仿小米官网右侧浮动框代码

原标题:HTML实战篇:html仿小米官网右侧浮动框代码

df7bb283df70f1f67fcc3e2138f54268.png

本篇文章主要给大家介绍一下使用html+css来模仿制作小米官方网站右侧的浮动框。我们来看下边的这个浮动框,位于小米官网的右侧并且随着页面的滚动,一直浮动在右侧不变;

d05c25f77171c89b812b303645271620.png

我们通过上边的图片可以看出图片有5个单独的块元素组成,每个块元素鼠标经过都有一个单独的颜色变为黄色的效果,然后第一个块元素鼠标经过还会在左侧弹出更多内容。接下来我们简单说一下制作所用到的核心知识。

1)制作页面所需知识点

1、列表标签(dl dd dt)的使用,使用dl和dd来完成前边5个相同模块的制作

2、鼠标经过(hover)的使用,第一个元素鼠标经过左侧显示,这个跟我们之前将的导航菜单类似,还有鼠标经过文字以及图片改变颜色,这里可以使用hover之后改变背景图片来实现;

3、浮动(fixed)的使用,该内容一直浮动在网页右侧,跟随页面一起滚动,我们可以使用position:fixed来实现;

2)代码实操演练

大体了解了我们所要使用的知识点之后,我们就可以开始根据图片上的内容来制作我们所需要的页面了,具体的实现代码就如下方所示:(首先写一个div盒子,看到列表形式,直接使用dl和dd,然后每个元素内部有文字和图片,使用h4标签和span标签来存放图片和文字内容,就这么搞定了哈哈),来看代码吧。

b45cb83f0a7649e99aedbef81b66acbf.png

html代码挺简单的,我们啪啪敲完之后呢,剩下的就是书写css代码,来完成图片所示的布局样式的制作了。那么我们的css代码就如下图所示:(最外层box直接来个fixed和right、bottom配合,让其浮动在右侧,然后写写dl和dd的宽高,控制控制span的背景,随便写写hover事件,ok完成了)。不多说了,看代码吧。

d41818ebef443984d1bdedd1ec6daa6c.png

只有知道别人心里在想什么,你才能得到你想要的。返回搜狐,查看更多

责任编辑:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值