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

112
src/scss/styleYnu.scss
View File

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