header头部模块搭建
header盒子必须有高度:logo标志定位、search搜素模块定位、hotwords热词模块定位、shopcar购物车模块
LOGO SEO优化
1.logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要
2.h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可
3.为了让搜索引擎收录我们,我们链接里面要放文字(网站名称),但文字不要显示出来【破案:小米商城图标就是这样!!!】
文字隐藏:方法1:text-intend移到盒子外面(text-intend:-9999px),然后overflow:hidden(溢出隐藏),淘宝的做法
方法2:直接给font-size:0; 就看不到文字了,京东的做法
4.最后给链接一个title属性,这样鼠标放到logo上就可以看到提示文字了
search搜素模块定位
加边框的div:input搜索框+button
行内块元素之间有缝隙,加浮动就可以了
shopcar购物车模块
count统计部分用绝对定位做[子绝父绝](不给宽度,因为买的件数比较多,让件数撑开就好了,给高度,左下角不是圆角,其余三个角是,写法:border-radius:7px 7px 7px 0;)
会继承父盒子行高,需要更改
左对齐
nav导航制作
nav盒子高度+下边框:dropdown左侧浮动+navitems导航栏组左侧浮动
dropdown左侧浮动
根据相关性包含.dt和.dd两个盒子
链接里面浏览器已经默认写好了样式,要想改变必须得直接在a标签里修改
navitems导航栏组左侧浮动
给a左右padding值:a的范围大了,用户点击更方便
footer底部制作
footer页面底部盒子通栏(给高度和一个灰色背景):mod_service服务模块+mod_help帮助模块+mod_copyright版权模块
mod_service服务模块
浮动后文字围绕(前世今生)
使用精灵图,减轻服务器压力:用ps打开,窗口→信息(得到坐标)【得到大概坐标之后,可以在浏览器调整】