2022-07-13

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打开,窗口→信息(得到坐标)【得到大概坐标之后,可以在浏览器调整】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我...
    __method__阅读 1,196评论 0 0
  • 网站的首页一般都是使用index命名,比如index.html或者index.php.我们开始制作首页的头部和底部...
    皮皮章阅读 2,713评论 0 0
  • 家有一老,犹如一宝 家有一老,犹如一宝。的确,尽管年纪已古稀,依旧是个“妈宝男”。 老爹的老爸管老爹叫“糊弄局局长...
    咬文嚼字的老鼠阅读 1,644评论 0 0
  • 今天阳光明媚,万里无云,我和妈妈收到了一个快递。他表面上非常大,比我的脸还要大,是棕红色的箱子。我蹦蹦跳跳...
    景妙99阅读 1,469评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,423评论 2 66