PC端品优购网页制作（common.css）2

正式制作网页

网站首页一般都是使用index命名，比如index.html或index.php

我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面

常用模块类名命名

可参考菜鸟教程

快捷导航shortcut制作

• 通栏的盒子命名为shortcut 是最快捷导航的意思，注意这里的行高，可以继承给里面的盒子

• 里面包含版心的盒子

• 版心盒子里面包含1号左侧盒子左浮动

• 版心盒子里面包含2号右侧盒子右浮动

header 制作

1. header 盒子必须要有高度

2. 1号盒子是logo标志定位

3. 2号盒子是search 搜索模块定位

4. 3号盒子是hotwroks 热刺模块定位

5. 4号盒子是shopcar 购物模块

   • count统计部分用绝对定位做

   • count统计部分不要给宽度，因为可能买的件数比较多。让件数撑开就好了。给一个高度

   • 一定要注意左下角不是圆角，其余是三个圆角

购物车前面的图标可理由伪类元素实现它

 

LOGO SEO 优化

1. logo里面首先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要

2. h1 里面再放一个链接a(属于行内元素改成块级元素dispaly: block)，可以返回首页的，把logo的背景图片给链接即可 在CSS样式里添加图片注意路径的来源 上级../

3. 为了搜索引擎收录我们，里面链接要放文字（网站名称），但是文字不要显示出来

   • 方法1：text:index一道盒子外面（text-indet:-9999px)，然后overflow:hidden 淘宝做法

   • 方法2：直接给font-size:0; 就看不到文字了，京东的做法

   1. 最后给链接一个title属性，这样鼠标放到 logo上就可以看见提示文字了

 

 

nav 导航制作

• nav 盒子通栏有高度 而且有个下边框

• 1号盒子左侧浮动 dropdown

• 2号盒子左侧浮动 navitems 导航栏组

• 1号盒子有讲究，根据相关性里面包含dt dd两个盒子

为了提升用户使用感，在鼠标离文字稍微远的地方也能点击页面形成小手，给小li 中 a添加padding

 

dispaly: none;隐藏的意思

footer 底部制作

• footer页面底部盒子通栏一个高度和灰色的背景

• footer 里面有一个版心

• 版心里面包含1号盒子，mod_service 是服务模块，mod是模块的意思

• 版心里面包含2号盒子，mod_help是帮助模块

survice 给图标制作浮动，即可实现文字包围图片的效果