用css怎么添加小图标

用css添加小图标的方法:1、使用input标签创建一个文本框;2、在css中使用background属性设置input的背景图片为“icon.jpg”;3、使用padding-left属性设置左边距,主要是用于让文本框的输入内容在小图标后面即可。

用css怎么添加小图标

本文操作环境:windows7系统、HTML5&&CSS3、DELL G3电脑。

新建一个html文件,命名为test.html,用于讲解html中怎样在文本框中添加小图标。

ccb1caddc7cceedf75307515eb6d03e.png

在test.html文件内,使用input标签创建一个文本框,用于测试。

立即学习“前端免费学习笔记(深入)”;

 

38c577a1a6dcd4ab48d0c890d06bb1c.png

在test.html文件内,设置input标签的class为myser,用于下面设置样式。

 

959ffd303602692bf5527b8cd3ce3c1.png

在test.html文件内,编写<style type="text/css”>标签,页面的css样式将写在该标签内。

9cf045ed73b68aeeabf82101b70c889.png

在css标签内,通过class设置input文本框的样式,使用background属性设置input的背景图片为icon.jpg,即可完成小图标的添加,并使用padding-left属性设置左边距为20px,主要是用于让文本框的输入内容在小图标后面。

 

b556700019785f7589ed97b1fa40f7a.png

在浏览器打开test.html文件,查看实现的效果。

9c6aed136ca95756db706ba8357e4af.png

推荐:《css视频教程》

以上就是用css怎么添加小图标的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2880097.html

(0)
上一篇 2025年3月10日 19:50:32
下一篇 2025年3月2日 13:48:20

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 浅谈css布局中负margin的使用方法

    【推荐教程:CSS视频教程 】 一、左右栏宽度固定,中间栏宽度自适应 nbsp;html>        左右栏宽度固定,中间栏宽度自适应     body{ margin: 0; padding: 0; min-width:600p…

    2025年3月10日 编程技术
    200
  • css中怎么将div居中显示图片

    css将div居中显示图片的方法:1、利用图片的margin属性将图片水平居中,代码如“margin:0 auto;”;2、利用div的padding属性将图片垂直居中,代码如“padding-top:50px;”。 本教程操作环境:Win…

    2025年3月10日
    200
  • myeclipse怎么用css

    myeclipse用css的方法:首先点击“file-new-other”;然后找到web project点击next;接着在弹出框中输入“project name”直接点击finish;最后在新建的jsp页面中的head中间加入代码即可。…

    2025年3月10日
    200
  • css id选择器怎么写

    css id选择器的写法是“#selector{属性:值}”,ID选择器前面有一个#号,也称为棋盘号或井号;与类选择器一样,ID选择器中可以忽略通配选择器。 本教程操作环境:Windows7系统、Dell G3电脑、CSS3版。 css i…

    2025年3月10日
    200
  • css如何修改html标签的title样式?(代码示例)

    【推荐教程:CSS视频教程 】 纯CSS实现tooltip,css更改html标签的title样式【笔者有时间会更新一些边界条件。目前的样式在极端情况是有问题的,请不要直接将代码copy到线上环境,这只是笔者写的一个小demo】 html代…

    2025年3月10日
    200
  • 看看CSS中的那些背景图片函数!

    本篇文章带大家了解一下css中的背景图片函数:url()、image()、image-set()、cross-fade()、element()。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 【推荐教程:CSS视频教程 】…

    2025年3月10日 编程技术
    200
  • CSS实现滚动阴影效果的小技巧(分享)

    本篇文章给大家介绍一下使用纯css实现滚动阴影效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 【推荐教程:CSS视频教程 】 开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言。通常在滚动的时候会给垂…

    2025年3月10日 编程技术
    200
  • css中如何改变字体大小

    在css中,可以使用font-size属性来改变字体大小,该属性可以设置字体大小,语法格式为“font-size:值;”。实际上font-size属性设置的是字体中字符框的高度,实际的字符字形可能比这些框高或矮(通常会矮)。 本教程操作环境…

    2025年3月10日
    200
  • CSS外部样式表有两种引用方法,分别是什么

    方法:1、在style标签中通过“@import”引用,语法“@import url(URL)”;2、通过link标签引用,语法“”。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 C…

    2025年3月10日
    200
  • 用css实现div里面的文字靠右

    在css中,可以通过给div元素添加“text-align: right;”样式来让div里面的文字靠右。text-align属性可以设置元素中的文本的水平对齐方式,当属性值设置为“right”时可以把文本排列到右边。 本教程操作环境:wi…

    2025年3月10日
    200

发表回复

登录后才能评论