网页图片和文字如何上下对齐

"一个网站是如何制作出来的?是不是用了很高大上的技术?"

这是大多数童鞋经常会产生的疑问



网页制作并非大家想的那样用了高大上的技术。其实网站制作很简单,是由一个叫div+css来搞定的

Div+css是什么?


div+css是网站布局方式

Div:是一个常见网页布局结构。它取代传统的表格布局方式。(就相当于人的骨架和各个零件)

Css :是给网站进行美化和修饰。(相当于人的衣服、鞋子、帽子等修饰自己的东西)

例如:我们把div比喻成一个人的话,那么css 就是给这个人穿上华丽的外衣。

Div+css布局的优势是什么呢?


这样写代码精简,提高页面的下载速度,有利于搜索引擎的优化。

一个网站开发完成后。用户通过"百度搜索"的方式获得该网站信息,若要用传统的表格布局。会造成网页页面很乱,不利于百度的搜索和查找。

结构与样式分离,方便前端开发人员与后台程序开发人员分工协调。

一个完整的网站由前端开发人员和后台程序开发人员相互配合来完成。

前端人员负责网站页面的设计和布局。后台程序开发人员负责网站功能开发(如:文件上传)

若结构和样式没有分开,不利于前端开发人员与后台程序开发人员的后续工作。

请童鞋们看看下面这段代码

看完这段代码后有何感想?有人会问div是什么?class是什么?con是什么? Style 是什么?


Div :是网页布局标签。

Class:规定元素的类名(classname)。就是给某一个div起名字。

Ps :div 的名字可以随便起。

< div class="con"> 是说我定义了一个div并且给这div起了一个名字叫"con"

Style:位于 head 部分。它的出现是要我们告诉浏览器我要给一个叫con的东西规定样式。比如。一个叫con的div它的宽是多少?高是多少?颜色是什么?

好了 ,童鞋们赶紧按照上面的代码试一试把。

网页设计自学平台微信公众号:关注后即可获得免费入门Web前端视频合集

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,805评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 背景 一方面随着项目组件化的进行,越来越多的模块需要输出更为详细与易理解文档,而在描述文档的时候或多或少会加入类与...
    Bugfix阅读 3,720评论 3 8
  • 不是爱风尘,偏在风尘中。经过江湖风尘的吹打雕琢,你可还是当初那副渴望持剑屠龙的少年模样?干了这碗酒,涤荡这满身风尘...
    崖畔听风阅读 374评论 0 0
  • 大家好,我是悠贝南山保利绘本馆的真真老师。今天要给大家推荐的绘本是《最温暖的家》。 什么是最温暖的家?答案因人而异...
    苟苟的脚步_绘本与成长阅读 17,839评论 0 4