做了个APP下载链接,太累人了
作者: 葛屹肃 | 日期: 2022-08-12 | 分类: 个人杂谈
最近,浏览同行网站的时候,发现其APP下载链接做的挺专业,有图标、文字说明及下载链接,于是,今天自己模仿了下,花了大半天好不容易才做好,真得太累人了。
就上图这个APP下载链接,初时看以为是图片+链接,本来想下载图片,结果发现并不单纯的图片,而是用代码生成的。
看着这个APP链接,就是图标+文字+按钮,估计使用几个DIV可以轻松搞掂。于是,马上在电脑调试,不到半小时就在电脑上调试OK。
然后上传到网站,并写了篇文章测试效果,在电脑上浏览一切正常,而使用手机查看时,结果只有外面DIV,里面什么内容都没有。
手机中没有效果,那肯定不行,现在浏览网站使用手机比电脑更多人。那还要继续调试,发现一旦使用嵌套的DIV后,手机上就看不到,而使用img、span等元素,可以看到,但样式不好排版。
试来试去,使用DIV总是不能解决问题,要么是显示问题,要么是排版问题,那就放弃DIV方式吧。
后来改为DIV+table模式,显示问题是解决了,但排版还是有问题,查了资料又自己尝试,好不容易调好了排版,算是搞好了。不过,在我看来还有2个缺陷:
1、DIV无法居中;
2、只有按钮是链接,而非整个DIV。
算了,能达到效果就行,电脑与手机操作无异常。根本问题在于手机使用HTML5+CSS3,而网站的主题版本太低,还是几年前的,因此调试CSS样式时,经常发现没有效果。
而且样式是嵌入文章中,发表文章需要经过保存,保存后是否会对代码产生代码,现在想来,这个还真没有查看。
总之,算是暂时搞掂了,虽然不如人意,主要还是自己对于手机样式没有什么经验,都是以电脑经验来调,来来回回不断调整,调得自已都想吐了,先这样吧,短期不会再优化了。
文章链接:https://www.geyisu.com/2762.html