您的位置:首页 > Web前端 > CSS

网页模仿

2016-01-07 14:38 417 查看
很多人刚入门的网页设计人员总想做出很好看的网页或者仿照某个网站做个山寨版本,其实扒网页很简单,但是本文仅供学习之用,不是要你去山寨,应当好好研究布局、css等。
首先,建个项目,用本地服务器tomcat也好jetty也行,能在浏览器看到页面(xx.jsp)就行;现在就用火狐浏览器开始扒页面吧。


1.找到你要模仿的网页,点击右键找到“查看源代码”



把源代码全选粘贴进xx.jsp,注意留着表头的一句话和引入JSTL的c便签

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>


c便签在后面有用;

2.这个时候刷xx.jsp,可以看到文字部分基本都在,但是布局什么的都没有那是因为没有引入正确的css和js文件;

现在去原网站,打开火狐的firebug功能

在css里能找到所有的css文件和样式



在脚本里能找到所有js文件



接下来照葫芦画瓢就行了,在项目里新建相同名字的css和js文件,然后在firebug把相同名字的属性全选粘贴就可以了;这样就做到了样式和脚本和网页一致了;

3.导入js和css

这一步很关键,路径一定要对,这个时候就要用到jstl的c便签了



整个css和js的路径就这么写,此时再刷新页面应该就可以了;

4.页面的图片引入



页面点击右键,查看背景图片再保存就可以了,如果页面页面还有些小图标什么的直接截图保存;如果你会ps,那么恭喜了,一般的图片难不倒你了;

把需要的图片全部放到一个文件夹,开始导入路径;

5.用火狐的firebug中红框圈中的按钮,去页面找那个图片的位置,在回来点击“计算出的样式”,就会在那里看到xx.css(第xxx行),因为之前copy了xx.css

所以去找xx.css的第xxx行,那里会有图片路径,改过来就行了,建议写绝对路径加上项目名



至此一个前端的网页基本搞定了;

总结:1、模仿网页是为了更好的学习css和js;

2、活用firebug;

3、js和css的引用是有顺序的。一般jquery.js是最前面的;

4、c标签的使用很有用,也方便,注意引入那句话就行了;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  网页设计 css