WEB前端学习之仿百度—布局使用
范佺菁 2018-07-24 来源 : 阅读 1362 评论 0

摘要:在WEB前端学习html+css中对标签和选择器的使用掌握以后,难点就是对整体页面的布局掌控了。在初学者中,对于网页的布局是一个难题,往往不知道怎么去布局,今天我们来弄个小案例来使用网页的排版布局。希望对大家学习WEB前端有所帮助。

在WEB前端学习html+css中对标签和选择器的使用掌握以后,难点就是对整体页面的布局掌控了。在初学者中,对于网页的布局是一个难题,往往不知道怎么去布局,今天我们来弄个小案例来使用网页的排版布局。希望对大家学习WEB前端有所帮助。

我们就用我们一直用的“度娘”来做模板,仿造一个“度娘”出来,首先我们先来画下百度的布局如下:
WEB前端学习之仿百度—布局使用

百度相对页面比较简洁,比较适合初学者布局使用,总体我们可以分成三部分,在图中已经用空色框标出,对应在html中我们可以用3个div,给他们用id或class取个名字,我们就用top(头部)、mid(中部)和bottom(底部)来命名。

让我们先来看下头部的内容,写页面时我个人习惯是先把html中的内容先写好,这样不用在html中和css中来回的切换。
头部html代码:

WEB前端学习之仿百度—布局使用

写完了html,也就是内容可以确定,我们就可以安心来写css的文件了,在这里有很多喜欢把css写在html中,这样其实之后维护来说并不方便,css其中有一个优势就是内容和显示分离,那按照这样我们应该把css和html独立分成两个文件,之后如果需要修改样式那只要打开相应的css文件来修改就行,不用再去打开html了。

头部css代码:

WEB前端学习之仿百度—布局使用 WEB前端学习之仿百度—布局使用

 WEB前端学习之仿百度—布局使用WEB前端学习之仿百度—布局使用

接下来就要写中间的部分。

中间html代码:

WEB前端学习之仿百度—布局使用

中间css代码:

 WEB前端学习之仿百度—布局使用

WEB前端学习之仿百度—布局使用WEB前端学习之仿百度—布局使用

最后,再来写底部的代码。

底部html代码:

WEB前端学习之仿百度—布局使用

底部css代码:

WEB前端学习之仿百度—布局使用

随时欢迎您加微信号(Iotek666),进行交流,本微信号会不定期推送技术相关优质文章、热点资讯、视频资源及生活趣事,更乐意与您一起交流IT知识,让我们在闲暇之余巩固一下自己的知识体系 ,扩充一下自己的知识面。快利用琐碎时间给自己充电吧!

希望这篇文章可以帮助到你,总之同学们,IT知识尽在职坐标。

本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 6 不喜欢 | 0
看完这篇文章有何感觉?已经有6人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

擅长Java语言,只有合理的安排和管理时间你才能做得更多,行得更远!

  • 27
    文章
  • 2389
    人气
  • 95%
    受欢迎度

已有40人表明态度,95%喜欢该老师!

进入TA的空间
名师指导 直通车
  • 索取资料 索取资料 索取资料
  • 答疑解惑 答疑解惑 答疑解惑
  • 技术交流 技术交流 技术交流
  • 职业测评 职业测评 职业测评
  • 面试技巧 面试技巧 面试技巧
  • 高薪秘笈 高薪秘笈 高薪秘笈
TA的其他文章 更多>>
Java语言-深度理解Java变量
经验技巧 100% 的用户喜欢
论大数据和人工智能的区别
经验技巧 86% 的用户喜欢
HTML5+CSS3从入门到精通中你需要知道的!
经验技巧 100% 的用户喜欢
JAVA语言基础-循环
经验技巧 100% 的用户喜欢
JAVA语言之Eclipse快捷键总汇
经验技巧 100% 的用户喜欢
其他海同名师 更多>>
刘新华
刘新华 联系TA
实力型。激情饱满,对专业充满热情
吴翠红
吴翠红 联系TA
独创“教、学、练、测”循环教学模式
吕益平
吕益平 联系TA
熟悉企业软件开发的产品设计及开发
黄泽民
黄泽民 联系TA
擅长javase核心技术
程钢
程钢 联系TA
擅长大型企业商业网站开发和管理
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计