网页模仿

很多人刚入门的网页设计人员总想做出很好看的网页或者仿照某个网站做个山寨版本,其实扒网页很简单,但是本文仅供学习之用,不是要你去山寨,应当好好研究布局、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标签的使用很有用,也方便,注意引入那句话就行了;

  • 6
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值