您的位置: 首页  >  文章  >  淘宝静态页面（六）——首屏内容（右）

淘宝静态页面（六）——首屏内容（右）

分类: 文章 • 2024-02-19 15:43:52

3-7淘宝首屏页面快做完了，感觉自己收获蛮多的，体会到一丝丝项目开发的流程与套路。之后就看自己能完善到什么程度了…
首先是框架的划分，上面是一个用户区域，往下一条举报，一个公告栏，一个图标区域，一个app展示的区域。

  1. 用户区域
    淘宝静态页面（六）——首屏内容（右）淘宝静态页面（六）——首屏内容（右）
    淘宝静态页面（六）——首屏内容（右）
    头像居中是margin:0 auto;方形图片变成圆形是使用了border-radio:50%,且overflow:hidden,另外就是到了有文字的标签时，不仅考虑字体大小，还有行高，利用父级font-size:0消除行内联元素的间隙，不受代码中分隔符的影响。
    淘宝静态页面（六）——首屏内容（右）雪碧图 css精灵background-position 减少http请求 消耗带宽
    background: #ffe4dc url(’…/images’) 0 -528px no-repeat;登录按钮比较其他两更宽一丢丢。
    淘宝静态页面（六）——首屏内容（右）

  2. 举报以及公告区域
    淘宝静态页面（六）——首屏内容（右）淘宝静态页面（六）——首屏内容（右）从这儿我们可以借鉴以后的小图标用span或i标签
    淘宝静态页面（六）——首屏内容（右）
    vertical-align是定义行内元素的垂直对齐方式，说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。
    淘宝静态页面（六）——首屏内容（右）
    公告区域是一个选项卡，猛然发现一个问题，那就是li下一堆a标签，什么鬼！修改一下，先设置ul的text-align水平居中，然后设置li display:inline-block,把上面的代码修改即可！
    淘宝静态页面（六）——首屏内容（右）
    由于公告栏下面的内容时而三块，时而四块，所以给他一个class：item设置样式width：100%，四个的时候就是一定的宽度，超出部分隐藏。

  3. 图标区域
    淘宝静态页面（六）——首屏内容（右）淘宝静态页面（六）——首屏内容（右）ul与table 在这都可以。但是table更符合标签语义化
    table{border-collapse:collapse}中间重叠的border只有一个
    th,td{padding:0}
    table-layout:fixed定义列宽的计算方式，根据表格宽度自动计算列宽，每列的宽度均分这个列表宽度，这又用到了雪碧图！
    淘宝静态页面（六）——首屏内容（右）

  4. APP区域
    淘宝静态页面（六）——首屏内容（右）
    由于一些图片是网上找的，淘宝首页改版了，没法提取，所以尺寸上多少存在一些问题淘宝静态页面（六）——首屏内容（右）
    小区域内的title用h2,利用浮动更多靠右。
    淘宝静态页面（六）——首屏内容（右）
    首先将ul text-align设置居中，在将li display:inline-block排布，利用width实现两行五个规则排布！都是套路…
    淘宝静态页面（六）——首屏内容（右）
    webp谷歌公司发明的格式体积可以很小，清晰度不变，节省带宽，只能用于网页 但是IE不支持 囧！为了兼容性，我只好转换了，但是人家淘宝是做了一个判断，要是你用谷歌，就是用webp，要是其他浏览器，则是转换后的jpg或其他格式。还存在一个问题：
    为什么base标签还会影响我的页面居中效果，也不是浏览器问题呀！
    截止目前的效果图：淘宝静态页面（六）——首屏内容（右）

相关推荐