CSS 淘宝页面布局问题优化

  上次在摹写淘宝注册界面的时候遇到的问题已经找到,通过这次布局,需要注意一些整体布局的小知识点:

  1,导航栏一般宽度都是100%,再填充浅色背景色,下边框的颜色可以加深一点,方便和后面的板块区分开来,在导航栏里面,内容部分要固定宽度,在设置全局的外边距,上下为0,左右居中,(margin:0px auto)

2,接下来就是标题(header部分),标题部分里面的内容要和导航栏一样要的宽度,而且根据需要的样式,也要设置整体的位置,

3,接下来就是内容部分,内容部分的话需要和之前的部分一样设置相关的宽度,高度的话不必要这只,里面的内容会将整个主体部分撑开来,最主要就是布局,整体不得话需要在HTML当中就写好,虽然有很多种方式可以实现于鏊的效果但是需要思考的问题就是,日如何才能使代码最优化(代码最少)的情况下实现你想要的效果。

4,最后就是footer部分,整体的用的最多的就是标签p a span 接着在设置字体的样色,字号,排版样式等等。

        好了,接下来就看看改进后的淘宝 注册界面 吧:


接下来就是代码:

   

样式表


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,317评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,234评论 25 708
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,198评论 0 2
  • 在4月底的时候,朋友圈被“丧茶开了快闪店”这一话题席卷,饿了么与网易联合将年度网络热语“丧茶”落了地,着实让爱排队...
    锐裘品牌不周刊阅读 1,982评论 1 4
  • 1.暗示 仅仅只靠毅力的坚持真的是件很枯燥的事情,但是加入一些积极的暗示或者是奖励,会使这个过程变得容易一些,我们...
    爱胡萝卜的羊阅读 164评论 0 0

友情链接更多精彩内容