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;