css学习2

葵hh

已于 2023-04-13 12:42:57 修改

阅读量267

点赞数

文章标签： css 学习 css3

于 2023-04-01 00:01:54 首次发布

本文链接：https://blog.csdn.net/m0_75047119/article/details/129886785

版权

css学习2---sp

css的复合选择器
css的元素显示模式
css的背景
css的三大特性
css的盒子模型
ps基本操作
圆角边框
盒子阴影
文字阴影
元素的显示与隐藏
css高级技巧

css的复合选择器

在css中，根据选择器的类型可分为基础选择器和复合选择器。
常用的包括：后代选择器，子选择器，并集选择器，伪类选择器。

后代选择器

又称包含选择器。

<!--选择元素1里面的所有元素2（后代元素）-->
元素1  元素2 { 样式声明 }

例如

ul li  { 样式声明 } /*选择ul里面所有的li标签元素*/

子选择器

<!--选择元素1里面的所有直接后代（子元素）元素2-->
元素1 > 元素2 { 样式声明 }

<!--选择div里面的所有最近一级p标签元素-->
div > p { 样式声明 }

并集选择器

可以选择多组标签，同时为他们定义相同的样式。
通常用于集体声明。

元素1，元素2 { 样式声明 }

<!--选择div和ul标签元素-->
div，ul  { 样式声明 }

伪类选择器

用于向某些选择器调价特殊的效果，有链接伪类，结构伪类等。
例如

：:hover，

链接伪类选择器

应该严格按照link，visited，hover，active的顺序声明。
记忆：love hate / lv 好。
因为a链接在浏览器中具有默认样式，所有我们在实际中都需要给链接单独指定样式。

/ * a是标签选择器 所有的链接 * /
a {
color:gray;
}
/ * :hover 是链接伪类选择器 鼠标经过 * /
a：hover {
color: red;/ * 鼠标经过的时候由原来的灰色变为虹色 * /

focus伪类选择器

用于选取获得焦点（光标）的表单元素。
例如

input : focus {
backgroud-color:yellow;
}

复合选择器总结

在这里插入图片描述

伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称之为伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。
伪元素选择器和标签选择器一样权重为1

<style>
div {
position:relative;
width:200px
height:35px;
background-color:pink;
}
div::before {
/*这个content是必须要写的*/
content:'我';
}
div::after {
content:'小猪佩奇';
}
</style>
...
<div>是</div>

伪元素使用场景
1.伪元素字体图标

p::before {
position:absolute;
right:20px;
top:10px;
content:'\e91e';
font-size:20px;
}

2.显示隐藏遮罩

<style>
.tudou img {
width:100%;
height:100%;
}
.tudou::before {
content:'';
/*隐藏遮罩层*/
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.4) url(images/arr.png) no-repeat center;
}
/*当我们鼠标经过了土豆这个盒子，就让里面遮罩层显示出来*/
.tudou:hover::before {
display:block;
}
</style>

3.伪元素清除浮动

额外标签法（隔墙法）（w3c推荐）：在最后添加一个新的空标签（必须是块级元素）clear：both。
父级添加overflow属性
父级添加after伪元素

.clearfix:after {
content:"";(伪元素必须写的属性）
display:block;（插入的元素必须是块级）
height:0;（不要看见这个元素）
clear:both;（核心代码清除浮动）
visibility:hidden;（不要看见这个元素）
}

父级添加双伪元素

.clearfix:before,clearfix:after {
content:"";(伪元素必须写的属性）
display:table;（转换为块级元素并且一行显示）
}
.clearfix:after {
clear:both;（核心代码清除浮动）
}

后两种伪元素清除浮动算是第一种的升级和优化。

css的元素显示模式

什么是元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如

自己占一行，比如一行可以放多个，html元素一般分为块元素和行内元素。

块元素

常见的有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等。
特点：
1.独占一行
2.高度，宽度，外边距，内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
注意：
1.文字类的元素内不能使用块级元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块元素

行内元素

常见的有：<a>,<strong>,<b>,<em>等。
特点：
1.相邻行内元素在一行上，一行可以显示多个
2.高宽直接显示无效
3.默认宽度就是它本身内容的宽度
4.行内宽度只能容纳文本或其他行内元素
注意：
1.链接里面不能放链接
2.特殊链接<a>里面可以放块级元素，但是给<a>转换一下块级元素最安全

行内块元素

<img />，<input />，<td>同时具有块元素和行内元素的特点。
特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白空隙，一行可以显示多个（行内元素特点)
2.默认宽度就是它本身内容的宽度(行内元素特点）
3.高度，宽度，外边距，内边距都可以控制（块级元素特点）

元素显示模式总结

在这里插入图片描述

元素显示模式转换

1.转换为块元素：display:block
2.转换为行内元素：display:inline
3.转换为行内块：display:inline-block

<style>
        a {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 把行内元素a 转化为块级元素 */
            display: block;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 把块级元素div 转化为行内元素 */
            display: inline;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            /* 把行内元素转化为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">行内元素</a>
    <a href="#">行内元素</a>
    <div>块级元素</div>
    <div>块级元素</div>
    <span>行内元素转化为行内块元素</span>
    <span>行内元素转化为行内块元素</span>
</body>

单行文字垂直居中

单行文字垂直居中的代码

让文字的行高等于盒子的高度

单行文字垂直居中的原理

在这里插入图片描述

css的背景

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

背景颜色

background-color:颜色值；

默认值是transparent（透明）

背景图片

background-image：none(无背景图）|url（使用绝对或相对地址指定背景图像）

背景平铺

background-repeat：repeat(默认）|no-repeat|repeat-x|repeat-y;

背景图片位置

background-position：x y;

1.参数是方位名词：
如果指定的两个值都是方位名词，则两个值前后顺序无关;
如果只指定了一个方位名词，另一个省略，则第二个值默认居中。
2.参数是精确名词：
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标；
如果只指定一个数值，那该数值一定是x坐标，另一个默认居中。
3.参数是混合单位：
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
在这里插入图片描述

背景图像固定（背景附着)

background-attachment:scroll(背景图像随对象内容滚动） | fixed（背景图像固定)；

背景复合写法

一般习惯写法：
background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background ：transparent url() repeat-y fixed top;

背景色半透明

background ：rgba{0，0，0，0.3}；

1.最后一个参数是alpha透明度，取值范围在0~1之间；
2.习惯把0.3的0省略掉；
3.注意：背景半透明是指盒子背景半透明，盒子里的内容不受影响；

背景总结

在这里插入图片描述
实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是便于控制位置。

css的三大特性

层叠性

原则：
1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
2.样式不冲突，不会层叠。

继承性

子标签会继承父标签的某些样式（text，font-，line-这些元素开头的，以及color属性），如文本颜色和字号。

行高的继承性

body {
font：12px/1.5 Microsoft Yahei;
}

1.行高单位可有可无；
2.若子元素未设置行高，则继承父元素的；
3.当前子元素的文字大小*1.5；
4.body行高1.5这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高。

优先级

选择器相同，则执行层叠性
选择器不同，，则根据选择器权重执行

选择器	权重
继承/*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
important重要的	无穷大

在这里插入图片描述

css的盒子模型

组成：border边框，content内容，padding内边距，margin外边距。

边框

border：border-width||border-style||border-color

属性	作用
border-width	边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

边框简写：

border：1px solid red；无顺序

边框分开写法：

border-top：1px solid red；/*只设定上边框*/

在这里插入图片描述

div {
width:300px;
height:200px;
border-width：5px；
/*border-width 边框的粗细 一般情况下都用px*/
border-style 边框的样式 solid边框实线 dashed虚线边框 dotted点线边框*/
bord-style：solid；
/*border-color边框的颜色*/
border-color：pink；
}

细线边框

border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

border-collapse：collapse；

collapse是合并的意思；border-collapse：collapse；表示相邻边框合并在一起。

边框影响盒子实际大小

边框会额外增加盒子的实际大小，有两种方案解决：
1.测量盒子大小的时候，不量边框；
2.如果测量的时候包含了边框，则需要width/height减去边框宽度。

内边距

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达意思
padding：5px	上下左右
padding：5px 10px	上下5，左右10
padding：5px 10px 20px	上5，左右10，下20
padding：5px 10px 20px 30px	上5，右10，下20，左30

如果盒子已经有了宽度和高度，再指定内边框会撑大盒子。
解决方案：width/height减去多出来的内边距大小。
如果盒子没有宽度和高度，内边框不会撑大盒子。

外边距

margin属性用于设置外边距，即盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式代表的意义跟padding完全一致。

外边距可以让块级盒子水平居中，但是必须满足：1.盒子必须指定了宽度，2.盒子左右的外边距都设置为auto。

.header { width：960px；margin：0 auto；}

常见写法：
1.margin-left:auto;margin-right:auto;
2.margin:auto;
3!.margin:0 auto;
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
1.为父元素定义上边距；
2.为父元素定义上内边距；
3.为父元素添加overflow：hidden。

清除内外边距

行内元素尽量只设置左右内外边距。

* {
  padding：0；/*清除内边距*/
  margin：0；/*清除外边距*/
  }

ps基本操作

1.文件打开：可以打开我们要测量的图片；
2.ctrl+R：可以打开标尺，或者视图–>标尺；
3.右击标尺，把里面的单位改为像素；
4.ctrl+加号（+）可以放大视图，ctrl+减号（-）可以缩小视图；
5.按住空格键，鼠标可以变成小手，拖动ps视图；
6.用选区拖动可以测量大小；
7.ctrl+D可以取消选区，或者在旁边空白处点击一下也可以。
在这里插入图片描述

圆角边框

1.参数值可以为数值或百分比的形式；
2.如果是正方形要设置成一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%；
3.如果是矩形，设置为高度的一半就可以做；
4.是简写属性，分别为左上角，右上角，右下角，左下角。
5.分开写：border-top-left-radius,border-top-right-radius,border-bottem-right-radius,border-bottem-left-radius。

border-radius：length；

div {
width:300px;
height:150px;
background-color:pink;
border-radius:10px;
}

.radius {
width:200px;
height:200px;
background-color:pink;
/*border-radius:100px;*/
/*50% 就是宽度和高度的一半 等价于100px*/
border-radius:50%;
}

#radius {
width:200px;
height:200px;
background-color:pink;
border-radius:10px 20px 30px 40px;
}

#radius {
width:200px;
height:200px;
background-color:pink;
border-top-left-radius:20px;
}

盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

默认的是外部阴影，但是不可以写outset，否则导致阴影无效；盒子阴影不占用空间，不会影响其他盒子排列。

<style>
  div {
     width:200px;
     height:200px;
     background-color:pink;
     margin:100px auto;
     /*box-shadow:10px 10px;*/
     }
     div:hover {
        box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
        }
        /*原先盒子没有阴影，当我们鼠标经过盒子就添加阴影效果*/
</style>

文字阴影

text-shadow：h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

<style>
  div {
    font-size:50px;
    color:orangered;
    font-weight:700;
    text-shadow:5px 5px 6px rgba(0,0,0,.3);
     }
</style>
...
<div>你是阴影，我是火影</div>

在这里插入图片描述

元素的显示与隐藏

1.display显示隐藏元素，但是不保留位置；
2.visibility显示隐藏元素，但是保留原来的位置；
3.overflow溢出显示隐藏，但是只是对于溢出的部分处理。

display

display属性用于一个元素应如何显示。
1.display：none 隐藏对象；
2.display：block 除了转换为块级元素之外，同时还有显示元素的意思。

display隐藏元素后，不再占用原来的位置

<style>
  .peppa {
     /*display:none;*/
     display:block;
     width:200px;
     height:200px;
     background-color:pink;
     }
    .george {
     width:200px;
     height:200px;
     background-color:blue;
        }
</style>
...
<body>
   <div class="peppa">佩奇</div>
   <div class="george">乔治</div>
</body>

效果如下：
由
在这里插入图片描述
变成

visibility

display属性用于指定一个元素应可见还是隐藏。
1.visibility：visible；元素可视；
2.visibility：hidden；元素隐藏。

visibility隐藏元素后，继续占用原来的位置

<style>
  .baba {
     visibility：hidden;
     width:200px;
     height:200px;
     background-color:pink;
     }
    .mama {
     width:200px;
     height:200px;
     background-color:blue;
        }
</style>
...
<body>
   <div class="baba">猪爸爸</div>
   <div class="mama">猪妈妈</div>
</body>

在这里插入图片描述

overflow

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管是否超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

<style>
  .peppa {
    /*overflow:visible;*/
    /*overflow:hidden;*/
    /*overflow:scroll ;*/
    /*overflow:auto;*/
   width:200px;
   height:200px;
   border:3px solid pink;
   margin:100px auto;
     }
</style>
...
<body>
   <div class="peppa">《小猪佩奇》，又名《粉红猪小妹》，hhhhhhhhhhhhhhhhhhhhhh</div>
</body>

css高级技巧

精灵图

精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
核心原理：将网页中的一些小背景图像整合到一张大图（也称sprites精灵图/雪碧图）中，这样服务器只需要一次请求就可以了。
使用精灵图核心总结：
1.精灵图主要针对于小的背景图片使用；
2.主要借助于背景位置来实现—background-position；
3.一般情况下精灵图都是负值；（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）
4.要精确测量。

<style>
  .box1 {
   width:60px;
   height:60px;
   margin:100px auto;
   background:url(images/sprites.png) no-repeat -182px 0;
     }
   .box2 {
   width:27px;
   height:25px;
   margin:200px;
   background:url(images/sprites.png) no-repeat -155px -106px;
     }
</style>
...
<body>
   <div class="box1"></div>
   <div class="box2"></div>
</body>

字体图标

使用场景：主要用于显示网页中通用，常用的一些小图标。
字体图标（iconfont）提供一种方便高效的图标使用方式，展示的是图标，本质属于文字。
优点：

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活级：本质是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器

追加：把压缩包里面的selection.json重新上传，选取新的图标，重新下载压缩包并替换即可。

/*字体声明*/
<style>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?b9voek');
  src:  url('fonts/icomoon.eot?b9voek#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?b9voek') format('truetype'),
    url('fonts/icomoon.woff?b9voek') format('woff'),
    url('fonts/icomoon.svg?b9voek#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
span {
font-family: 'icomoon';
font-size:100px;
color:pink;
}
</style>
...
/*<span></span>*/
<span>\e900</span>

css三角

三角做法如下：

<style>
div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
}
</style>

<style>
.box1 {
width:0;
height:0;
border-top:10px solid pink;
border-right:10px solid red;
border-bottom:10px solid blue;
border-left:10px solid green;
}
.box2 {
width:0;
height:0;
border:10px solid transparen;
border-top-color:pink;
margin:100px auto;
}
</style>
...
<div class="box1"></div>
<div class="box2"></div>

在这里插入图片描述

css用户界面样式

界面样式包括：

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式cursor

li { cursor:pointer；}

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul>
<li style="cursor:default;">我是默认的小标鼠标样式</li>
<li style="cursor:pointer;">我是鼠标小手样式</li>
<li style="cursor:move;">我是鼠标移动样式</li>
<li style="cursor:text;">我是鼠标文本样式</li>
<li style="cursor:not-allowed;">我是鼠标禁用样式</li>
</ul>

轮廓线outline

下有两种方式去掉蓝色边框：

input { outline:none;}
input { outline:0;}

防止拖拽文本域

<style>
input,textarea {
/*取消表单轮廓*/
outline:none;
}
textarea {
/*防止拖拽文本域*/
resize:none;
}
</style>
...
<body>
<!--1.取消表单轮廓-->
<input type="text">
<!--2.防止拖拽文本域-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

vertical-align属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是只针对于行内元素或者行内块元素有效。

vertical-align: baseline| top| middle| bottom;

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低元素的顶端对齐

请添加图片描述

<style>
img {
/*vertical-align:bottom;*/
/*让图片和文字垂直居中*/
vertical-align:middle;
/*vertical-align:top*/;
}
textarea {
vertical-align:middle;
}
</style>
...
<body>
<img scr="images/ldh.jpg" alt=""> pink老师是刘德华<br>
<textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>

在这里插入图片描述

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐，此时可以将这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白空隙，原因是行内块元素会和文字的基线对齐。
主要的解决方法：
1.给图片添加vertical-align: middle| top| bottom;（提倡使用）
2.把图片转换为块级元素display：block。

溢出的文字省略号显示

单行文本溢出

单行文本溢出显示省略号必须满足三个条件：

/*1.先强制一行内显示文本*/
white-space:nowrap;(默认normal自动换行）
/*2.超出的部分隐藏*/
overflow：hidden；
/*3.文字用省略号替代超出的部分*/
text-overflow:ellipsis;

<style>
div {
width:150px;
height:80px;
background-color:pink;
margin:100px auto;
/*normal的意思是如果文字显示不开自动换行*/
/*white-space:normal;*/
/*nowrap的意思是如果文字显示不开也必须强制在一行内显示*/
white-space:nowrap;
/*溢出的部分隐藏起来*/
overflow:hidden;
/*文字溢出的时候用省略号显示*/
text-overflow:ellipsis;
}
</style>

多行文本溢出

overflow：hidden；
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display：-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;

<style>
div {
width:150px;
height:65px;
background-color:pink;
margin:100px auto;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display：-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:3;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;
}
</style>
...
<div>啥也不说，此处省略一万字啥也不说，此处省略一万字</div>

在这里插入图片描述

常见布局技巧

margin负值运用

1.让每个盒子margin 往左侧移动-1px正好压住相邻盒子边框;
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位(保留位置)，如果有定位,则加z-index)

<style>
ul li {
position:relative;
float:left;
life-style:none;
widtn:150px;
height:200px;
border:1px solid red;
margin-left:-1px;
}
/* ul li:hover {
/*1.如果盒子没有定位，则鼠标经过添加相对定位即可
position:relative;
border:1px solid blue;
}*/
ul li:hover {
/*2.如果li都有定位，则利用x-index提高层级*/
z-index:1;
border:1px solid blue;
}
</style>

文字围绕浮动元素的妙用

<style>
* {
margin:0;
padding:0; 
}
.box {
width:300px;
height:70px;
background-color：pink;
margin:0 auto;
padding:5px;
}
.pic {
float:left;
widtn:120px;
height:60px;
margin-right:5px;
}
.pic img {
width:100%;
}
</style>

行内块巧妙运用

<style>
* {
margin:0;
padding:0; 
}
.box {
texe-align:center;
}
.box a {
diaplay:inline-block;
widtn:36px;
height:36px;
background-color:#f7f7f7;
border:1px solid #ccc;
texe-align:center;
line-height:36px;
text-decoration:none;
color:#333;
font-size:14px;
}
.box .prev,
.box .next {
width:85px;
}
.box .current,
.box .elp {
background-color:#fff;
border:none;
}
.box input {
height:36px;
width:45px;
border:1px solid #ccc;
outline:none;
}
.box button {
width:60px;
height:36px;
background-color:#f7f7f7;
border:1px solid #ccc;
}
</style>
...
<div class="box">
<a href="#" class="prev">&lt;&lt;上一页</a>
<a href="#" class="current">2</a>
<a href="#"">3</a>
<a href="#"">4</a>
<a href="#"">5</a>
<a href="#"">6</a>
<a href="#"" class="elp">...</a>
<a href="#" class="next">&gt;&gt;下一页</a>
到第
<input type="text">
页
<button>确定</botton>
</div>

三角强化

在这里插入图片描述
代码：

width:0;
height:0;
border-color:transparent red transparent transparent;
border-style:solid;
border-width:22px 8px 0 0;

<style>
.box1 {
width:0;
height:0;
/*把上边框宽度调大*/
/*border-top:100px solid transparent;
border-right:50px solid skyblue;*/
/* 左边和下边的边框宽度设置为0 */
/* border-bottom:0 solid blue;
border-left:0 solid green;*/
/* 1.只保留右边的边框有颜色*/
border-color:transparent red transparent transparent;
/* 2. 样式都是solid */
border-style:solid;
/* 3. 上边框宽度要大，右边框宽度稍小，其余的边框该为 0 */
border-width:100px 50px 0 0;
}
</style>

<style>
.price {
width:160px;
height:24px;
line-height:24px;
border:1px solid red;
margin:0 auto;
}
.miaosha {
position:relative;
float:left;
width:90px;
height:100%;
background-color:red;
text-align:center;
color：#fff;
font-weight:700;
}
.miaosha i {
position:absolute;
right:0;
top:0;
width:0;
height:0;
border-color:transparent #fff transparent transparent;
border-style:solid;
border-width:24px 10px 0 0;
.origin {
font-size:12px;
color:gray;
text-decoration:line-through;
}
</style>
...
<div class="box1"></div>
<div class="price">
<span class="miaosha">
$1650
<i></i>
</span>
<span class="origin">$5650</span>
</div>