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

html-css010

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

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

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

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

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

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

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

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

使用注意点

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

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

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

首先第一步:从局部出发,从一个小的部分的样式写起,目的是让你熟悉css样式的元素有哪些,那些元素都有一些什么作用,怎么样使用这些元素,以及CSS的属性有哪些等等,这一步是基础!

然后你可以尝试布局框架,把网页分成一块一块,先把框框写好,各浏览器中测试不要错位了,可以先用不同的背景颜色看效果,不错位就行,框架ok了之后,这样你的而已应该就没问题了,你可以尝试更多方式写布局,两栏式,三栏式等都可以。

课课家DIV+CSS综合页面排版视频教程

最后把整体跟局部结合,也就是把你第一步中的基础东西写好,往框架的层里面填充就好了!所以第一步很关键!

还有就是你对CSS要有浓厚的兴趣,学习最好的老师就是兴趣,没有兴趣而言,这条路我相信你是走不长远的。