我是个CSS新手,总是不知道哪个元素要多少像素,要在什么位置,什么颜色,有没有什么好的工具呀?

要即能写代码又能可视化的工具,还能显示元素宽高,不要跟我说什么模板,这种最垃圾

新手确定css代码像素的方法

我也是从初学者过来的,结合我自己的学习经验给你提个建议,首先DW软件可以使用,其次,可以使用浏览器的开发者工具进行辅助编辑。

打开浏览器的开发者工具的方法

可以使用浏览器的网页编辑功能,右键单击网页任一元素,然后审核元素,手动清空下网页的html代码,在浏览器里控制和敲打代码就行,这个方法是我自己用的比较多的,做网页设计的人估计用的不多,还有个好处是可以使用DW软件进行配合,在网页上使用这个功能进行修改测试,调整没问题了再去页面html的代码里调整。

浏览器开发者工具的外观如下

目前支持这个功能的浏览器很多了,火狐、搜狗、360、百度等都是有这个功能的,这个截图是我刚刚简单编辑了个导航条代码,你可以试下这种方式。

另外,本地建网页在这个浏览器里会更好操作,你可以直接编辑css的代码,然后根据浏览器展现的情况进行像素的大致确认,还有就是很多时候像素建议你对元素长宽大小包括边框等跟尺寸像素相关的数据进行计算,因为人肉眼状态下可能会出错,精密的数字是不会有问题的。

使用注意点

1:F5刷新后网页会恢复未编辑之前的状态,因此建议代码先手动复制保存下;

2:建议配合DW进行操作,时刻保存代码。

3:不同名称的浏览器开发者工具的打开方式可能会有不同,有的是F12,有的是其他方式。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2019-02-12

最简单的工具,网页三剑客,Dreamweaver。满足你既能写代码,又能可视化的工具需求,也可以显示元素的宽和高。不过工具的使用,你需要学习一下。

第2个回答  2019-02-15

个人觉得最好的工具是ps,在上面颜色,大小都可以获取,但是要注意的是逻辑像素和物理像素是不一样的,要进行转换哦

第3个回答  2019-02-28

Dreamweaver不错,但其实没必要这么复杂,直接使用浏览器的“审查元素”。就可以非常直观查看页面效果、服务器翻译的html代码、css代码。

也可以直接对浏览器端代码进行修改,查看微调效果(无法保存到服务器哈),对工作和学习很有帮助的。

第4个回答  2019-06-05

新手的话,前期可以使用Dreamweaver,但这不是长久之计,Dreamweaver里面有一个设计视图,虽然很人性化,但如果Dreamweaver你用习惯了,一旦脱离了设计视图,你连代码都知道,如果真的到了那个时候,你自己可以想想。

在这,我推荐你电脑里面可以装一个Dreamweaver,毕竟有些东西用Dreamweaver做是比较方便的,

但长期使用的编辑器我推荐Visual Studio Code


相似回答