联系站长:782375345@qq.com
欢迎浏览-创云资讯站,网络营销推广引流知识你要的都有!
当前位置:网站首页 > seo优化 > 正文

网页开发需要学什么?静态网页怎么编写?

作者:投稿用户 发布时间:2022-08-10 13:50:29 分类:seo优化 浏览:36


导读:  在学习完了基本的HTML+CSS标签之后,就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的,值得反复体会和思考!  网页结构  简单提一下常用于表示网页机构的标签: ...

  在学习完了基本的HTML+CSS标签之后,就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的,值得反复体会和思考!

  网页结构

  简单提一下常用于表示网页机构的标签:

  header 整个页面的标题(也可表示一个内容区块)

  main 页面主体部分

  footer 整个页面的脚注(也可表示一个内容区块)

  article 一块与上下文无关的独立内容

  section 表示一个内容区块,常嵌套于article中

  aside 在article之外与其内容相关的辅助信息

  nav 页面中的导航栏

  figure 表示一段独立的流内容

  

网页开发需要学什么?静态网页怎么编写?


  基本网站结构

  三栏布局

  一个网页最少由header、main、footer三部分组成,那么从三栏布局开始练习吧。无论是上-中-下结构还是左-中-右结构,关键都在于设置中间部分的宽高或位置。我们知道网页的主体内容(版心)是处于居中位置、随网页缩放而缩放的。那么左右(或上下)两栏固定后,须使中间部分自适应。以下总结了几种三栏布局的方法,以左-中-右结构为例:

  先写左中右三个盒子。

  

网页开发需要学什么?静态网页怎么编写?


  body部分

  1.使用float

  

网页开发需要学什么?静态网页怎么编写?


  利用float使左右脱离文档流

  需要注意的是,使用float方法需要在body部分改一下center盒子的位置,把center盒子放在right盒子之后(否则right盒子会跑到下一行右侧)。以上代码中,设置center盒子的左右外边距来实现宽度自适应,若父盒子layout无高度要求,可用min-height实现高度自适应。不加高度自适应也可,在未设置center盒子高度的情况下本身高度会随文本内容的扩充而自动增加。

  2.使用position

  

网页开发需要学什么?静态网页怎么编写?


  利用绝对定位脱离文档流

  三个盒子都分别使用绝对定位,left、right分别距离窗口左右端为0,center距离窗口左端的间距为left盒子的宽度,距离窗口右端的间距为right盒子的宽度。

  3.使用flex

  

网页开发需要学什么?静态网页怎么编写?


  利用弹性盒固有属性

  须给父盒子layout加上弹性盒属性,给center盒子设置大于0的flex值,利用弹性盒自动拉伸效果实现center盒子的宽度自适应。

  4.使用table

  

网页开发需要学什么?静态网页怎么编写?


  设置为表格

  给父盒子layout设置为table,宽度为整个窗口,给三个子盒子都设置为table-cell,此时三个盒子就有了表格的属性。固定left、right盒子的宽度,center盒子自动占满父盒子剩余宽度。需要注意的是,因为父盒子具有表格属性,当left、center、right三者中任意一个盒子高度改变时,其他两个盒子会跟着改变。

  5.使用grid

  

网页开发需要学什么?静态网页怎么编写?


  设置为网格

  将父盒子layout设置为grid,宽度为整个窗口,用template-rows设置行高,用template-columns分别设置三个盒子的宽度,其中auto实现center盒子的宽度自适应。需要注意的是,这里用template-rows设置了固定的行高,因此center的高度不会自适应。

  仿写练习

  适合初学者练习的网页有很多,可以打开网址之家去里面挑一挑,以静态页面为主的网站。作者自己是以豆瓣首页(局部)进行练习的。练习过程中,千万不要去看网站源码(此时你也有很多地方看不懂),先试着自己分析和思考,用所学的知识看看能做到哪一步。

  

网页开发需要学什么?静态网页怎么编写?


  笔者学习时的仿写

  放上对比图,还是有很多不一样的地方,网页也没有功能,作为初学者这都是正常的。静态网页练习的主要目的是熟悉HTML+CSS布局,培养做网页的思维。具体细节随着学习的深入,可以让网页更还原、页面更精美,网页功能也能逐步完善起来,实现真正的网站开发。



seo优化排行
最近发表
标签列表

关灯