HTML+CSS / 综合项目笔记

• 文件夹：css fonts images upload（产品图） js
• 页面初始化 base.css
• 模块化，公共css样式common.css 如版心、清除浮动、页面文字颜色等

favicon.ico

1.制作图标，切成png图片 用比特虫转换成ico图标

2.放到网站根目录

3.引入 在head中引入 <link rel="shortcut icon" href="favicon.ico">

网站TDK三大标签SEO优化

seo优化search engine optimization即搜索引擎优化

提高网站自然排名（除去广告）

页面必须有三个标签来符合SEO优化

title description keyword

具体内容由seo人员提供，前端准备标签

title 网站标签

网站名-网站的介绍 尽量不要超过30个汉字

description 网站说明

简要说明网站是做什么的

<meta name="description" content="...."/>

keywords关键字

6-8个关键词，用英文逗号隔开，拳头产品写在前

常见类名命名

快捷导航栏 shortcut

头部 header

标志 logo

购物车 shopcar

搜索 search热点词 hotwords

导航 nav

导航左侧 dropdown 包含dd dt

导航右侧 navitems

页面底部 footer

页面底部服务模块 mod_service

页面底部帮助模块 mod_help

页面底部版权模块 mod_copyrightLOGO做法

焦点图 focus

快报 newsflash

LOGO写法

• 网页中的大logo一般用h1标签制作
• 在h1中添加a标签，可以返回首页，logo作为a的背景图片，
• 链接里面放文字，说明网站名称，设置text-indent：-9999px 或者text-size：0来隐藏文字
• 链接给title属性鼠标悬浮显示提示信息

小红点写法

不要定义宽度，让数字撑开盒子

用绝对定位 左对齐left

楼层区floor

不设定高度

tab栏切换

tab_list 放选项

tab_content 显示对应内容，有几个选项 就有几个内容，显示选中选项对应的内容，其余隐藏

注册表单

给表单一个父盒子 设置宽度

设置margin：0 auto；居中对齐

用小li制作表单

水平右对齐 给宽度 用text-align：right；