當前位置:首頁>ps實例教程>ps網頁設計>網頁模板>教程內容

網頁模版,個人網站建設入門知識(3)

來源:站酷 作者:Becky趙 學習:23471人次

 

好了現在我們插入了第一張切圖,在DW里F12預覽看看。。。

臥槽,這什么鬼,為毛和其他的區(qū)域重疊了,為毛我縮小瀏覽器的時候出現了這么無節(jié)操的情況。

嘿嘿,原因我們先不深究,這里主要是想讓大家了解一下這樣是不行滴。

我們得用第二種插入圖片的方法-在CSS中作為背景插入?偸遣迦氩迦胧裁吹奈叶加悬c臉紅了呢,哎臥槽,我為什么要臉紅???

額,說CSS,首先回顧下上次的代碼,額好吧上面回顧過了。

之前我們給每個DIV都加了同一個名字叫做box并且賦予了這個名字一些屬性,呵呵呵我咋想起游戲里的稱號了呢,帶屬性的名字,艾瑪這個解釋好。那接下來首先呢咱們得給box這個名字再加一個屬性,至于為神馬,嘿嘿,高級篇中自有妙用。

www.tgudhdp.cn_021T95494-12.jpg


這個意思就是包住并且別蓋住,懂不懂不,包住,但是里面那事兒變大了你也得跟著變大,不能蓋住人家。

啊,不能亂想,繼續(xù)寫代碼。

好了,現在我們要給每一個DIV賦予它們自己獨特的名字了

www.tgudhdp.cn_021T95430-13.jpg


按照DIV的名字或者按照序號什么的,寫出這幾個新的屬性,我的是9個分區(qū),就寫了9個名字并給它們寫上屬性,這里為了簡單就用bg1這樣的形式寫了,如果是工作中的項目的話肯定不能這樣寫的,要代碼語義化,具體的知識等開支線劇情來講吧。

這里屬性的意思大家應該大致明白,首先是背景:圖片地址 水平對齊 垂直對齊,然后是寬度百分百,高度要跟著當前插入的圖片走,因為是背景圖片,DIV也就是容器本身是不會因為背景圖片而自適應的。

然后把這些榮耀的名字賜予每一個DIV吧

www.tgudhdp.cn_021T95454-14.jpg


看到沒有看到沒有,比游戲還diao,每個角色可以佩戴多個稱號,只要中間用空格分開就行,太淫蕩了有木有,太不要臉了有木有。

www.tgudhdp.cn_021T92P8-15.jpg

好嘞,現在我們再來F12一下,當然你在之前預覽的頁面刷新也行。

粗來了粗來了,網頁粗來了,噢也。

額,有些奇怪的東西在,哈哈,是我們上節(jié)課加的邊框,還有每個區(qū)域的名字。把這些東東刪掉再看,喔,醉了,這是我第一個網頁,就好比月球上那個小腳印一樣,意義非凡啊。

讓我們再看一下全部的代碼吧

www.tgudhdp.cn_021T91161-16.jpg


是不是特有成就感,是不是感覺到了春天~~~

嘛,孩子,這只是低級功法而已,表太激動,實際上真正的網頁要比這個復雜很多倍,哦呵呵呵呵,表怪我打擊你,太容易滿足容易被江湖淘汰喲~~~

www.tgudhdp.cn_021T95M8-17.jpg


 

好了,今天的篇幅到這里就先結束了,親們表太想我喲哦呵呵呵~~~哎哎別打~~~說正事說正事

下一篇該講高級功法篇了,糾結啊,內容要比這個多的多的多,咋辦捏,是分為多篇來講還是直接整一個視頻教程捏,小伙伴們想看啥樣的,來發(fā)表下看法唄。

期待影迷們的回復喲~

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
孤芳不自賞2019-01-21 12:58
太棒了
小螞蟻2018-07-20 08:11
必須支持
獅子的星空吧2017-05-28 09:49
想看看
深深的海洋2017-05-28 04:07
好復雜的趕腳

關注大神微博加入>>

網友求助,請回答!