品优购项目总结

chxyhhh

于 2022-03-21 14:12:24 发布

阅读量585

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/chxyhhh/article/details/123632827

版权

毕竟是第一个前端，需要总结学习的地方还是很多

4.网页中排列整齐的效果基本都用ul>li>a

10.图片、表单等与旁边文字对齐方式：vertical

11.网站格式初始化

12.清除浮动

13.网站底部相关链接等显示

14.text-align-center使用

一、复习

1.字体图标的使用

（1）上icomoon官网选择需要的图标download到本地后，将解压后的fonts文件放入项目根目录下，如要加入新的图标，则重新下载重新覆盖。

（2）打开style.css文件，复制到display:block;为止，放入网页css文件中，如下：

/* 声明字体图标 */
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?omaf0z');
    src:  url('fonts/icomoon.eot?omaf0z#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?omaf0z') format('truetype'),
      url('fonts/icomoon.woff?omaf0z') format('woff'),
      url('fonts/icomoon.svg?omaf0z#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

（3）使用::before/::after放在文字之前/之后，在demo.html中找到字体图标编码，放入content中，记得加转义符'\'，如下：

.arrow-icon::after {
    content: '\e900';
    //调整位置
    margin-left: 6px;
    //字体种类
    font-family: 'icomoon';
}

2.导入css文件

<!-- 导入初始化模块 -->
    <link rel="stylesheet" href="base.css">

3.文字中添加空格：  记得分号

<li>品优购欢迎你！&nbsp;</li>

4.网页中排列整齐的效果基本都用ul>li>a

            <div class="navitems">
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                </ul>
            </div>

5.box-sizing

盒子具体尺寸是否包括margin、border、padding值？

具体参考：CSS解读之box-sizing属性_笔心的博客-CSDN博客

6.精灵图

坐标一般为负

background: url(images/icons.png) no-repeat 0 0

7.文字溢出省略号显示

.news_bd ul li {
    height: 24px;
    line-height: 24px;
    //溢出部分隐藏
    overflow: hidden;
    //所有文字一行显示
    white-space: nowrap;
    //省略部分用省略号表示
    text-overflow: ellipsis;
}

效果如下：

8.子绝父相

9.选中第几个孩子

前三个： .recom_bd li:nth-child(-n+3)

最后一个： .sk_con ul li:last-child

4的倍数： .sk_bd ul li:nth-child(4n)

偶数个： .shortcut .fr ul li:nth-child(even)

奇数个： .shortcut .fr ul li:nth-child(odd)

10.图片、表单等与旁边文字对齐方式：vertical

vertical-align:top;

11.网站格式初始化

/* 所有标签内外边距清零 */
* {
    margin: 0;
    padding: 0;
}

/* em和i的斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li前面的小圆点 */
li {
    list-style: none;
}

/* border0兼容性，图片有链接时会有边框出现 */
/* 取消图片底部空白缝隙 */
img {
    border: 0;
    vertical-align: middle;
}

/* 鼠标经过button时变成小手 */
button {
    cursor: pointer;
}

/* 超链接文字的颜色及下划线 */
a {
    color: #666;
    text-decoration: none;
}

/* 鼠标经过超链接文本颜色变红 */
a:hover {
    color: #c81623;
}

/* button和表单字体统一 */
button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    /* 去除默认的灰色边框 */
    border: 0;
    /* 去除点击后出现的focus */
    outline: none;
}

body {
    /* 抗锯齿性，让文字显示更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color: #666;
} 

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: "";
    height: 0;
}

.clearfix {
    *zoom: 1;
}

12.清除浮动

参考：清除浮动的最常用的四种方法，以及优缺点_h_qingyi的博客-CSDN博客_清除浮动

13.网站底部相关链接等显示

使用dl、dt/dd

                <dl>
                    <dt>服务指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>联系我们</dd>
                    <dd>用户协议</dd>
                    <dd>加入我们</dd>
                    <dd>友情链接</dd>
                </dl>

效果如下：

14.text-align-center使用

（1）块级元素下使用text-align: center，使得其文本内容居中对齐

（2）块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐

（3）块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐

参考：细谈text-align: center_番茄炒蛋加鸡腿的博客-CSDN博客_text-align:center

与<center>区别参考：text-align:center 与 <center> 的区别_醋酸菌HaC的博客-CSDN博客_text-align:center

二、新学知识

1.网站favicon图标

显示在网站标签页的网站名前，为ico格式文件，将ico文件放入项目根目录下，并在html文件中导入图标

<!-- 导入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico">

2.TDK三大标签SEO优化

SEO（Serach Engine Optimization）搜索引擎优化，在搜索引擎中网站的权重，决定了在搜索关键字时网站的排名是否靠前。

SEO目的是通过对网站的深度优化，帮助网站获取免费流量，提升网页排名。

（1）title

格式：网站名-网站介绍（一般不超过30字）

（2）description

网站的具体形容，字数更多

（3）keywords

网站关键词

具体格式如下：

<title>品优购-综合网购首选，正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
    <meta name="description"
        content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <!-- 关键字 -->
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />

（4）logo->h1>a，a中背景为logo图片，title为网站名

<!-- 1.logo -->
        <div class="logo">
            <!-- 
                1.logo里面先放h1标签，提高权重，搜索引擎中靠前
                2.h1里面再放一个链接，可以返回首页，链接里面放文字，但文字不能显示
             -->
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>