一个常见的手机端页面开发

完成的事

  1. bananer图的设置:背景图片的设置背景的模糊化和其他效果
  2. 页首页脚固定,中间内容滑动的布局。overflow-y的使用
  3. 竖杠,横杠的控制
  4. 利用float布局图文混排
  5. flex布局的使用。flex语法
  6. 大体了解了下css代码规范css编码规范

解决的问题

  1. 以前一直以为只有块级元素才能使用盒子模型,其实行内元素也可以,可以用来画竖杠,垂直居中等等。
  2. 中间页面无法滑动的问题,是因为中间页面未独立于固定定位的页面,使固定定位的元素覆盖了其内容,无法出现滚动条。可以考虑使用相对定位使中间内容独立出来
  3. 缩放扩展页面,页面小于内容,内容溢出,页面过大,显示页面不再扩张,可以考虑给父容器使用min-width和设置width:100%

仍有的困惑

  1. flex布局仍未了解透彻,flex:1,inline-flex一知半解,考虑在以后的学习中不断提高认识。
  2. rem是怎么实现自适应的,rem是相对根元素字体大小的单位,根元素字体大小可以随页面自适应吗?
  3. vw,vh的应用有些麻烦
  4. nginx网页可以通过电脑访问,但不能通过手机访问了,以前还行

开发步骤

  1. html骨架构建,header main footer
  2. html细节构建,考虑各元素的位置,是否垂直/水平居中,横杠竖杠,考虑用什么标签实现,还是套个父容器。应当优先考虑带有语义化的标签,class命名也也要易懂,专业。
  3. css整体构建,去除元素自带的样式,设置好根元素的字体大小,
  4. css细节构建

    • 了解浮动的影响,浮动有利于图文混排,但是会破坏文档流
    • 了解定位的作用,优势大于浮动,不会破坏文档流,可以覆盖或被覆盖在元素上。定位主要是位置距离不太好控制。
    • 了解flex布局,flex布局有利于弹性变化,有利于一行排列,缺点暂且没发现

你可能感兴趣的:(css)