<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/shop.css" />
<link rel="stylesheet" type="text/css" href="./css/daohang.css" />
<style type="text/css">
#tui {
position: absolute;
top: 225px;
left: 1380px;
font-size: 50px;
}
#tui:hover {
cursor: pointer
}
:root {
--body-background: rgba(0, 0, 0, 0.5);
/* --container-background: #d16f95; */
--container-background: #3859ce;
--button-background: #7827d4;
--round-button: #0051e9;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#spxq {
display: none;
width: 100%;
height: 940px;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.9);
background: var(--body-background);
align-items: center;
justify-items: center;
height: 100vh;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.hero-container {
width: 940px;
height: 650px;
display: flex;
align-items: center;
margin: 200px 500px;
}
/* LEFT CONTAINER STYLES */
.display-container {
background: var(--container-background);
border-radius: 10px;
height: 100%;
width: 440px;
position: relative;
display: flex;
align-items: center;
justify-content: stretch;
box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.4);
position: relative;
}
.logo {
position: absolute;
top: 20px;
left: 20px;
height: 20px;
}
.model-number {
position: absolute;
top: -10px;
left: -50%;
right: -50%;
color: #fff;
opacity: 0.2;
font-size: 330px;
font-weight: 500;
text-align: center;
}
.circle-container {
width: 100px;
margin: auto;
position: absolute;
left: -50%;
right: -50%;
bottom: 40px;
display: flex;
justify-content: space-between;
z-index: 4000;
}
.circle {
width: 15px;
height: 15px;
border-radius: 50%;
background: #00efbf;
opacity: 0.7;
}
.circle.selected,
.circle:hover {
opacity: 1;
}
.description-container {
height: 90%;
width: 500px;
background: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 65px 40px;
box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.4);
}
/* SHOE STYLE */
.shoe-container {
position: relative;
}
.shoe {
width: 500px;
position: absolute;
top: -185px;
left: -120px;
z-index: 1000;
}
.shoe-caracteristics-btn {
cursor: pointer;
background: var(--round-button);
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
position: absolute;
z-index: 2000;
}
.shoe-caracteristics-btn:focus {
outline: 0;
}
.shoe-caracteristics-btn:hover {
opacity: 0.8;
}
.shoe-caracteristics-btn svg {
fill: #fff;
}
.left-btn {
position: absolute;
top: -100px;
left: 20px;
}
.center-btn {
position: absolute;
top: 55px;
left: 100px;
}
.right-btn {
position: absolute;
top: 110px;
left: 275px;
}
/* RIGHT CONTAINER STYLES */
.model-name {
font-size: 3rem;
margin-bottom: 10px;
}
.prices {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.bold {
font-size: 1.4rem;
font-weight: 400;
margin-right: 10px;
}
.light-gray {
color: #afafaf;
}
.description {
line-height: 1.4;
font-size: 14px;
font-weight: 400;
margin-bottom: 20px;
}
.size-options,
.size-chart,
.amount,
.amount-select {
display: flex;
}
.size-options,
.amount {
align-items: center;
margin: 40px 0;
}
.size-options>p,
.amount>p {
color: #afafaf;
font-size: 1.2rem;
}
.size-chart {
width: 100%;
margin-left: 50px;
align-items: center;
z-index: 3000;
}
.size-chart li {
width: 50px;
height: 40px;
margin-right: 15px;
border-radius: 50px;
}
.size-chart li:hover {
border: 2px solid var(--container-background);
border-radius: 50px;
}
.size {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-transform: uppercase;
font-size: 1.5rem;
color: #afafaf;
}
.amount-select {
align-items: center;
margin-left: 30px;
}
.amount-select a {
height: 24px;
}
.arrow-left,
.arrow-right {
fill: var(--container-background);
}
.show-amount {
font-size: 1.5rem;
}
.buy-btn {
cursor: pointer;
background: var(--button-background);
color: white;
border: none;
border-radius: 5px;
padding: 20px 100px;
font-size: 1.4rem;
text-transform: uppercase;
font-weight: 500;
box-shadow: 0 5px 15px 7px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease-in-out;
}
.buy-btn:hover {
transform: translateY(-3px);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #000000;
background-size: cover;
height: 100vh;
font-family: "Roboto", sans-serif;
display: grid;
place-items: center;
overflow-y: hidden;
}
input {
font: inherit;
}
.app-window {
--br: 14px;
max-width: 1300px;
width: 100%;
border-radius: var(--br);
display: grid;
grid-template-columns: 220px auto;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.4);
overflow: hidden;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
}
aside {
--spacing-offset: 10px;
border-top-left-radius: var(--br);
border-bottom-left-radius: var(--br);
padding: 20px 25px;
margin-top: 200px;
}
aside .nav {
margin-bottom: 45px;
font-size: 14px;
}
aside .nav a {
color: #fff;
text-decoration: none;
display: block;
padding: 8px var(--spacing-offset);
border-radius: 4px;
transition: background-color 0.2s;
}
aside .nav a:hover {
background-color: rgba(111, 111, 111, 1.0);
transition: 0.3s ease;
}
aside .nav>h3 {
padding-left: var(--spacing-offset);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 15px;
}
aside .nav>ul li:not(:last-of-type) {
margin-bottom: 3px;
color: #ffffff;
}
aside .nav>ul .nav-item--selected>a {
background-color: rgba(111, 111, 111, 1.0);
}
aside .nav.nav--main {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.64px;
}
aside .nav.nav--has-icons {
--icon-size: 16px;
}
aside .nav.nav--has-icons>ul li a {
display: flex;
align-items: center;
}
aside .nav.nav--has-icons>ul li a svg {
margin-right: 25px;
width: var(--icon-size);
height: var(--icon-size);
opacity: 0.8;
}
aside li {
list-style: disc;
color: #FFFFFF;
}
main {
border-top-right-radius: var(--br);
border-bottom-right-radius: var(--br);
padding: 10px 30px 50px;
max-height: 900px;
overflow-y: auto;
margin-top: 150px;
margin-left: -30px;
}
main::-webkit-scrollbar {
width: 9px;
}
main::-webkit-scrollbar-track {
background-color: rgba(39, 39, 39, 1.0);
width: 100%;
}
main::-webkit-scrollbar-thumb {
background-color: rgba(56, 56, 56, 0.7);
transition: background-color 0.2s;
}
main::-webkit-scrollbar-thumb:hover {
background-color: black;
}
main .top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
main .top-bar__search {
flex: 1;
margin-right: 50px;
position: relative;
}
main .top-bar__search svg {
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
mai
自己设计的app官网.zip(毕设&课设&实训&大作业&竞赛&项目) （153个子文件） 
jiazai.css 2KB daohang.css 996B shop.css 0B
shop2.html 25KB shop3 - beibao.html 25KB circleTv.html 21KB 3shequ.html 19KB index.html 18KB gywm.html 16KB circleshequ2.html 16KB circleshequ.html 15KB shop.html 13KB
bf1.jpg 3.32MB 1.JPG 3.22MB 4.jpg 2.72MB 2.jpg 2.7MB bf5.jpg 2.44MB bf2.jpg 2.37MB bf4.jpg 2.23MB 5.JPG 1.55MB mz8.jpg 754KB mz4.jpg 698KB mz11.jpg 652KB mz1.jpg 587KB mz7.jpg 586KB mz6.jpg 568KB mz9.jpg 556KB mz13.jpg 518KB mz5.jpg 461KB mz3.jpg 442KB bf9.jpg 429KB mz10.jpg 401KB bf14.jpg 387KB mz12.jpg 387KB mz2.jpg 372KB 7.jpg 352KB bf7.jpg 348KB bf15.jpg 337KB bf10.jpg 300KB fz6.jpg 282KB hb5.JPG 272KB hb7.JPG 270KB hb10.JPG 267KB hb2.JPG 251KB hb11.JPG 244KB fz8.jpg 242KB hb8.JPG 238KB hb4.JPG 237KB bf17.jpg 237KB bf20.jpg 236KB bf8.jpg 234KB fz5.jpg 234KB hb9.JPG 232KB bf12.jpg 221KB bf3.jpg 218KB hb1.JPG 217KB hb3.JPG 211KB bf21.jpg 208KB fz1.jpg 197KB bf6.jpg 190KB bf13.jpg 189KB sc10.JPG 184KB fz3.jpg 183KB bb8.JPG 174KB bb6.JPG 174KB sc1.JPG 169KB bb5.JPG 168KB bb7.JPG 168KB bf11.jpg 168KB fz9.JPG 163KB hb6.JPG 163KB sc11.JPG 158KB bf18.jpg 151KB sc12.JPG 145KB bb2.JPG 142KB bf19.jpg 141KB bb11.JPG 140KB fz4.jpg 139KB 9.jpg 135KB fz7.jpg 129KB bb4.JPG 127KB bb10.JPG 124KB 16.jpg 122KB fz2.jpg 114KB sc2.JPG 110KB sc8.JPG 108KB bb1.JPG 104KB bb9.JPG 97KB sc5.JPG 95KB 20.jpg 92KB 15.jpg 89KB 10.jpg 88KB bb3.JPG 83KB sc3.JPG 83KB 8.jpg 81KB 17.jpg 80KB 14.jpg 80KB 6.jpg 80KB sc4.JPG 79KB sc6.JPG 78KB共 153 条
- 1
- 2
资源评论
