《编程基础:HTML第十章》: 小图标排列

作者|李娜

*本文为「Java联盟」原创内容,转载无需授权,请保留署名来源。


hello,各位小伙伴。不知道最近大家有没有想我呀,李娜我可是很想大家的哦!


今天李娜给大家带来了很给力的知识哦!

第一部分

小编在之前的文章中给大家介绍了页面中加载图片需要用到img标签。

复习一下知识点:

具体的就不提了,不知道的可以百度,或看之前的文章。那我们在布局页面的时候会用到很多的小图标像这种

我们一般的想法就是把他分割成一块块的小图标并且分别命名然后用img图像标签将他们逐一加载到我们的网页中。

这样做的话首先我们面临的问题就是分解图标的工作量比较大。而且我们分割图片的美观也很难保证。

so,今天小编给大家分享的技术就是可以不用分割图片,直接把我们想要的图标导进我们的页面。

第二部分

那么今天小编就给大家演示一下,页面左侧菜单的制作。

首先我们需要一个放满图标的图片,就拿我们上图为例。然后打开我们的编辑器,新建页面,小编这里使用ul列表来做这个菜单。

之后就是设计样式了。页面格式初始化是必须要做的。然后为我们的页面设置背景图片,注意是图片哦!!!

那么效果如图:

那么下面我们要做的就是,给图标定位了让他可以显示我们想要的图标。

第三部分

知识点来了!!!

知识点一:

我们的背景图片加载的是以左上角为原点显示的图标 ,图标的大小与我们设置的容器大小有关。

只要我们定位左上角这点的位置就可以了(就像我们学过的坐标系)。比如我现在想让这个二维码一样的图标作为第一个图标显示在我的菜单了列表中。通过使用测量工具(说实话我就是用QQ截图工具来测的)假想这就是个坐标系。那么这个图标的左上角做标为(0,120px)。想要让这个二维码的图标位于原点的位置,就要把整个图片向上移动120px单位(就是-120px)。那么我们编写代码的时候。设置的原点坐标就是(0,-120px)。

代码:

效果:

就是这样逐一设置我们想要的图标就可以了!!!

知识点二:

cursor:pointer;

在我们的属性设置中,出现了这样的一句代码。他的效果就是:当我们的鼠标滑到图标上的时候,会变成小手指。

知识点三:

list-style:none;

列表样式:无。

在之前的文章中有介绍。列表是有默认样式的。(忘记的小伙伴可以会去看看 ,默认样式少不说,效果真是懒得吐槽了!!) 于是,我们就可以用这条属性来清除列表的默认属性。想想就很开心呢!!


来来大家一起动手试一下,看我们可以利用上面的素材做出什么样子的效果!(参考如下)

当然有什么问题或者需要李娜我给大家分享讲解的地方,可以在留言区留言告诉我,整理后会在公众号里面分享讲解哦!

有疑问?请留言!关注Java联盟微信公众号,看Java要闻!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,373评论 25 707
  • 浅夏花开 岁月如河 左岸,回忆难忘 右岸,惘然若梦 脉脉轻语 指尖碎流年 忽忆起 往事也如烟 那个懵懂的季节 迷失...
    素笺叹墨殇阅读 288评论 1 1
  • 昨晚快10点了,老公把电视频道定格在一个80年代的武侠电影,最后以全部人都躺那悲伤的结尾剧终了,真是没意思,睡觉了...
    红猪猪阅读 324评论 0 2
  • 深秋花卷曲,随后黄袍披。 风来万叶落,枯枝刺天威。
    老槐树阅读 146评论 0 3