网页模仿
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标签的使用很有用,也方便,注意引入那句话就行了;
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题