基础学习9，10，11 关于pc端项目

项目准备

网站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 文件命名规则

​ 文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

a. HTML的命名原则
引文件统一使用index.htm index.html index.asp文件名（小写）
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：
关于我们 \ aboutus
信息反馈 \ feedback
产 品 \ product

如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；
每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm index.html index.asp；

b. 图片的命名原则

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
标志性的图片取名为： logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如：menu1_on.gif menu1_off.gif

css书写规范

6.css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的 top,right,bottom,left）、display、visibility、overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：font、color、text-align、text-decoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等.我所列出的这些属性只是最常用到的, 并不代表全部;

7. 书写代码前, 考虑并提高样式重复使用率;
8. 充分利用html自身属性及样式继承原理减少代码量

常见命名

	
头：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

3;

• 在头部通过link标签引入阿里的图标样式文件 iconfont.css

• unicode 引入

  写到公共样式里就行
  @font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  使用 : iconfont类是阿里字体图标官方类 不能删除 不能换位置
  <span class="iconfont">&#x33;</span>
  

  优点:兼容性较好 兼容ie6+ 缺点:容易写错 并且图标含义不清楚

• font class方式

  <link rel="stylesheet" href="./iconfont.css">
  <span class="iconfont icon-xxx"></span>   写自己想要引入的类名即可
  

  优点: 通过类名就能知道插入的图标的类型 缺点:兼容性略差 ie8+

• symbol方式

  <script src="./iconfont.js"></script>  放在头部就行  路径换成自己的
  <style>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  </style>  粘贴到样式文件里
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
  </svg>  插入图标 写入结构里 xxx换成引入的图标名字
  
  

  优点:可以引入颜色图标 缺点:兼容性太差 ie9+

盒子阴影属性

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

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

文字阴影

text-shadow: 
1: 水平方向的阴影大小  + 右侧阴影
2:垂直方向的阴影大小  + 下侧阴影
3:阴影模糊距离
5:颜色

  <style>
    .box {

        width: 300px;
        height: 300px;
        margin: 50px auto;
        background-color: red;
        box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3)  ;
    }
    .tu ,.au{
        width: 400px;
        height: 200px;
        background-color: #21B169;
        color: #21B169;

        font-weight: 700;
        font-size: 80px;
    }
    .tu {
        /* 右侧和下侧 ,  左侧 以及上侧 */
        text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
    }
    .au {
        /* 右侧和下侧 ,  左侧 以及上侧 */
        text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;

    }
    </style>

头部

logo 部分

 <div class="logo">
                <!-- h1可以加大权重  文字信息会被捕捉到  -->
                <h1>
                    小米商城 - 小米CC9、小米MIX 3、Redmi K20，小米电视官方网站

                    <a href="#">

                        <img src="./image/mi-logo.png" alt="">
                    </a>
                </h1>
</div>

利用字体大小为0以及缩进属性把文字隐藏掉

BUG 搜索按钮

1:<input type="submit"    value="&#xe63d;" id="btn">  &#xe63d; 放大镜unide编码
#btn:hover {
bgc:#ff6700;
color:#fff;
}


2:<a><i class="iconfont icon-fangdajing"></i></a>

显示和隐藏

display:block  显示  display:none 隐藏    不占位置


visibility:visible 看的见/ hidden看不见 隐藏;   占据原来的位置

鼠标样式

 /* corsor : default 默认 
        text 文本
        help 帮助  问号
        crosshair   十字架  瞄准

        move 拖拽 

        pointer 小手 
        url('正常路径'),auto .jpg .ico .gif
        
        */

        cursor: url(./image/favicon.ico),auto;

小箭头(双伪元素法)

  .box {
            position: relative;
            width: 400px;
            height: 400px;
            border:2px solid deeppink;
            margin: 20px auto;

        }
    .tran::after ,.tran::before {
        content: '';
        position: absolute;
        left: 50%;

       
        width: 0px;
        height: 0px;
      
        border-width: 50px;
        border-style:solid;
        border-color:transparent  transparent   red transparent;
    }
    .tran::after {
        top:2px;
        border-color: transparent  transparent   #fff transparent;
        
    }

透明度属性

    <style>
    .a {
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
       
        /* deeppink 255,20,147 */
        background-color: deeppink;
        font-size: 25px;


    }
    .box1 {
        background-color: rgba(255,20,147,0.3);

    }
    .box2 {
        opacity: 0.3;
    }
    
    </style>
</head>
<body>
    <p>背景透明,文字不透明</p>
    <div class="box1 a">我是文本</div>

    <hr height="3px" color="green">

    <p>背景和文字透明</p>
    <div class="box2 a">我是文本</div>
</body>
</html>

ie8浏览器兼容问题解决

ie9以上包含ie9支持透明opacity属性 ie8下不支持opacity支持ie专属滤镜

ie8下包含ie8不认识rgba这个属性 就意味着在ie8下不能通过rgba()实现背景透明 文字不透明 解决方法如下 ⏬

1:文字和背景一起透明

其他浏览器: opacity:0.3 ; 0-1

ie的专属透明度滤镜

 filter:Alpha(opacity=30);alpha 透明度   0-100的整数
*zoom:1; // ie6 ie7触发haslayout 去支持透明滤镜

2:背景透明,文本内容不透明

?不能用rgba()属性 因为ie8不认识这个属性

1:把文本和背景盒子分离开

原来的结构

<div>文字文字</div>

现在的兼容结构

<div><p>文字文字</p></div>

2:给父元素加静态定位 position:static 给子元素添加相对定位即可

    <style>
      .a {
          width: 200px;
          height: 200px;line-height: 200px;
          text-align: center;
          font-size: 30px;
         
      }
      .box1 {
          /*   不认识这个东西  只认识自己的透明滤镜background-color: rgba(255,20,147,0.3); */
         
          background-color: rgb(255,20,147);
          filter:Alpha(opacity=30);

          position: static;




      }
      .box2 {
          /* 其他浏览器而言的 */
          opacity: 0.3;
          /* ie8而言 */
          filter:Alpha(opacity=30);
          background-color: rgb(255,20,147);
      }
      .box1-text {
          /* 阻断父元素透明度传递给子元素 */
          position: relative;
      }
    
    </style>
</head>
<body>
    <!-- 透明: 
     背景透明 文本不透明   rgba(0-255,0-255,0-255,0-1)
     背景和文本同时透明  opacity : 0-1 1不透明 0完全透明
    
    -->

<p> ie8背景透明 文本不透明</p>

<div class="box1 a">
    
   <p class="box1-text">文字rgba</p> 

</div>




<p>ie8解决背景和文本同时透明  ie的透明度专属滤镜 </p>

<div class="box2 a">文本 opacity </div>
</body>
</html> filter:Alpha(opacity=30);alpha 透明度   0-100的整数

IE专属滤镜 filter:Alpha(opacity=x)

1. 仅支持IE6、7、8、9，在IE10版本被废除
2. 在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha
3. 在ie8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明 ◀️背景透明 文字不透明

ie6,ie7,ie8不支持rgba(0,0,0,.3)属性 ie9以上都支持

文本溢出处理

单行文本溢出

overflow: hidden; 
text-overflow:ellipsis;  //clip裁剪，ellipsis省略号
white-space: nowrap; //不换行

多行文本溢出

方法1:

display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; //三行文本溢出
overflow: hidden;
text-overflow: ellipsis;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

方法2

div { 
    position: relative; 
    line-height: 20px; 
    max-height: 40px; 
    overflow: hidden; 
} 
div:after { 
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px; 
    background: -webkit-linear-gradient(left, transparent, #fff 55%); 
    background: -o-linear-gradient(right, transparent, #fff 55%); 
    background: -moz-linear-gradient(right, transparent, #fff 55%); 
    background: linear-gradient(to right, transparent, #fff 55%);
} 

限制宽高，再在div后面加一个有透明度“…”
弊端 那就是 【未超出行的情况下也会出现省略号】 只能结合JS 进行优化该方法了。

注：
1、将height设置为line-height的整数倍，防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、兼容ie8需要将::after替换成:after。ie8 :after :before