css3放大图片-后端开发，项目中常用的CSS样式整理

最近，生活

有点太美了，让我觉得像做梦一样，哈哈哈css3放大图片，幸福的生活，不要走得太远，你说是的，沙先生，我也要越来越努力。我想你是我的动力。

1.1 文本溢出省略号：

文本单行溢出：

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行
复制代码

多行文本溢出：

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

1.2CSS 变量：

.CSS变量，也称为 CSS 自定义属性，由 CSS 中的自定义属性 --var 和函数 var（）

组成，函数 var（） 用于引用自定义属性。要说明为什么在CSS中使用变量，下面是一个示例。

:root {
 --c-color: orange;
}
.title {
 background-color: var(--c-color);
}

1.3 渐变：梯度分为线性渐变

、径向渐变，这里笔者直接记录了使用的方法，也用得越来越直观，在这里，当使用线性梯度时，使用角度和比例来控制梯度，会越来越灵活

如何使用：

//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));
//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变：边框

具有边框图像属性，类似背景也有背景图像，通过为其设置渐变颜色，实现渐变，前面的数字4是x方向的倾斜量

如何使用：

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

1.4 背景大小：覆盖并包含和 100%。

包含：当背景区域与背景图像的纵横比不一致时，背景区域可能在长边下有空白，覆盖不完全。 封面：放大图片以满足最大变化，当背景区域与背景图片的纵横比不一致时，短边下会裁剪背景图片， 并且显示不完整。

比率：可以设置两个值

例：

  
  
  
  
  
    *{
      margin: 0;
      padding: 0;
    }
    .bg{
      width: 100%;
      height: 300px;
      background: url('./img/mtk.png');
      /* background-size: contain; */ 
      /* background-size: cover; */
      background-size: 100%;
      background-repeat: no-repeat;
    }
  


  

结果如右图所示：

包含：

盖：

比率（此处为100%）：

1.5CSS 伪类三角形：

让我们从一个例子开始

  
  
  
  
  
    .triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}
  


  

  

如果需要较低的三角形，可以使边框的上边框可见，并将其他边框颜色设置为透明

.down-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

1.6 媒体查询

页面颈部必须有一个关于视口的元语句

一般来说，在做响应式布局和大屏幕时很常见，以便在率下达到不同的显示效果

/* 超过1920分辨率后显示多列 */
@media screen and (min-width:1920px) {
  .car_box.el-card {
    min-width: 450px !important;
    width: 450px !important;
  }
}

1.7 更改元素界面样式的几种方法：

笔者目前的技术栈是 vue，改变 elementui 的风格真的很痛苦css3放大图片，风格用 CSS 预处理器（less、sass、scss）如下

// 第一种/deep/
/deep/ .test {
 ***
}
// 第二种::v-deep
::v-deep .test{
 ***
}

在 elementui 中有时遇到更改表格所有样式的情况，以下内容将对应于更改下一个样式：

（1）修改表格背面背景：

::v-deep .el-table th{
    background: orange;
  }

（2）修改表行背景：

::v-deep .el-table tr{
   background: #eee;
  }

（3）修改斑马线交叉表的背景：

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #ccc;
  }

（4）修改线条颜色：

::v-deep .el-table td,.building-top .el-table th.is-leaf {
    border-bottom:  2px solid #eee;
  }

（5）修改表格上边框的颜色和高度：

::v-deep .el-table::before{
   border-bottom:  1px solid #ccc;
    height: 3px
  }

（6）修改标题字体颜色：

::v-deep .el-table thead {
    color: #ccc;
    font-weight: 700;
  }

（7）修改表格内容字体颜色和字体大小：

::v-deep .el-table{
    color: #6B91CE;
    font-size: 14px;
  }

（8）没有数据时修改表格的背景和字体颜色

::v-deep .el-table__empty-block{
    background: #ccc;
  }
::v-deep .el-table__empty-text{
  color: #fff
}

（9）修改表格键盘浮动悬停背景颜色

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: pink;
}

营销型网站设计制作的一些小建议

营销网站

有些同学对网站建设中的一些问题不明白，就经常来咨询。 今天小编就给大家介绍一下：SEO网站设计制作的一些小建议。

网站是企业互联网形象的窗口，因此很多人都非常注重网站的页面设计。 我见过很多要求网站“高大上”的老板。 不知道他们眼中的“高”是什么标准。 （有人说很完美），但我认为网站的设计和制作比实用、美观和良好的用户体验更重要。

1. 页面响应率

网站打开缓慢导致访问者直接关闭。 这是我们都不愿意看到的。 同时，也会直接导致网站的跳出率大大降低。 这对SEO也是不利的。 我们可以使用以下方法来解决这个问题（这里指的是服务器运行正常且带宽充足）。

1.合并压缩js和css，优化代码，压缩图片

js和css可以直接用在线工具压缩，jq的一些常用解释器可以使用百度cdn公共库或者官方的cnd公共库； 图片压缩主要是不影响图片的美观，而且压缩也不容易太大，特别是对于网站内部的小图片可以使用css sprite技术，这样不仅减少了图片的整体尺寸，还减少了图片的大小。服务器响应图片的次数（css sprite是用于页面上的小图片的，不是所有的图片都做成一张大的就好了，这种视图是错误的）。 对于多个js，如果没有非常特殊的原因，建议将它们合并在一起，并用代码屏蔽报错（这样做的目的是避免ie、js、css代码优化中弹出错误信息） ，可以直接找到技术。

2. 图片预加载

目前常用的是Web延迟加载技术。 简单来说，就是当网页滚动到相应的地方时，相应位置的内容就会被加载并显示。 这样可以显着减轻服务器的压力和流量，同时也减轻浏览器的负担。 这样，前台显示的内容就会相对减少，从而提高网页的加载速度。

3.非必要时尽量少用响应式布局

虽然目前网站有多个终端，兼容多终端也是网页设计的一个趋势，但是因为很多时候网站不是做成网格布局，这样会减少页面N多代码，想想这个加载率好了，如果不是很有必要，建议不要做响应式。

2、用户体验

1.css3和html5的应用

css3、html5等技术确实可以让页面越来越有效果，也可以大大提升用户体验。 不过，考虑到国外很多用户的ie版本还停留在ie8甚至更低的版本css3响应式，那么在使用这种技术的同时，我们是否应该考虑到这部分用户呢？ 所以阴影、画板、转场等一系列特效，如果一定要实现的话就用js或者jq吧。

2.移动网站和社交化是趋势

越来越多的用户开始使用手机上网，越来越多的人喜欢在社交网站上分享。 移动网站和社交化是互联网未来的趋势。 如果您没有中国联通网站，或者该网站不支持中国联通页面浏览，您可以尝试使用百度手机应用。 带上外部链接，还可以帮你免费推广。

3.关于seo

1.对于可以使用标签和文字的seo相关元素，少用图片、flash、frames、js

原因很简单，因为图片、flash、frames、js搜索引擎蜘蛛无法捕获其中的内容。 这些都是老生常谈的问题，我就不重复了。

2.页面标签书写，与使用nofollow无关

B、strong、h1-h6等大家都知道css3响应式，这里不再赘述。

结尾

扫描二维码添加Momo