关键词搜索

源码搜索 ×
×

Web前端笔记-i标签做小图标以及改源码注意事项

发布2019-06-22浏览8848次

详情内容

目录

 

 

最简单的使用i标签做小图标

修改前端源码注意的问题


 

最简单的使用i标签做小图标

运行截图如下:

实例结构如下:

此处就是使用i标签制作的小图标

其中html源码如下:

  1. <html>
  2. <head>
  3. <title>Hello World</title>
  4. <link href="test.css" rel="stylesheet">
  5. </head>
  6. <body>
  7. <div>
  8. <i class="icon"></i>
  9. </div>
  10. </body>
  11. </html>

css源码如下:

  1. .icon{
  2. display: inline-block;
  3. width: 100px;
  4. height: 100px;
  5. background-image: url(girl.jpg);
  6. background-position: center center;
  7. background-size: 60px 60px;
  8. background-repeat: no-repeat;
  9. }

 

下面是最关键的地方,如果下载了网上的前端代码,如何进行操作,这里我记录下,方便以后快速查阅!

 

修改前端源码注意的问题

原始页面如下:

修改后为:

这里找到对应的CSS后,发现这里有2个要改的地方(可能是前端设计问题,要修改两处才能完成)!

都是icons.css里面

一个是此处:

一处是:

 

这里要注意,改的时候,要改根里面的,也就是

在only screen and 这里面的可能不会生效!

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载