写文章
Hunk
2015-02-03 14:13

原创分享--如何用google chrome实现简单的CSS即时变换网页样式的效果

GOOGLE的东西就是好用。最的有一些同学说不懂CSS,不知道怎么调效果,其实呢,对于我们外贸建站者来讲不需要太懂CSS,但又是必不可少,今天就讲下CHROME怎么实现简单的CSS 即时变换网站样式。

PS:关于本文中提到的 CSS,DIV,元素等概念不懂的同学请参考 http://www.w3school.com.cn/

本文实例以IMIKER官网为例(MRHUA看到不会骂我吧,哈哈)

工具:GOOGLGE CHROME 浏览器

1.打开IMIKER网站,并在米课LOGO上面单击右键,选择审查元素



[attach]2140[/attach]

2. 然后就会出现编辑面板,下左侧为网站源代码(经过编译的),下右侧为CSS代码

[attach]2141[/attach]

3. 如果把鼠标放在左侧DIV或者元素上面,那上部分网页的相对应的部分就出加上阴影,提示你编辑的对象是哪部分


[attach]2142[/attach]

4. 如果把鼠标放在BOGY元素上面,那整个版面就加上阴影


[attach]2143[/attach]

5. 现在我们把鼠标放在LOGO对应的元素上面并单击,右侧就会显示控制此元素的CSS代码


[attach]2145[/attach]

6.对于右侧的CSS, 正常显示的部分为实际产生效果的CSS,加了中划线的为不产生效果的CSS


[attach]2146[/attach]

7. 选择其中一个CSS进行修改,单击CSS 的值,就变成可编辑的状态


[attach]2147[/attach]

8. 把这个值 改成100PX,看上面!米课LOGO的位置马上变了


[attach]2148[/attach]


怎么样,好玩吧?

当你在修改网站的样式的时候,可以用些方法先进行简单的调式,当达到你满意的效果时,记下修改的CSS,转到WP后台对CSS进行修改并保存,可以实现你想要的效果。

QUESTION: 是不是米课的网站就这样活生生被你篡改了?

ANSWER:怎么可能,这只是一个效果而已,你改了下效果后,再刷新你的网站,即可变成原来的模样,别怕!


怎么样,学会了吗?SO EASY! 现在就去改IMIKER的网站试试吧!

鸣谢: MRHUA 创造了米课和米问给大家提供了一个学习和交流的平台

LIAOSAM帮了我很多忙,这一招可以说是跟LIAOSAM学的。







举报
收藏
转发
0/500
添加表情
评论
评论 (28)
最近
最早
3天2夜学会建站
置顶时间 :

设置帖子类型

普通
新闻
活动
修改

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示