Mao-Design的博客

外观

1.小案例

2249字约8分钟

2024-12-02

初始化CSS代码

不同浏览器对标签的默认值也就不同，为了消除不同浏览器之间的差异，所以我们需要对CSS进行初始化设置

Unicode编码：

当表示中文字体的时候，可以使用Unicode编码代替，可以避免兼容性问题

  1. 宋体：\9ED1\4F53
  2. 黑体：\5B8B\4F53
  3. 微软雅黑：\5FAE\8F6F\96C5\9ED1
/* 清楚内外编剧 */
* {
    margin: 0;
    padding: 0
}

/* 取消 em , i 文字斜体 */
em,
i {
    font-style: normal
}

/* 取消小圆点 */
li {
    list-style: none
}


img {
    /* 在低版本的浏览器中，当图片可以点击时，会出现边框 */
    border: 0;
    /* 取消图片与边框之间的空隙 */
    vertical-align: middle
}

button {
    /* 当鼠标在按钮上显示小手图标 */
    cursor: pointer
}

a {
    color: #666;
    /* 取消下划线 */
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* 设置字体 */
    /* \5B8B\4F53 表示宋体，因为有些浏览器无法识别中文，所以通过编码的形式表示 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

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
}

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

开发导航栏注意点

在实际开发中不会直接使用a标签，而是用li包含a标签的做法（用无序列表）

  1. li + a 更加清晰
  2. 直接使用a标签容易使搜索引擎误判为有堆砌关键字的嫌疑（有被搜索引擎降权的风险），从而影响网站排名

注意点：

  1. 让导航栏一行显示，给 li设置浮动
  2. 导航栏可以不用设置宽度，便于将来添加内容
  3. 因为导航栏里面的文字不一样多，所以最好给a标签设置内边距来撑开盒子，而不是指定宽度

绝对定位居中盒子

使用绝对定位的盒子是无法使用 margin: 0 auto; 水平居中的，但可以使用如下小算法来进行居中

  1. 让绝对定位的盒子移动到父标签的中心位置，left: 50%;
  2. 然后在像右移动绝对定位盒子自身长度的一半
.a {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-color: orange;
}

.b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    background-color: pink;
}
<div class="a">
	<div class="b"></div>
</div>

目录/回到顶部按钮

先用固定定位移动到整个页面的 50% ，然后在用外边距移动（移动距离为内容页面宽度的一半多一点）

.a {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-color: orange;
}

.b {
    position: fixed;
    top: 20%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: 180px;
    background-color: pink;
}
<div class="a"></div>
<div class="b"></div>

鼠标经过视频时显示灰蒙版

.a {
    position: relative;
    width: 300px;
    height: 200px;
}

.a img {
    width: 100%;
    height: 100%;
}
/* 灰蒙版 */
.b {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    /* 透明黑色 加图片 不平铺 背景图片居中对齐 */
    background: #00000042 url("向上.png") no-repeat center;
}

/* 当鼠标经过a时，给a里面的b添加样式 */
.a:hover .b {
    /* 显示灰蒙版 */
	display: block;
}
<div class="a">
    <!-- 灰蒙版 -->
	<div class="b"></div>
	<img src="xmad_15603259571867_NGpLV.jpg">
</div>

CSS画三角形

.a {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-right: 50px solid pink;
    border-top: 50px solid orange;
    border-bottom: 50px solid blueviolet;
}

.b {
    width: 0;
    height: 0;
    /* line和font主要是用来解决兼容性问题的 */
    line-height: 0;
    font-size: 0;
    /** transparent: 透明 **/
    /** 边框粗细大小就是三角形的大小 **/
    border: 50px solid transparent;
    border-left-color: pink;
}
<div class="a"></div>
<div class="b"></div>

等腰三角

  • 顶部和底部是设置三角形的高度
  • 左边和右边是设置三角形的宽度（底部宽度）
div {
    width: 0;
    height: 0;
    margin: 300px auto;
    border-top: 200px solid purple;
    border-right: 200px solid yellow;
    /* border-left: 200px solid pink;
    border-bottom: 200px solid orange; */
}
<div></div>

border-top: 200px solid transparent;
border-right: 200px solid yellow;

border-right: 100px solid yellow;
border-top: 200px solid purple;
border-left: 100px solid olive;

秒杀价状态栏

.a {
    width: 200px;
    height: 20px;
    line-height: 20px;
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    margin: 100px auto;
}

.a .b {
    position: relative;
    /* 浮动的元素具有行内块元素的特征 */
    float: left;
    width: 100px;
    height: 20px;
    line-height: 20px;
    margin-right: 25px;
    background-color: red;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.a .b i {
    position: absolute;
    top: 0;
    right: 0;
    /* 设置小三角 */
    border-left: 10px solid transparent;
    border-bottom: 20px solid rgb(255, 255, 255);
}

.a .c {
    color: #bdbdbd;
    font-size: 12px;
    line-height: 20px;
    /* 删除线 */
    text-decoration: line-through;
}
<div class="a">
    <span class="b">
        1999￥
        <i></i>
    </span>
    <span class="c">3000￥</span>
</div>

消除图片底部小白条

<div>
    <img src="xmad_15603259571867_NGpLV.jpg">
</div>

解决方法：

  1. 给图片添加 vertical-align: top/middle/bottom; （推荐）
  2. 将图片转换为块级或行内块元素

多余部分文字用省略号显示

单行

要达到这种效果，则要满足下面三个条件：

  1. 文字不能换行
  2. 超出部分要省略
  3. 添加样式，用省略号代替超出部分
p {
    width: 130px;
    height: 200px;
    /* 强制文本在一行内显示 */
    white-space: nowrap;
    /* 设置溢出部分隐藏 */
    overflow: hidden;
    /* 用省略号代替溢出部分 */
    text-overflow: ellipsis;
    border: 1px solid red;
}
<p>
    nihaoshijie xianisdsdfsfasf
</p>

多行（了解）

当到特定行时，溢出部分会用省略号显示，但也就只有那一行用省略号显示，后面多出来的文字如果你不想让其显示，则可以把盒子的高度设置小一点

该方法有兼容性问题，所以该效果一般是由后端来实现的

p {
    width: 130px;
    height: 200px;
    /* 设置溢出部分隐藏 */
    overflow: hidden;
    /* 用省略号代替溢出部分 */
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型 */
    display: -webkit-box;
    /* 第二行的时候才用省略号 */
    -webkit-line-clamp: 2;
    /* 排列方式 */
    -webkit-box-orient: vertical;
    border: 1px solid red;
}
<p>
    nihaoshijie xianisdsdfsfasfnihaoshijie xianisdsdfsfasf
</p>

合并盒子左右边框

li {
    float: left;
    width: 100px;
    height: 200px;
    border: 1px solid #893537;
    margin-left: -1px;
    list-style: none;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

鼠标经过盒子改变边框颜色

li {
    float: left;
    width: 100px;
    height: 200px;
    border: 1px solid red;
    margin-left: -1px;
    list-style: none;
}

ul li:hover {
    position: relative;
    border: 1px solid orange;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

因为相对定位会压住其他的标准流或者浮动元素，并且原来的位置也还存在，所以加上相对定位就不会出现有一条边的线被别的盒子压住的情况

未添加相对定位

添加相对定位

其他情况

如果有特殊情况，就是所有的li标签都设置的有相对定位

直接用z-index属性来提高层级

li {
    /* 如果有特殊情况，就是所有的li标签都设置的有相对定位 */
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
    border: 1px solid red;
    margin-left: -1px;
    list-style: none;
}

ul li:hover {
    /* 直接用z-index属性来提高层级 */
    z-index: 1;
    border: 1px solid orange;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

文字环绕图片

文字元素会环绕着浮动元素显示

* {
    margin: 0;
    padding: 0;
}

.a {
    width: 500px;
    height: 200px;
    background-color: orange;
    padding: 20px;
    margin: 200px auto;
}

.b {
    float: left;
    height: 100%;
    margin-right: 15px;
}

.b img {
    height: 100%;
}
<div class="a">
    <div class="b">
        <img src="xmad_15603259571867_NGpLV.jpg" alt="">
    </div>
    <p>English belongs to the Indo-European family of languages and is therefore related to most other …
        Modern English is analytic (i.e., relatively uninflected), whereas Proto-Indo-European, the ancestral tongue
        of most of
    </p>
</div>

页码

* {
    margin: 0;
    padding: 0;
}

.a {
    /* 文字居中 */
    text-align: center;
    margin: 300px auto;
}

.a a {
    width: 40px;
    height: 40px;
    /* 行内快元素 */
    display: inline-block;
    background-color: rgb(214, 214, 214);
    border: 1px solid #d3c8c8;
    /* 行高 */
    line-height: 40px;
    color: #000000;
    /* 文字居中 */
    text-align: center;
    /* 取消下划线 */
    text-decoration: none;
    font-size: 14px;
}

/* 取消背景 */
.a .a1 {
    border: 0px;
    background-color: #00000000;
    font-size: 14px;
}

/* 单独设置宽度 */
.a .ye {
    width: 100px;
    text-align: center;
}

/* 设置表单 */
.kuang {
    width: 80px;
    height: 40px;
    background-color: #d3c8c8;
    /* 禁止表单轮廓 */
    outline: none;
    border: 2px solid #e2e2e2;
}

.kuang:hover {
    background-color: #7e7e7e;
}
<div class="a">
    <a href="#" class="ye">&lt;&lt;上一页</a>

    <a href="#" class="a1">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#" class="a1">...</a>
    <a href="#">10</a>

    <a href="#" class="ye">下一页&gt;&gt;</a>
    <input type="text" class="kuang">
    <input type="button" value="提交" class="kuang aa">
</div>