当前位置:首页>ps实例教程>ps网页设计>网页模板>教程内容

网页模版,个人网站建设入门知识(3)

来源:站酷 作者:Becky赵 学习:23471人次

 

好了现在我们插入了第一张切图,在DW里F12预览看看。。。

卧槽,这什么鬼,为毛和其他的区域重叠了,为毛我缩小浏览器的时候出现了这么无节操的情况。

嘿嘿,原因我们先不深究,这里主要是想让大家了解一下这样是不行滴。

我们得用第二种插入图片的方法-在CSS中作为背景插入。总是插入插入什么的我都有点脸红了呢,哎卧槽,我为什么要脸红???

额,说CSS,首先回顾下上次的代码,额好吧上面回顾过了。

之前我们给每个DIV都加了同一个名字叫做box并且赋予了这个名字一些属性,呵呵呵我咋想起游戏里的称号了呢,带属性的名字,艾玛这个解释好。那接下来首先呢咱们得给box这个名字再加一个属性,至于为神马,嘿嘿,高级篇中自有妙用。

www.16xx8.com_021T95494-12.jpg


这个意思就是包住并且别盖住,懂不懂不,包住,但是里面那事儿变大了你也得跟着变大,不能盖住人家。

啊,不能乱想,继续写代码。

好了,现在我们要给每一个DIV赋予它们自己独特的名字了

www.16xx8.com_021T95430-13.jpg


按照DIV的名字或者按照序号什么的,写出这几个新的属性,我的是9个分区,就写了9个名字并给它们写上属性,这里为了简单就用bg1这样的形式写了,如果是工作中的项目的话肯定不能这样写的,要代码语义化,具体的知识等开支线剧情来讲吧。

这里属性的意思大家应该大致明白,首先是背景:图片地址 水平对齐 垂直对齐,然后是宽度百分百,高度要跟着当前插入的图片走,因为是背景图片,DIV也就是容器本身是不会因为背景图片而自适应的。

然后把这些荣耀的名字赐予每一个DIV吧

www.16xx8.com_021T95454-14.jpg


看到没有看到没有,比游戏还diao,每个角色可以佩戴多个称号,只要中间用空格分开就行,太淫荡了有木有,太不要脸了有木有。

www.16xx8.com_021T92P8-15.jpg

好嘞,现在我们再来F12一下,当然你在之前预览的页面刷新也行。

粗来了粗来了,网页粗来了,噢也。

额,有些奇怪的东西在,哈哈,是我们上节课加的边框,还有每个区域的名字。把这些东东删掉再看,喔,醉了,这是我第一个网页,就好比月球上那个小脚印一样,意义非凡啊。

让我们再看一下全部的代码吧

www.16xx8.com_021T91161-16.jpg


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

嘛,孩子,这只是低级功法而已,表太激动,实际上真正的网页要比这个复杂很多倍,哦呵呵呵呵,表怪我打击你,太容易满足容易被江湖淘汰哟~~~

www.16xx8.com_021T95M8-17.jpg


 

好了,今天的篇幅到这里就先结束了,亲们表太想我哟哦呵呵呵~~~哎哎别打~~~说正事说正事

下一篇该讲高级功法篇了,纠结啊,内容要比这个多的多的多,咋办捏,是分为多篇来讲还是直接整一个视频教程捏,小伙伴们想看啥样的,来发表下看法呗。

期待影迷们的回复哟~

 

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
孤芳不自赏2019-01-21 12:58
太棒了
小蚂蚁2018-07-20 08:11
必须支持
狮子的星空吧2017-05-28 09:49
想看看
深深的海洋2017-05-28 04:07
好复杂的赶脚

关注大神微博加入>>

网友求助,请回答!