Anchor-x/WebDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

format code

Browse Source
This commit is contained in:
myh 2023-12-26 20:21:01 +08:00
parent 26691ce656
commit 68a8fc52e5
3 changed files with 100 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/scss/styleBaidu.scss
View File

@ -2,67 +2,67 @@
/* 设置页面背景色 */
body {
background-color: #f5f5f5;
background-color: #f5f5f5;
}
/* 设置页面内容区域的宽度和居中 */
.container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
/* 设置百度Logo的样式 */
.logo {
width: 320px;
height: 120px;
background-image: url("../../img/baidu.png");
background-size: cover;
margin: auto auto auto auto;
width: 320px;
height: 120px;
background-image: url("../../img/baidu.png");
background-size: cover;
margin: auto auto auto auto;
}
/* 设置搜索框的样式 */
.search-box {
width: 450px;
height: 45px;
border: 1px solid #ccc;
border-radius: 20px;
padding: 5px 10px;
font-size: 16px;
width: 450px;
height: 45px;
border: 1px solid #ccc;
border-radius: 20px;
padding: 5px 10px;
font-size: 16px;
}
/* 设置搜索按钮的样式 */
.search-button {
background-color: #3385ff;
color: #fff;
border: none;
padding: 12px 24px;
font-size: 20px;
border-radius: 25px;
cursor: pointer;
background-color: #3385ff;
color: #fff;
border: none;
padding: 12px 24px;
font-size: 20px;
border-radius: 25px;
cursor: pointer;
}
nav {
background-color: #f5f5f5;
background-color: #f5f5f5;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
display: inline-block;
}
nav a {
display: block;
color: #000000;
text-decoration: none;
padding: 10px;
display: block;
color: #000000;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background-color: #555;
background-color: #555;
}

112
src/scss/styleYnu.scss
View File

@ -3,93 +3,93 @@
@tailwind utilities;
.li-img li {
list-style: none;
float: left;
width: 25%; /*四列图片排列*/
height: 175px;
overflow: hidden;
list-style: none;
float: left;
width: 25%; /*四列图片排列*/
height: 175px;
overflow: hidden;
}
.li-img li img {
position: relative;
width: 100%;
height: auto;
top: 50%; /*li高度的一半*/
transform: translateY(-50%); /*再向上移动自身的50%*/
position: relative;
width: 100%;
height: auto;
top: 50%; /*li高度的一半*/
transform: translateY(-50%); /*再向上移动自身的50%*/
}
/*清除浮动*/
.clearfix:after {
position: relative;
content: '';
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
position: relative;
content: '';
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}
#carousel {
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
}
#carousel img {
position: absolute; /* 绝对定位 使图片堆叠 */
width: auto; /* 设定大小 按比例缩放 */
height: auto; /* 设定大小 按比例缩放 */
transition: all .6s; /* 动画 */
opacity: 0; /* 隐藏 */
position: absolute; /* 绝对定位 使图片堆叠 */
width: auto; /* 设定大小 按比例缩放 */
height: auto; /* 设定大小 按比例缩放 */
transition: all .6s; /* 动画 */
opacity: 0; /* 隐藏 */
}
.imgActive {
opacity: 1 !important; /* 显示图片 最高优先级 */
opacity: 1 !important; /* 显示图片 最高优先级 */
}
/* 控制按钮的样式 */
#leftArrow,
#rightArrow {
//position: absolute;
//left: 5px;
//top: 50%;
//width: 25px;
//height: 30px;
//background-color: #eee;
//display: flex;
//justify-content: center;
//align-items: center;
//opacity: 0.7;
//font-size: 20px;
//cursor: pointer;
//z-index: 1000;
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
//position: absolute;
//left: 5px;
//top: 50%;
//width: 25px;
//height: 30px;
//background-color: #eee;
//display: flex;
//justify-content: center;
//align-items: center;
//opacity: 0.7;
//font-size: 20px;
//cursor: pointer;
//z-index: 1000;
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
}
#rightArrow {
//left: auto;
//right: 5px;
@apply left-auto right-5;
//left: auto;
//right: 5px;
@apply left-auto right-5;
}
#sliderBtn {
//position: absolute;
//width: 100%;
//bottom: 0;
//display: flex;
//justify-content: flex-end;
//z-index: 1000;
@apply absolute w-full bottom-0 flex justify-end z-10;
//position: absolute;
//width: 100%;
//bottom: 0;
//display: flex;
//justify-content: flex-end;
//z-index: 1000;
@apply absolute w-full bottom-0 flex justify-end z-10;
}
.unitBtn {
//width: 10px;
//height: 10px;
//background-color: #eee;
//border-radius: 10px;
//margin: 10px;
//cursor: pointer;
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
//width: 10px;
//height: 10px;
//background-color: #eee;
//border-radius: 10px;
//margin: 10px;
//cursor: pointer;
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
}
.btnActive {
background-color: #4C98F7;
background-color: #4C98F7;
}