CSS常用样式 2018年5月26日
前端
0 条评论

flex布局一行显示两个盒子自动换行

<template>
  <div class="container">
    <div class="box" v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["小盒子 1", "小盒子 2", "小盒子 3"]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 48%; /* 每个小盒子占比的宽度，可根据需要调整 */
  background-color: lightblue;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}
</style>

flex上下布局

display: flex;
flex-direction: column; /* 上下布局 */

flex居中

<view style="display: flex;justify-content: center;height: 300rpx;background-color: red;">
  <view style="font-size: 30rpx;background-color: green;">盒子左右居中</view>
</view>
<view style="display: flex;align-items: center;height: 300rpx;background-color: green;">
  <view style="font-size: 30rpx;background-color: red;">盒子上下居中</view>
</view>
<view style="display: flex;justify-content: center;align-items: center;height: 300rpx;background-color: red;">
  <view style="font-size: 30rpx;background-color: green;">盒子上下左右居中</view>
</view>

 

基本按钮样式

width: 70px; /* 设置宽度为50像素 */
height: 35px; /* 设置高度为20像素 */
background-color: deepskyblue; /* 设置背景颜色为深天蓝色 */
border: 1px solid rgb(217, 217, 217); /* 这将添加一个1像素宽的灰色边框 */
color: black; /* 设置文本颜色为黑色 */
text-align: center; /* 设置文本水平居中 */
border-radius: 5px; /* 设置边框半径为5像素，实现圆角效果 */
display: flex; /* 使用flexbox布局 */
align-items: center; /* 让子元素在交叉轴上垂直居中 */
justify-content: center; /* 让子元素在主轴上水平居中 */
padding: 5px; /* 在文本周围创建5像素的空间 */
cursor: pointer; /* 设置鼠标样式为手型，表示可点击 */
user-select: none; /* 禁止文字选中 */

输入框样式

.custom-input {
  width: 350px;
  height: 36px;
  border: 1px solid #ccc; /* 初始边框样式 */
  border-radius: 5px;
  padding: 5px;
  transition: border-color 0.3s;
  outline: none; /* 移除默认焦点边框 */
  margin-top: 20px;
}
.custom-input:hover {
  border-color: orange;
}

.custom-input:focus {
  border-color: orange;
}

 

鼠标放到文本,将文本变色加下划线

<template>
  <div>
    <div v-for="(itm, index) in headTag" :key="index" style="display: flex">
      <div
        class="tag"
        :class="{ 'isHovered2': hoveredIndex === index }"
        @mouseenter="hoveredIndex = index"
        @mouseleave="hoveredIndex = null"
      >
        {{ itm }}
      </div>
      <div style="width: 2px; height: 20px; background-color: orange; margin-left: 20px"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headTag: ['标签1', '标签2', '标签3'],
      hoveredIndex: null,
    };
  },
};
</script>

<style>
.tag {
  margin-left: 20px;
}

.isHovered2 {
  color: orange;
  text-decoration: underline;
}
</style>

 

div内文字加粗

font-weight: bold;

 

绝对定位

.head-content {
position: absolute;
left: 1020px;
top: 15px;
}

相对定位

.head-content {
position: relative;
left: 30px;
top: 20px;
}

格式化页面

* {
padding: 0;
margin: 0;
}

标签水平居中

margin:0 auto;

其他

.box {
margin : 75px auto; /*上下边距75 自由边距居中*/
margin auto;/*上下水平均分悬浮*/
border :5px dotted blue;/*边框：宽度 样式 颜色*/
}

上传图片

background: url("logo.png") no-repeat 0 0;

变色

<p style="color: red">Hello world.</p>
background-color: #2459a2;
background-color: rgb(57, 107, 179);
background-color: green;

变圆

border-radius: 25px;