10-22-Web 1-2 课
This commit is contained in:
GuanM
commit
4d824685e8
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
*.psd filter=lfs diff=lfs merge=lfs -text
|
||||
*.pdf filter=lfs diff=lfs merge=lfs -text
|
||||
134
Web/css/index.css
Normal file
134
Web/css/index.css
Normal file
@ -0,0 +1,134 @@
|
||||
body {
|
||||
background-color: skyblue;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#header .logo {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
#header .nav {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#header .nav ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#header .nav ul li {
|
||||
font-size: 20px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#header .language {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
#header .language ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#header .language ul li {
|
||||
font-size: 18px;
|
||||
padding: 10px 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#header .nav ul li:hover,
|
||||
#header .language ul li:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
/* 如果想显示进度条 删除此css样式 */
|
||||
#swipper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 400px; /* 设置一个固定高度 */
|
||||
}
|
||||
|
||||
.swipper-container {
|
||||
display: flex;
|
||||
width: 400%;
|
||||
animation: mover 12s steps(4) infinite;
|
||||
}
|
||||
|
||||
.swipper-slide {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.swipper-slide-img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 184px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.prev img, .next img {
|
||||
width: 20px; /* 调整图片大小 */
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
height: 15px;
|
||||
margin-left: -40px;
|
||||
bottom: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.counter .point {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: blueviolet;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.counter .point:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@keyframes mover {
|
||||
0% {
|
||||
margin-left: 0;
|
||||
}
|
||||
100% {
|
||||
margin-left: -400%;
|
||||
}
|
||||
}
|
||||
BIN
Web/images/banner_01.jpg
Normal file
BIN
Web/images/banner_01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
Web/images/banner_02.jpg
Normal file
BIN
Web/images/banner_02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
BIN
Web/images/banner_03.jpg
Normal file
BIN
Web/images/banner_03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
Web/images/left-arrow.png
Normal file
BIN
Web/images/left-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
Web/images/logo.jpg
Normal file
BIN
Web/images/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
Web/images/right-arrow.png
Normal file
BIN
Web/images/right-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
80
Web/index.html
Normal file
80
Web/index.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<!-- 链入外部样式 -->
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<!-- 内部样式 -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 首页header部分 -->
|
||||
<div id="header">
|
||||
<div class="logo">
|
||||
<img src="./images/logo.jpg" alt="logo" />
|
||||
</div>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li>首页</li>
|
||||
<li>关于我们</li>
|
||||
<li>新闻中心</li>
|
||||
<li>产品中心</li>
|
||||
<li>客户服务</li>
|
||||
<li>联系我们</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="language">
|
||||
<ul>
|
||||
<li>CN</li>
|
||||
<li>EN</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="swipper">
|
||||
<div class="swipper-container">
|
||||
<div class="swipper-slide">
|
||||
<img src="./images/banner_01.jpg" alt="Banner 1" class="swipper-slide-img">
|
||||
</div>
|
||||
<div class="swipper-slide">
|
||||
<img src="./images/banner_02.jpg" alt="Banner 2" class="swipper-slide-img">
|
||||
</div>
|
||||
<div class="swipper-slide">
|
||||
<img src="./images/banner_03.jpg" alt="Banner 3" class="swipper-slide-img">
|
||||
</div>
|
||||
<div class="swipper-slide">
|
||||
<img src="./images/banner_02.jpg" alt="Banner 4" class="swipper-slide-img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="prev">
|
||||
<img src="./images/left-arrow.png" alt="Previous">
|
||||
</div>
|
||||
<div class="next">
|
||||
<img src="./images/right-arrow.png" alt="Next">
|
||||
</div>
|
||||
<div class="counter">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
main
|
||||
<!-- welcome -->
|
||||
<div id="welcome">welcome</div>
|
||||
<!-- product -->
|
||||
<div id="product"></div>
|
||||
<!-- news -->
|
||||
<div id="news"></div>
|
||||
<!-- video -->
|
||||
<div id="video"></div>
|
||||
</div>
|
||||
footer
|
||||
<!-- 首页footer部分 -->
|
||||
<div id="footer">footer</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user