企业开发中网页如何用div+css布局!国民老实人九轩告诉你

导语:本代码是我个人按照图纸所打出来的代码,细节上可能和大家的方法有些不同,但整体思维上均是企业开发布局思维,国内大部分网站都是采用这种布局方式。文章来源:国民老实人九轩博客

设计图纸:

设计图.png

九轩代码:

Markup

国民老实人-九轩|网站首页布局演示250*100

150*50
650*50
320*400
400*200
400*140
240*350650*40980*40

说明:本文图片来自互联网,代码则是我纯手打的,和别人的布局可能有一些差别,但这则是大部分网站网页布局的方式方法

  • 1、看到设计师给的开发图纸后,需要有一个大体的设计思维
  • 2、先用div从上而下,从左至右的顺序布局
  • 3、从上至下采用布局的标准流,从下至上采用浮动流
  • 4、给所有div设置颜色样式,内容样式,宽度高度
  • 5、此时需要调整每个div之间的间隙,上下间隙我们直接调整外边距为10px即可
  • 6、网页整个页面居中我们直接设置body标签为margin:0 auto;属性即可
  • 7、还有一个知识点则是整个网页的文本居中我直接采用通配符*选择器设置text-align: center;

复制

复制

九轩效果图:

效果图.png

你可能感兴趣的:(企业开发中网页如何用div+css布局!国民老实人九轩告诉你)