前端一些样式记录

前端一些样式记录

由于工作中除了后端开发，有时候还会要做前端的工作。所以记录一下，有空的时候回看一下也好。

view的内容居中样式(div)

display: flex;
flex-direction: column;
align-items: center;

字体加粗

font-weight:bold;

按钮圆角、变圆

border-radius:15px;

更换按钮背景色为红色

background-color: #FF0000;   //背景色
color: #ffffff;		//可理解为按钮上文字的颜色

背景透明

background-color:transparent;

背景图片采用渐变色

//百分比调整两个颜色区域占比，90deg代表渐变轴为90度
background-image: linear-gradient(90deg,#ca5924 10%,#ffff00 90%);

以下实例演示了从头部开始(自上而下)的线性渐变，从红色开始，转为黄色，再到蓝色:

background-image:  linear-gradient(red, yellow, blue); 

菜鸟教程上图文教程很生动，可以去看下。

在父组件中改变子组件的样式

在vue中引入了作用域，其中scoped规定css样式只在本页面中生效，不会影响其它页面

<style scoped>

</style>

由于scoped作用域是影响，如果要临时改变子组件的样式，可以用/deep/来实现scoped穿透，例子：

!>Ps：input-value-border是子组件中的class样式名，而不是组件名。

/deep/ .input-value-border{
    color:#ff0000  //这里写你要改的样式
}

层叠元素置顶(置于最前)，防止点击不到

z-index 属性指定一个元素的堆叠顺序。

 z-index: 999;  

设置元素的四个边距

margin:2px 4px 3px 4px;  /*分别是上、右、下、左边距*/

margin:10cm;   /*如果只有一个值，代表4个边距都是10cm*/

为段落设置字体

 font-family:"Microsoft YaHei"；/*微软雅黑字体*/

鼠标移动到元素上样式

span:hover
{
	background-color: red;  /*span标签背景色变红*/
}

盒子四周加黑色边框

border: 1px solid #000;

div中按钮浮动在最右边(注：如需要多个按钮一起居右，则看下一条)

float: right;

div中多个按钮浮动在最右边

按钮的样式依然使用float:right,只是原来按钮1、按钮2、按钮3的顺序会变成按钮3、按钮2、按钮1的顺序;

所以我们在html中要反过来定义按钮的顺序，再使用float:right浮动在最右边，超过3个按钮的依此类推。

按钮代替a标签跳转链接

<button onclick="window.location.href = 'https://www.qq.com/'">腾讯网</button>

输入框圆角样式

border-radius: 12px;

控制鼠标点击列表闪烁一下(点击效果)

思路：

使用hover-class="click_effect"控制鼠标点击下去列表中一条数据的时候的样式

例如；控制点击时候，背景颜色为#f1f1f1,可让用户感受到是鼠标点击了该条数据。

.click_effect{
background-color: #f1f1f1;
}

禁止H5页面左右方向拖动

页面出现左右可拖动的原因是，div或者其它元素溢出了内容区，所以采用overflow-x: hidden;来裁剪 div 元素中内容的左/右边缘

.no_moving{
  overflow-x: hidden;
}

图片或者其它对象位于div中间

.div_center{
  text-align: center;
}

数字和字母也换行，不单单只有中文

word-break:break-all;