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

33
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/定位练习案例.css Normal file
View File

@@ -0,0 +1,33 @@
/* 页面具体代码 */
.box{
width: 590px;
height: 470px;
background: url(https://imgcps.jd.com/ling4/100011483893/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e8/07f51781/cr/s/q.jpg);
background-size: cover;
}
.box .nav i{
font-size: 40px;
color: white;
}
.nav ,
.box {
position: relative;
}
.box .nav{
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.box ul li{
float: left;
width:10px;
height: 10px;
background: white;
border-radius: 100%;
margin-right: 5px;
}
.box ul{
position: absolute;
bottom: 15px;
left: 15px;
}

27
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/定位练习案例.html Normal file
View File

@@ -0,0 +1,27 @@
<!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">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3889063_xxq4zyzfz5g.css">
<link rel="stylesheet" href="../clear.css">
<link rel="stylesheet" href="../public.css">
<link rel="stylesheet" href="./定位练习案例.css">
<title>定位练习案例</title>
</head>
<body>
<div class="box">
<div class="nav">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-zuojiantou-copy right"></i>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

49
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/导航菜单定位.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>导航菜单定位</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1,.box2 {
list-style: none;
}
.box1>li{
margin-right: 8px;
float: left;
position: relative;
}
.box2{
display: none;
position: absolute;
left: 0;
width: 76px;
}
.box1 li:hover .box2{
display: block;
}
</style>
</head>
<body>
<ul class="box1">
<li>导航1</li>
<li>导航2</li>
<li>导航3
<ul class="box2">
<li>导航3-1</li>
<li>导航3-2</li>
<li>导航3-3</li>
<li>导航3-4</li>
</ul>
</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</body>
</html>

BIN
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/搜索.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

88
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/简书练习2.css Normal file
View File

@@ -0,0 +1,88 @@
/* 清除默认样式 */
body,ul{
margin: 0;
padding: 0;
}
/* 公共样式 */
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}
/* 页面具体样式 */
.menu{
width: 280px;
height: 500px;
}
.title{
margin-bottom: 15px;
}
.title .text{
font-size: 14px;
color: #969696;
}
.title .refresh{
font-size: 13px;
color: #969696;
}
.refresh i{
font-size: 13px;;
}
.list{
}
.list li{
overflow: hidden;
list-style: none;
margin-bottom: 15px;
}
.introduce{
margin-top: 5px;
}
.introduce .name{
font-size: 14px;
color: #333;
}
.introduce .statistic{
font-size: 13px;
color:#969696 ;
margin-top: 2px;
}
.list .photo {
width: 46px;
height: 46px;
border-radius: 25px;
border: 1px solid #ddd;
margin-right: 10px;
}
.follow{
font-size: 13px;
color: #42c02e;
margin-top: 5px;
}
.follow i{
font-size: 14px;
}
.all{
font-size: 12px;
color:#787877 ;
height: 34.56px;
border: 1px solid #dcdcdc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
line-height: 34.56px;
background: #f7f7f7;
}
.all i{
font-size: 12px;
zoom: 0.7;
vertical-align: top;
}
.all span{
/* vertical-align: top; */
}

109
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/简书练习2.html Normal file
View File

@@ -0,0 +1,109 @@
<!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/c/font_3889063_1r8lr4w2zw9.css">
<link rel="stylesheet" href="./简书练习2.css">
</head>
<body>
<div class="menu">
<div class="title hidden">
<div class="text left">作者推荐</div>
<div class="refresh right">
<i class="iconfont icon-shuaxin"></i>
换一换
</div>
</div>
<ul class="list hidden">
<li>
<img class="photo left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="introduce left">
<div class="name">卢璐说</div>
<div class="statistic">写了2215.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao "></i>
关注
</div>
</li>
<li>
<img class="photo left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="introduce left">
<div class="name">卢璐说</div>
<div class="statistic">写了2215.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao "></i>
关注
</div>
</li>
<li>
<img class="photo left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="introduce left">
<div class="name">卢璐说</div>
<div class="statistic">写了2215.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao "></i>
关注
</div>
</li>
<li>
<img class="photo left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="introduce left">
<div class="name">卢璐说</div>
<div class="statistic">写了2215.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao "></i>
关注
</div>
</li>
<li>
<img class="photo left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="introduce left">
<div class="name">卢璐说</div>
<div class="statistic">写了2215.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao "></i>
关注
</div>
</li>
<li>
<img class="photo left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="introduce left">
<div class="name">卢璐说</div>
<div class="statistic">写了2215.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao "></i>
关注
</div>
</li>
</ul>
<div class="all">
<span>查看全部</span>
<i class="iconfont icon-zhankai-copy"></i>
</div>
</div>
</body>
</html>

55
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/菜鸟教程局部导航.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>菜鸟教程局部导航</title>
<style>
*{
margin: 0;
padding: 0;
}
.menu{
width: 100%;
height: 38px;
background: #96b97d;
}
.center{
width: 1260px;
height: 100%;
margin: 0 auto;
}
.menu .center li{
list-style: none;
margin-right: 20px;
float: left;
line-height: 38px;
}
.menu .center li a{
font-size: 14.4;
text-decoration: none;
color: #fff;
}
.menu .center li a:hover{
color: #e3efd9;
}
</style>
</head>
<body>
<div class="menu">
<div class="center">
<ul>
<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>
</div>
</body>
</html>

62
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/赶集网头部.html Normal file
View File

@@ -0,0 +1,62 @@
<!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">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3889063_5bf2w5c0mi5.css">
<link rel="stylesheet" href="../public.css">
<link rel="stylesheet" href="../clear.css">
<link rel="stylesheet" href="./赶集网头部练习.css">
<title>赶集网头部</title>
</head>
<body>
<div class="nav">
<div class="center">
<div class="nav_left left logo">
<img class="left" src="https://img.58cdn.com.cn/arthurupload/hrg-fe/zp-ganji/pc/pc-header-logo-2.png" alt="">
<div class="city left">
<i class="iconfont icon-31dingwei"></i>
<span class="city_name">合肥</span>
<a href="">[切换城市]</a>
</div>
<ul class=" left menu">
<li><a href="" class="active">首页</a></li>
<li><a href="">职位</a></li>
<li><a href="">公司</a></li>
</ul>
</div>
<ul class="nav_right right">
<li>
<a href="">
<i class="iconfont icon-shouji "></i>
<span>手机上赶集</span>
<i class="iconfont icon-zhankai1"></i>
<div class="drop_menu">
<div class="drop_menu_title">扫码下载</div>
<div class="drop_menu_text">赶集直招app</div>
<img src="https://img.58cdn.com.cn/arthurupload/hrg-fe/zp-ganji/pc/gj-qrcode-1.png" alt="">
</div>
</a>
</li>
<li class="right">
<a href=""">
<i class="iconfont icon-briefcase"></i>
<span>我要招人</span>
<i class="iconfont icon-zhankai1"></i>
<div class="drop_menu">
<div class="drop_menu_title">扫码下载</div>
<div class="drop_menu_text">赶集直招app</div>
<img src="https://img.58cdn.com.cn/arthurupload/hrg-fe/zp-ganji/pc/gj-qrcode-1.png" alt="">
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

111
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/赶集网头部练习.css Normal file
View File

@@ -0,0 +1,111 @@
.nav{
height: 58px;
}
.nav .center{
width: 1190px;
height: 42px;
margin: 0 auto;
}
.logo img{
width:138.7px;
height: 42px;
margin-top: 8px;
margin-right: 45px;
}
.logo .city{
margin-right: 45px;
}
.logo .city i{
font-size: 15px;
vertical-align: revert;
}
.logo .city .city_name{
font-size: 15px;
color: #333;
}
.logo .city a{
font-size: 12px;
margin-left: 10px;
color: #32be4a;
}
.logo .city, .logo .menu{
line-height: 58px;
}
.logo .menu .active{
color: #32be4a;
font-weight: 700;
position: relative;
}
.logo .menu .active::after{
content:"";
width: 23px;
height: 3px;
background: #32be4a;
position: absolute;
bottom: -18px;
left: 50%;
transform: translate(-50%);
}
.logo .menu li{
margin-right: 40px;
}
.logo .menu li a{
font: 15px;
color: #333;
font-weight: 400;
line-height: 1;
}
.nav_right li a:hover .drop_menu{
display:block
}
.menu li{
float: left;
}
.nav_right li{
line-height: 58px;
float: left;
margin-right: 15px;
}
.nav_right a{
font-size: 16px;
color: #333;
position: relative;
}
.nav_right a>i{
/* font-size: 20px; */
color: #333;
vertical-align: middle;
}
.nav_right .icon-zhankai {
font-size: 17px;
}
.drop_menu img{
width: 100px;
height: 100px;
margin-top: 6px;
}
.nav_right .drop_menu{
text-align: center;
background: white;
line-height: 22px;
padding: 18px 25px;
position: absolute;
top:23px;
left: 50%;
box-shadow: 0 0 10px 0 rgb(237, 237, 237);
border-radius: 10px;
transform:translateX(-50%) ;
display: none;
}
.drop_menu_title{
font-size: 16px;
font-weight: 700;
color: #333;
}
.drop_menu_text{
font-size: 14PX;
font-weight: 400;
}

25
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/赶集网搜索框框练习 定位版.html Normal file
View File

@@ -0,0 +1,25 @@
<!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">
<link rel="stylesheet" href="../public.css">
<link rel="stylesheet" href="../clear.css">
<link rel="stylesheet" href="./赶集网搜索框练习定位版.css">
<title>赶集网搜索框练习定位版</title>
</head>
<body>
<div class="main">
<div class="search_wrap left">
<img src="./搜索.png" alt="">
<input placeholder="请输入职位名称或公司">
</div>
<div class="button left">搜索</div>
</div>
</body>
</html>

18
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/赶集网搜索框框练习.html Normal file
View File

@@ -0,0 +1,18 @@
<!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">
<link rel="stylesheet" href="../public.css">
<link rel="stylesheet" href="../clear.css">
<link rel="stylesheet" href="./赶集网搜索框练习.css"><title>Document</title>
</head>
<body>
<div class="main">
<input class="search_text left" type="search" placeholder="请输入职位名称或公司">
<div class="button hidden">搜索</div>
</div>
</body>
</html>

27
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/赶集网搜索框练习.css Normal file
View File

@@ -0,0 +1,27 @@
.main{
width: 716px;
height: 42px;
}
.search_text{
width:600px ;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius:10px ;
border: 1px solid #39bc30;
box-sizing: border-box;
background: white url(./搜索.png) no-repeat 15px center;
background-size:16px;
padding-left: 42px;
}
.main .button{
width:116px;
height:100% ;
background: #39bc30;
border-top-right-radius: 10px;
border-bottom-right-radius:10px ;
font-size: 16px;
font-weight: 700;
color: white;
text-align: center;
line-height: 42px;
}

51
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-10/赶集网搜索框练习定位版.css Normal file
View File

@@ -0,0 +1,51 @@
.main{
width: 716px;
height: 42px;
}
.search_wrap{
position: relative;
width:600px ;
height: 100%;
}
.search_wrap input{
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius:10px ;
border: 1px solid #39bc30;
box-sizing: border-box;
padding-left: 42px;
}
.search_wrap img{
width: 16px;
height:16px ;
position: absolute;
top:50%;
transform: translateY(-50%);
left: 15PX;
}
/* .search_text{
border-top-left-radius: 10px;
border-bottom-left-radius:10px ;
border: 1px solid #39bc30;
box-sizing: border-box;
background: white url(./搜索.png) no-repeat 15px center;
background-size:16px;
padding-left: 42px;
}*/
.main .button{
width:116px;
height:100% ;
background: #39bc30;
border-top-right-radius: 10px;
border-bottom-right-radius:10px ;
font-size: 16px;
font-weight: 700;
color: white;
text-align: center;
line-height: 42px;
}