网站TDK T 标题 D 描述 K 关键字

<title>小米商城 - 小米CC9、小米MIX 3、Redmi K20，小米电视官方网站</title>
<meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9、小米9、小米MIX 3，Redmi 红米系列Redmi K20 Pro、Redmi Note 7，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持。">
<meta name="keywords" content="小米,小米9,小米cc9,Redmi K20,Redmi Note 7,小米MIX3,小米商城">

2:代码规范：

1：文件命名规范

• 由小写字母+_构成即可 不能包含特殊字符
• 如果多个单词组成，两个单词用全拼 翻译过来，如果是多个单词组成则由首字母代表
  • 用户反馈页 ufeedback_page
• 同一模块起一个的前缀 首字母相同 方便查找 插入 修改 删除

2：图片的命名规则

• 图片名字由两个单词构成 功能_某一

3：CSS命名规范

<mark>css书写规范，建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性</mark>

常见命名

	
头：header
  内容：content/container
  尾：footer
  导航：nav
  侧栏：sidebar
  栏目：column
  页面外围控制整体布局宽度：wrapper
  左右中：left right center
  登录条：loginbar
  标志：logo
  广告：banner
  页面主体：main
  热点：hot
  新闻：news
  下载：download
  子导航：subnav
  菜单：menu
  子菜单：submenu
  搜索：search
  友情链接：friendlink
  页脚：footer
  版权：copyright
  滚动：scroll
  内容：content
  标签页：tab
  文章列表：list
  提示信息：msg
  小技巧：tips
  栏目标题：title
  加入：joinus
  指南：guild
  服务：service
  注册：regsiter
  状态：status
  投票：vote
  合作伙伴：partner
(二)注释的写法:
  /* Footer */
  内容区
  /* End Footer */
(三)id的命名:
  (1)页面结构
  容器: container
  页头：header
  内容：content/container
  页面主体：main
  页尾：footer
  导航：nav
  侧栏：sidebar
  栏目：column
  页面外围控制整体布局宽度：wrapper
  左右中：left right center

  (2)导航
  导航：nav
  主导航：mainbav
  子导航：subnav
  顶导航：topnav
  边导航：sidebar
  左导航：leftsidebar
  右导航：rightsidebar
  菜单：menu
  子菜单：submenu
  标题: title
  摘要: summary

  (3)功能
  标志：logo
  广告：banner
  登陆：login
  登录条：loginbar
  注册：regsiter
  搜索：search
  功能区：shop
  标题：title
  加入：joinus
  状态：status
  按钮：btn
  滚动：scroll
  标签页：tab
  文章列表：list
  提示信息：msg
  当前的: current
  小技巧：tips
  图标: icon
  注释：note
  指南：guild
  服务：service
  热点：hot
  新闻：news
  下载：download
  投票：vote
  合作伙伴：partner
  友情链接：link
  版权：copyright\

字体图标

1:下载 https://www.iconfont.cn

加入购物车 —> 下载代码—> 登录–>下载

2:解压放入项目目录下 静态资源文件夹下 assets

用法见解压包demo.html

common.css样式书写

1：编码

@charset:"utf-8" *{
   
        margin:0;
        padding:0;
}

body{
   
    font:normal 400 12x/1.5 
}
a{
   
    text-decoration:none;	
    color:#b0b0b0
}
img{
   
    //取消ie8下推按边框
    bording:0;
    //取消图片下间隙
    vertical-align：top
    
}

ul li,ol li{
   
    list-style:none;
}
em,i,strong,b{
   
    font-style:none;
    font-weight:400;
}

盒子阴影属性

盒子阴影属性名称
box-shadow:0px 0px 10px 0px #000 inset

1:水平方向的阴影大小
2：垂直方向的阴影大小
3：阴影模糊距离
4：阴影的尺寸
5：颜色
6:内外阴影 外阴影 outset  内阴影inset

文字阴影

text-shadow:

1:水平方向的阴影大小
2：处置方向的阴影大小
3：阴影模糊距离
4：阴影的尺寸
5：颜色
6:内外阴影 外阴影 outset  内阴影inset