如何使用CSS3样式font-variant判断文本小型大写

 时间:2024-10-12 01:02:11

1、第一步,双击打开HBuilder工具,在创建的Web项目指定目录下新建静态页面fontVariant.html,并引入需要的引用的文件,如下图所示:

如何使用CSS3样式font-variant判断文本小型大写

2、第二步,在<body></body>标签元素内插入一个input输入框和button按钮,分别使用Bootstrap控制它们的样式,如下图所示:

如何使用CSS3样式font-variant判断文本小型大写

3、第三步,保存代码并预览该静态页面,可以在浏览器上查看到一个按钮和一个输入框,如下图所示:

如何使用CSS3样式font-variant判断文本小型大写

4、第四步,利用jquery初始化函数,在这里添加按钮单击事件,设置输入框中的font-variant属性,如下图所示:

如何使用CSS3样式font-variant判断文本小型大写

5、第五步,再次保存并预览页面,输入“How are you?”,点击按钮查看效果,如下图所示:

如何使用CSS3样式font-variant判断文本小型大写

6、第六步,可以看到“are you”首字母变为大写的,并且字体变小了,如下图所示:

如何使用CSS3样式font-variant判断文本小型大写
  • 快速在Dream weaver中制作鼠标悬浮链接上特效
  • eclipse如何创建Static Web Project?
  • 亿图图示怎么画UML模型图
  • jquery 怎么实现内容居中
  • css如何设置字体加粗
  • 热门搜索
    法律在我心中手抄报 爱鸟护鸟手抄报 日行一善手抄报花边 好看的手抄报边框 关于中秋的手抄报 心里手抄报 手抄报英语 争做最美少年手抄报 法律知识手抄报资料 初中语文手抄报