HTML+CSS学习笔记（六）-- HTML 前端设计，Javascript/ jQuery 在 login /Yahoo 画面网页 的应用

1.缘起

做后端的工程師同时具有华丽的网页设计的人是比较少的；所以，自己做网页时候，可以说是困难重重。不过，现在有许多浏览器都有网页解码与分析的功能。我利用这个功能抓取一个参考画面给自己应用，以减少开发的时间。

2. 分析的目标

我们利用国外著名的网站，抓一下需要的部分画面，简单的应用。这里是取 Yahoo 的登录画面。我只要“登入方框内的格式，其他的不许要。像下图的红框部分。（这里是用 Google 的 chrome 浏览器）

3.取得 HTML 程式码

这个时候按下鼠标的右键，选择 ”检视网页原始码“ 取得编码

我们会得到这样一个画面，并且把画面拷贝下来另存新档。（注意：使用鼠标逐行拷贝到编辑器里，再另存新档）

我是用 sublime 编辑器。拷贝下来的效果像这样。

4. 取得 CSS 内容

接下来我们拷贝必要的 CSS 和 JS 档，取得的方法有两个，
3. 从 HTML 档案里面找，譬如用 find 功能找 “CSS”，可以看到一个。然后把路径贴在网址上

同一的方法拷贝存档 命名：yahoo-main.css
再以同一手法寻找其他的 CSS 档案，并且复制存档。
不过你会发现由于档案太大，研究与分离出自己想要的格式不容易下图展示另一种简便的方法。

5.利用 chrome 正确选择需要的区块

同样在这个画面按鼠标右键，去最下一个选项”检查“

当按下 ”检查“后，画面出现下面这张图，图面分成 A、B、C 三大块
A—》 HTML 程式内容
B—》 HTML 程式执行后的画面
C—》 style \ CSS 的格式内容
当鼠标在 A 区游走的时候，B 区的色块回相对应的变换。如果在 A 区按下左键选中一行，那么 C 区回出现相对应的 CSS 内容。把这个 CSS 内容逐段的拷贝到一个准备好的 CSS 当，譬如 yahoo-login.css。

6.去除不要的内容

经过多次修正后，可以確定 div class=“login-box-container” 的范围就是我们需要的。要抄别人的成品，还是需要一些时间。一边改一遍验证的动作是省不了的把取出的方框做一些内容修改就可以放在别的画面应用了
`

7.后记
说实在的，要同时兼顾后端的·資料变化以及前端的画面美观，没有充分的经验是很难同时做好两边的设计。如果有一个可以参考的对象，那么就省时省力了。