扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
解决方法:用普通标签模拟,背景图设置在普通标签里面,表单功能还是用input来实现,交互功能得用JavaScript来实现。换句话说,CSS控制普通标签的样式来美化表单,JavaScript实现表单交互功能。
创新互联专业为企业提供邳州网站建设、邳州做网站、邳州网站设计、邳州网站制作等企业网站建设、网页设计与制作、邳州企业网站模板建站服务,十年邳州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
案例分析:
移动端兼容 - 调用相册的按钮样式处理
具体情形:input type="file" accept="image/*;capture=camera"或者input type="file" capture="photo"设背景图无效。在我们的移动端网页当中,会有上传照片的操作需求。此时会使用到文件类型的input文本框,但是不同的系统不同的浏览器在样式上均不相同,而且,设置背景图也没有效果。
解决方法:通过设置opacity为0来进行模拟,背景图设置在其他标签里面。换句话说样式用普通标签模拟,功能用input来实现。
测试效果图:
《CSS美化表单大集锦》
CSS即使设置了其他字体,也要看别的电脑里有没有,一般系统自带有宋体,黑体等字体,但是如果你电脑上有好看的字体,可以显示,在别的电脑没有你的字体,就显示不了,所以一般只会设置系统自带的字体。
设置方法:
html
head
style type="text/css"
p.ziti{font-family:"Times New Roman",Georgia,Serif}
/style
/head
body
h1CSS font-family/h1
p class="ziti"要更改的字体内容/p
/body
/html
CSS定义可以是:font-family:sans-serif
也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}
为什么我这里设置了三个,分别用","隔开呢,因为不同版本的操作系统,对字体的支持不同解释如下:
例如微软雅黑不同操作系统不同版本需要如下设置:
Windows XP及以前版本的Windows
font-family: Arial, 宋体, sans-serif;
Windows Vista和Windows 7
font-family: 'Microsoft Yahei', sans-serif;
Sorry,英文就无法设置字体了,因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。
Mac及其它操作系统
font-family: sans-serif;
系统自带中文字体编码:
宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB2312FangSong_GB2312楷体_GB2312KaiTi_GB2312
1、首先,在电脑中打开编辑器,创建html文档。
2、然后,创建h1标签,用行内样式控制字体颜色为红色。
3、接下来,用内部样式选择器选择h1标签,控制它的样式。
4、外部样式需要,创建外部样式.css文件。
5、然后,在html文件里面引入css文件。
6、最后,在浏览器看是否生效,就可以了。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流