正式制作网页
网站首页一般都是使用index命名,比如index.html或index.php
我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面
常用模块类名命名
可参考菜鸟教程
快捷导航shortcut制作
-
通栏的盒子命名为shortcut 是最快捷导航的意思,注意这里的行高,可以继承给里面的盒子
-
里面包含版心的盒子
-
版心盒子里面包含1号左侧盒子左浮动
-
版心盒子里面包含2号右侧盒子右浮动
header 制作
-
header 盒子必须要有高度
-
1号盒子是logo标志定位
-
2号盒子是search 搜索模块定位
-
3号盒子是hotwroks 热刺模块定位
-
4号盒子是shopcar 购物模块
-
count统计部分用绝对定位做
-
count统计部分不要给宽度,因为可能买的件数比较多。让件数撑开就好了。给一个高度
-
一定要注意左下角不是圆角,其余是三个圆角
-
购物车前面的图标可理由伪类元素实现它
LOGO SEO 优化
-
logo里面首先放一个h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要
-
h1 里面再放一个链接a(属于行内元素改成块级元素dispaly: block),可以返回首页的,把logo的背景图片给链接即可 在CSS样式里添加图片注意路径的来源 上级../
-
为了搜索引擎收录我们,里面链接要放文字(网站名称),但是文字不要显示出来
-
方法1:text:index一道盒子外面(text-indet:-9999px),然后overflow:hidden 淘宝做法
-
方法2:直接给font-size:0; 就看不到文字了,京东的做法
-
最后给链接一个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 给图标制作浮动,即可实现文字包围图片的效果
更多推荐
PC端品优购网页制作(common.css)2
发布评论