初学日记-小米商城小米

小米商城静态页面仿写。(工具:CSS+HTML)

  1. 有版心,有背景色

  1. 分骨架,头-导航-内容-脚

  1. 填充框架

  1. 加样式

  1. 加伪类效果

使用到的技巧有:

  1. 列表浮动

  1. 绝对定位+display:none,做弹窗效果

  1. 指向小三角是绝对定位+边框效果

  1. 相对定位+margin做box抬起效果

  1. 侧边导航栏位置是相对于可视窗口的,故用position:fixed

  1. 特殊字体小标可在https://www.iconfont.cn中查找,下载并使用

  1. 做图中空白处效果,可以用一个有宽高的dt占位

dl>(dt+dd)*7, 第一个dl的dt无内容,dl不定义高度,设置float:left,第七个设置float:right,以占满版心。布局结束后,给dl的父盒子清浮动,以免下面的内容挤到dl区域下层。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部