first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,80 @@
<!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>
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
input,
h6 {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.menu {
}
.menu li {
float: left;
width: 60px;
text-align: center;
position: relative;
}
.iop{
position:absolute;
width: 100px;
display: none;
}
.menu li:hover .iop{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>首页</li>
<li>HTML</li>
<li>CSS
<div class="iop">
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
</div>
</li>
<li>JSS
<div class="iop">
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
</li>
<li>123</li>
</ul>
</body>
</html>

View File

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

View File

@@ -0,0 +1,348 @@
.herder_logo{
height: 72px;
background-color: #fff
}
.logo{
width: 144px;
height: 33px;
margin-top: 19.5px;
}
.search{
width: 500px;
height: 38px;
left: 50%;
margin-left: -250px;
top: 19.5px;
}
.search_input{
width: 420px;
height: 100%;
background-color: #f5f5f5;
border-radius: 19px 0px 0px 19px;
padding-left: 20px;
box-sizing: border-box;
}
.search_button{
width: 80px;
height: 100%;
line-height: 38px;
text-align: center;
background-color: #ff4141;
border-radius: 0px 19px 19px 0px;
}
.search_button i,
.search_button span{
color: #ffff;
font-size: 14px;
font-weight: 900;
}
.action ul li{
float: left;
margin-right: 12px;
width: 48px;
text-align: center;
}
.action ul li:last-child{
margin-right: 0px;
}
.action ul li:last-child img{
width: 40px;
height: 40px;
}
.action{
margin-top: 19.5px;
}
.action ul li i{
font-size: 20px;
color: #b3b3b3;
display: inline-block;
margin-bottom: 5px;
}
.action ul li p{
color: #b3b3b3;
font-size: 12px;
}
.header_menu {
height: 40px;
background: #f7f7f7;
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 8%);
}
.header_menu li{
float: left;
width: 75px;
text-align: center;
line-height: 40px;
position: relative;
}
.header_menu li a{
color: #000;
}
.active a{
font-weight: 600;
color: #ff4141!important;
}
.active a::after{
content: "";
width: 18px;
height: 3px;
position: absolute;
background-color:#ff4141 ;
left: 50%;
bottom: 0px;
margin-left: -9px;
border-radius: 5px;
}
.banner{
margin-top: 24px;
}
.lunbo{
width: 471px;
height: 266px;
border-radius: 6px;
margin-right: 16px;
}
.info_ul {
width: 713px;}
.info_ul .item{
float: left;
width: 227px;
height: 128px;
margin-right: 16px;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.info_ul li img{
width: 100%;
}
.blak{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
z-index: 2;
left: 0;
top: 0;
transition: all 0.1s ease;
display: none;
}
.info{
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
color: #fff;
left: 0;
top: 92px;
font-size: 14px;
padding: 10px;
box-sizing: border-box;
transition: all 0.25s ease;
}
.info_top{
line-height: 22px;
}
.info_center{
margin-top: 9px;
}
.info_list li{
float: left;
width: 50%;
margin-top: 5px;
}
.info_ul .item:hover .info{
top: 0px;
}
.info_ul .item:hover .blak{
display:block;
}
.info_ul .item:nth-child(3n){
margin-right: 0px;
}
.info_ul .item:nth-child(4),
.info_ul .item:nth-child(5),
.info_ul .item:nth-child(6) {
margin-bottom: 0 !important;
}
.video{
margin-top: 24px;
}
.video .title{
font-size: 28px;
font-weight: 500;
padding-left: 10px;
margin-bottom: 18px;
position: relative;
}
.video .title::after{
position: absolute;
content: "";
width: 3px;
height: 18px;
background: #ff4141;
border-radius: 1.5px;
left: 0;
top: 12px;
}
.video ul {
overflow: hidden;
}
.video ul li {
width: 227px;
border-radius: 5px;
margin: 0 16px 16px 0;
height: 186px;
float: left;
position: relative;
overflow: hidden;
}
.video ul li:last-child {
margin-right: 0 !important;
}
.video ul li:hover .icon {
bottom: -16px !important;
}
.video ul li:hover img {
transform: scale(1.2);
}
.video u .top{
height: 128px;
position: relative;
overflow: hidden;
}
.top img{
width: 100%;
height: 100%;
transition: all 0.25s ease;
}
.top span{
position: absolute;
right: 6px;
bottom: 66px;
padding: 2px 4px;
background-color: rgba(0,0,0,.8);
color: #fff;
font-size: 12px;
border-radius: 3px;
}
.top_title {
margin-top: 10px;
font-size: 14px;
color: rgba(0,0,0,.85);
}
.icon .icon_item {
float: left;
color: #666;
width: 50%;}
.video ul .top {
height: 128px;
position: relative;
overflow: hidden;
}
.top img{
width: 100%;
height: 100%;
transition: all 0.25s ease;
}
.top span{
position: absolute;
right: 6px;
bottom: 6px;
padding: 2px 4px;
background-color: rgba(0,0,0,.8);
color: #fff;
font-size: 12px;
border-radius: 3px;
}
.top_title {
margin-top: 10px;
font-size: 14px;
color: rgba(0,0,0,.85);
}
.icon {
position: absolute;
bottom: 6px;
background: #fff;
width: 100%;
transition: all 0.25s ease;
}
.icon .icon_item {
float: left;
color: #666;
width: 50%;
}
.icon .icon_item i{}
.icon .icon_item span{
font-size: 12px;
}
.footer {}
.footer_wrap {
margin-top: 46px;
height: 188px;
background: #f2f2f2;
}
.footer_top {
width: 1000px;
margin: 0 auto;
padding-top: 55px;
}
.footer_top li{
float: left;
}
.footer_top li:nth-child(1),
.footer_top li:nth-child(2),
.footer_top li:nth-child(3) {
margin-right: 108px;
}
.footer_top li a {
display: block;
color: #906668;
font-size: 14px;
margin-bottom: 24px;
}
.footer_top .line{
width: 1px;
height: 56px;
background: #979797;
margin-right: 65px;
}
.footer_top .code .text{
width: 120px;
}
.footer_top .code .text p{
color: #666;
font-size: 14px;
margin-bottom: 24px;
}
.footer_top .code img{
width: 72px;
height: 72px;
}
.footer_bottom {
height: 52px;
background-color: #444;
color: #999;
font-size: 12px;
line-height: 52px;
text-align: center;
}

View File

@@ -0,0 +1,22 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.layout {
width: 1200px;
margin: 0 auto;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,249 @@
<!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_2580548_2ntvjg0u7ml.css">
<link rel="stylesheet" href="css/clear.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/public.css">
</head>
<body>
<div class="header">
<div class="herder_logo">
<div class="layout relative">
<img src="img/logo.png" alt="图片未加载" class="logo left">
<div class="search left absolute"><!--搜索框-->
<input class="search_input left" type="text" placeholder="15头野象位临昆明">
<div class="search_button left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="action right"><!--用户头像-->
<ul>
<li>
<i class="iconfont icon-shangchuan"></i>
<p>上传</p>
</li>
<li>
<i class="iconfont icon-shouji"></i>
<p>客户端</p>
</li>
<li>
<i class="iconfont icon-shouji"></i>
<p>动态</p>
</li>
<li>
<img src="./img/user.png" alt="图片未加载">
</li>
</ul>
</div>
</div>
</div>
<div class="header_menu">
<ul class="layout">
<li class="active"><a href="">推荐</a></li>
<li><a href="">影视</a></li>
<li><a href="">音乐</a></li>
<li><a href="">VLOG</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>
<li><a href="">宠物</a></li>
<li><a href="">三农</a></li>
<li><a href="">军事</a></li>
<li><a href="">军事</a></li>
</ul>
</div>
</div>
<div class="content"><!--内容-->
<div class="layout"><!--布局-->
<div class="banner hidden"><!--横幅-->
<img class="lunbo left"
src="https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2020-8/1598620789888/2b1fc9f72cfe.jpg" alt="图片未显示">
<ul class="info_ul left"><!--重复性布局-->
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="video">
<div class="title">影视</div>
<ul><!--图片及文字容器-->
<li>
<div class="top"><!--上半部分图片-->
<img src="https://tukuimg.bdstatic.com/processed/35e851eb6e1a062e4d5d52e48be2065e.jpeg@s_0,w_660,h_370,q_80" alt="图片无法显示">
<span>00:34</span>
</div>
<p class="top_title">端午节 成都去俄么塘必备三日游攻略#端午节旅行清单#</p>
<div class="icon hidden"><!--图标部分-->
<div class="icon_itme">
<i class="iconfont icon-chakan"></i>
<span>1495</span>
</div>
<div class="icon_itme">
<i class="iconfont icon-huihua"></i>
<span>0</span>
</div>
</div>
</li>
</ul>
</div><!--影视-->
</div>
</div>
<div class="footer">
<div class="footer_wrap">
<ul class="footer_top hidden">
<li>
<a href="">品牌合作</a>
<a href="">品牌合作</a>
</li>
<li>
<a href="">品牌合作</a>
<a href="">品牌合作</a>
</li>
<li>
<a href="">品牌合作</a>
</li>
<li class="line"></li>
<li class="code hidden">
<div class="text left">
<p>扫码下载客户端</p>
<p>轻松有收获</p>
</div>
<img class="left" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdQAAAHUAQMAAAC56UsvAAAABlBMVEUAAAD///+l2Z/dAAACTUlEQVR42u3cQW7DMAxEUd3A97+lb8A2qS0OKaUFsukE+EYQJI6eu7EEmqQ64u3jHFisnT3HPPJq3yePeJx5friGPT/kYCzW0uq8eAwQe73reJkIWKyjPcu9fd3891Hu/DYYi3W291zQr+UnLPbjbP31OnNgsR9i9bnyHpaxygzC/4pzsFgH2x8Pf329fA7FYh3skvrLufAzC6JELy/zhFisg70XbU33ZYZkyNWWfCAWa2f1PtdA5X7lZeelNJGCxVrajLSPKImRpZKYsTcW62ZvVcKVMWYh5vp6lHcs1tZmzUXXc03utVglsFhju1vkrwseJRTXiB2LdbTz4fHscbWWY/R5UwuOWKybnWfm/Z8tTBKitEwgFutoa1jSFu2W69vUFrFYM6s3eetZmu3T2ROyDbyxWCebab0ZsURoaSYvqw17WKyfzZ90M0tkebHE3m2+YLFmNsdomC2VF/1QWkGwWENbO07bdq2cHWutHIv1s9rasTadrpXH7KPGYt3s0sukMXbvd1r2J2KxbrbNgtLLdGSlRmvl5c9hsU62tXxoiTxz17V/r2UIsVgXuyzvGX5HrvN6vsQzWKyVjc222dJKveRMSpyDxVpZ6TWN9o9oWldeDVewWEerx7nbWhibQvl4tS0Xi/1f21J80QuLGbSM3nqKxRpaXed7kmRpTN20WGOxVrat1TXkntu4WvUci3W3c9iudzp04wAW62/P0RIgPWUdy95wLNbNRslO76dA3dvScn1YrI/tz5KxqZWPMTYtTFism337wGLt7BcOoXzuYAD95QAAAABJRU5ErkJggg==" alt="">
</li>
</ul>
</div>
<div class="footer_bottom">
© 2021 Baidu 京ICP证030173号 京公网安备11000002000001 京网文(2017)2863-327号
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,85 @@
<!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>
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
p {
text-decoration: none;
}
.header {
width: 654px;
height: 44px;
margin: 50px auto;
}
.keyword {
height: 100%;
width: 546px;
box-sizing: border-box;
border: 2px solid #c4c7ce;
border-radius: 10px 0px 0px 10px;
float: left;
border-right: none;
background: url(../../../上课项目/car.png);
background-repeat: no-repeat;
background-size: 24px 20px;
background-position: 502px center;
padding-left: 10px;
font-size: 16px;
}
.submit{
width: 108px;
height: 100%;
background-color: #4e6ef2;
float: left;
border-radius: 0px 10px 10px 0px;
border-left:none ;
color: #fff;
font-size: 17px;
}
input {
border: none;
outline: none;
}
.keyword:focus{
border: 2px solid #4e6ef2;
border-right: none;
}
</style>
</head>
<body>
<div class="header">
<input type="text" class="keyword">
<img src="" alt="">
<input type="button" value="百度一下" class="submit">
</div>
</body>
</html>

View File

@@ -0,0 +1,108 @@
<!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>
</head>
<style>
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input {
padding: 0;
margin: 0;
}
input {
border: none;
outline: none;
}
a {
text-decoration: none;
}
.search {
width: 654px;
height: 44px;
margin: 50px auto;
}
.search .left {
width: 546px;
height: 44px;
float: left;
position:relative;
}
.left input {
width: 100%;
height: 100%;
border: 2px solid #c4c7ce;
border-radius: 10px 0 0 10px;
box-sizing: border-box;
border-right: none;
padding-left: 15px;
font-size: 16px;
}
.img {
width: 24px;
height: 20px;
background-color: black;
position:absolute;
right: 22px;
top: 50%;
margin-top: -10px;
background: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png);
background-position: 0px -51px;
}
.img:hover{
background-position: 0px -75px;
}
.submit {
width: 108px;
height: 100%;
background: #4e6ef2;
color: #fff;
float: left;
border-radius: 0 10px 10px 0;
font-size: 17px;
}
.left input :focus {
border: 2px solid #4e6ef2;
box-sizing: border-box;
}
.keyword:focus{
border: 2px solid #4e6ef2;
border-right: none;
}
</style>
<body>
<div class="search">
<div class="left">
<input type="text" class="keyword">
<div class="img"></div>
</div>
<input type="button" value="百度一下" class="submit">
</div>
</body>
</html>