摘要:在WEB前端学习html+css中对标签和选择器的使用掌握以后,难点就是对整体页面的布局掌控了。在初学者中,对于网页的布局是一个难题,往往不知道怎么去布局,今天我们来弄个小案例来使用网页的排版布局。希望对大家学习WEB前端有所帮助。
在WEB前端学习html+css中对标签和选择器的使用掌握以后,难点就是对整体页面的布局掌控了。在初学者中,对于网页的布局是一个难题,往往不知道怎么去布局,今天我们来弄个小案例来使用网页的排版布局。希望对大家学习WEB前端有所帮助。
我们就用我们一直用的“度娘”来做模板,仿造一个“度娘”出来,首先我们先来画下百度的布局如下:
百度相对页面比较简洁,比较适合初学者布局使用,总体我们可以分成三部分,在图中已经用空色框标出,对应在html中我们可以用3个div,给他们用id或class取个名字,我们就用top(头部)、mid(中部)和bottom(底部)来命名。
让我们先来看下头部的内容,写页面时我个人习惯是先把html中的内容先写好,这样不用在html中和css中来回的切换。
头部html代码:
写完了html,也就是内容可以确定,我们就可以安心来写css的文件了,在这里有很多喜欢把css写在html中,这样其实之后维护来说并不方便,css其中有一个优势就是内容和显示分离,那按照这样我们应该把css和html独立分成两个文件,之后如果需要修改样式那只要打开相应的css文件来修改就行,不用再去打开html了。
头部css代码:
接下来就要写中间的部分。
中间html代码:
中间css代码:
最后,再来写底部的代码。
底部html代码:
底部css代码:
随时欢迎您加微信号(Iotek666),进行交流,本微信号会不定期推送技术相关优质文章、热点资讯、视频资源及生活趣事,更乐意与您一起交流IT知识,让我们在闲暇之余巩固一下自己的知识体系 ,扩充一下自己的知识面。快利用琐碎时间给自己充电吧!
希望这篇文章可以帮助到你,总之同学们,IT知识尽在职坐标。
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号