bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
历届学生/逯帅帅/项目开发/上课项目/小米官网/css/clear.css Normal file
View File

@@ -0,0 +1,13 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

120
历届学生/逯帅帅/项目开发/上课项目/小米官网/css/index.css Normal file
View File

@@ -0,0 +1,120 @@
.header {
height: 40px;
background: #333;
line-height: 40px;
}
.header .left li,
.header .right li {
display: inline-block;
}
.header .left li a,
.right li:nth-child(-n+3) a {
position: relative;
margin-right: 10px;
}
.header .left li a::after,
.right li:nth-child(-n+3) a::after {
content: "";
width: 1.6px;
height: 16px;
background: #424242;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 7px;
}
.header .left li:last-child a::after,
.right li:nth-child(3) a::after {
content: " ";
position: static;
}
.right li:last-child {
width: 120px;
height: 40px;
margin-left: 15px;
color: #b0b0b0;
background: #424242;
text-align: center;
position: relative;
}
.right li:last-child .dorp {
width: 316px;
height: 0;
color: #424242;
box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
background: #fff;
position: absolute;
right: 0;
line-height: 100px;
font-size: 12px;
transition: height .3s;
}
.right li:last-child span {
display: none;
transition: all 1s ease 3s;
}
.right li:last-child:hover span {
display: block;
}
.right li:last-child:hover .dorp {
height: 100px;
}
.right li:last-child i{
margin-right: 4px;
font-size: 20px;
vertical-align: -2px;
}
.header a {
color: #b0b0b0;
}
.search {
margin-top: 25px;
overflow: hidden;
}
.search .logo {
width: 55px;
height: 55px;
background: #ff6700 url("../img/mi-logo.png");
background-position: center;
}
.search ul {
margin-left: 187px;
height: 55px;
line-height: 55px;
}
.search ul li {
float: left;
padding: 0 10px;
}
.search ul li a{
color: #333;
}
.search .keyword {
width: 296px;
height: 50px;
border: 1px solid #e0e0e0;
}
.search .keyword input{
width: 245px;
height: 48px;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
border-right: 1px solid #e0e0e0;
}
.search .s_icon {
width: 51px;
height: 48px;
text-align: center;
line-height: 48px;
}
.search .s_icon:hover {
background: #ff6700;
}
.search .s_icon:hover i {
color: #fff;
}
.search .keyword i{}

11
历届学生/逯帅帅/项目开发/上课项目/小米官网/css/public.css Normal file
View File

@@ -0,0 +1,11 @@
.float_left {
float: left;
}
.float_right {
float: right;
}
.center {
width: 1226px;
margin: 0 auto;
}

99
历届学生/逯帅帅/项目开发/上课项目/小米官网/demo.html Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
display: inline-block;
}
.box_2 {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.box_3 {
width: 60px;
height: 60px;
background: red;
left: 50%;
position: absolute;
/* margin-left: -30px; */
/* margin-top: -30px; */
/* margin-left: calc(-60px / 2); */
transform: translateX(-50%) translateY(-50%);
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
margin-right: 10px;
position: relative;
}
.dorp {
position: absolute;
display: none;
width: 100px;
}
.menu li:hover .dorp {
display: block;
}
.dedd:hover span{
display: block;
transition: all 1s ease 3s;
}
.dedd span {
display: none;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box_2">
<div class="box_3"></div>
</div>
<ul class="menu">
<li>社会</li>
<li>
财经
<div class="dorp">
下拉菜单
</div>
</li>
<li>关于</li>
</ul>
<div class="dedd">
add
<span>dddddd</span>
</div>
</body>
</html>

1
历届学生/逯帅帅/项目开发/上课项目/小米官网/img/car.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614320034591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2878" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M895.857778 751.587556H324.920889c-45.226667-0.398222-82.944-36.010667-87.665778-82.773334l-39.708444-377.742222c-2.844444-26.424889 5.347556-52.849778 22.471111-72.618667a86.471111 86.471111 0 0 1 65.422222-30.350222h651.121778a87.125333 87.125333 0 0 1 64.426666 31.630222c17.066667 19.825778 25.230222 46.222222 22.471112 72.647111l-39.68 376.462223c-4.608 46.876444-42.552889 82.602667-87.921778 82.773333zM285.44 265.955556a12.8 12.8 0 0 0-9.728 4.664888 15.701333 15.701333 0 0 0-3.726222 12.202667l40.192 377.998222a13.994667 13.994667 0 0 0 13.255111 13.226667h570.424889a13.966222 13.966222 0 0 0 13.482666-13.226667l39.708445-378.026666a16.782222 16.782222 0 0 0-3.754667-12.174223 12.8 12.8 0 0 0-9.728-4.664888H285.468444zM254.008889 508.757333c-18.972444 0-34.958222-14.705778-37.233778-34.247111L172.088889 90.026667a14.193778 14.193778 0 0 0-13.255111-12.202667H37.461333C16.782222 77.824 0 60.416 0 38.912 0 17.436444 16.782222 0 37.461333 0h121.372445C203.093333 0.341333 240.298667 34.417778 246.243556 79.928889l44.942222 386.019555c1.223111 10.24-1.564444 20.593778-7.68 28.728889-6.144 8.106667-15.132444 13.368889-25.031111 14.592l-4.465778-0.512z m142.336 333.653334c27.591111 0 49.948444 23.210667 49.948444 51.882666 0 28.643556-22.357333 51.882667-49.948444 51.882667s-49.948444-23.239111-49.948445-51.882667c0-28.672 22.385778-51.911111 49.948445-51.911111z m0-77.852445c-68.949333 0-124.871111 58.083556-124.871111 129.706667 0 71.68 55.921778 129.735111 124.871111 129.735111 68.977778 0 124.871111-58.083556 124.871111-129.706667 0-34.417778-13.141333-67.413333-36.551111-91.733333a122.567111 122.567111 0 0 0-88.32-38.001778z m424.590222 77.824c20.195556 0 38.4 12.657778 46.136889 32.028445a53.361778 53.361778 0 0 1-10.808889 56.547555 48.583111 48.583111 0 0 1-54.442667 11.264 51.939556 51.939556 0 0 1-30.833777-47.928889c0-28.672 22.357333-51.911111 49.948444-51.911111z m0-77.824c-68.977778 0-124.871111 58.083556-124.871111 129.706667 0 71.68 55.893333 129.735111 124.871111 129.735111 68.949333 0 124.871111-58.083556 124.871111-129.706667 0-34.417778-13.169778-67.413333-36.579555-91.733333a122.567111 122.567111 0 0 0-88.291556-38.001778z" p-id="2879"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
历届学生/逯帅帅/项目开发/上课项目/小米官网/img/mi-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

103
历届学生/逯帅帅/项目开发/上课项目/小米官网/index.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2389461_htx44zhqt.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="center">
<ul class="left float_left">
<li>
<a href="" target="_blank">小米商城</a>
</li>
<li>
<a href="" target="_blank">MIUI</a>
</li>
<li>
<a href="" target="_blank">Iot</a>
</li>
<li>
<a href="" target="_blank">云服务</a>
</li>
</ul>
<ul class="right float_right">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">消息通知</a>
</li>
<li>
<a href="">
<i class="iconfont icon-gouwuche"></i>
购物车
</a>
<div class="dorp">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="search">
<div class="logo float_left">
</div>
<ul class="float_left">
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">手机</a>
</li>
<li>
<a href="">小机</a>
</li>
<li>
<a href="">手机</a>
</li>
<li>
<a href="">小手机</a>
</li>
<li>
<a href="">手机</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">家电</a>
</li>
</ul>
<div class="keyword float_right">
<input type="text" class="float_left" placeholder="会讲故事的 儿童牙刷">
<div class="s_icon float_left">
<i class="iconfont icon-sousuo"></i>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

19
历届学生/逯帅帅/项目开发/上课项目/小米官网/笔记.txt Normal file
View File

@@ -0,0 +1,19 @@
text-decoration: 设置文字的下划线
list-style: 设置列表的样式（序号）
display: 对元素进行行和块的转换 none
vertical-align: 设置两列文字对齐方式
上 右 下 左
padding: 0;
上下 左右
padding: 0 0;
上 左右 下
padding: 0 0 0;
上 右 下 左
padding：0 0 0 0;
padding-left: 0;
margin