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,36 @@
<!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>
<body>
<select name="" id="">
<option value="">请选择浏览器</option>
<option value="">百度</option>
<option value="">谷歌</option>
<option value="">360</option>
</select>
<input type="text" placeholder="关键字">
<button>登录</button>
</body>
<script> var button = document.querySelector("button");//获取到body里面的button(按钮)
searchKeyWord=document.querySelector("input")
select =document.querySelector("select")
button.onclick=function (){
console.log(select.searchKeyWord[0].value);
// open(`https://cn.bing.com/search?q=${searchKeyWord.value}`)
}
</script>
</html>

View File

@@ -0,0 +1,53 @@
<!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%;
list-style: none;
text-decoration: none;
}
.menu{
height: 40px;
background: #f6f6f6;
}
.menu li{
display: inline-block;
line-height: 40px;
margin-right: 20px;
}
.center {
width: 1260px;
margin: 0 auto;
}
.menu li a {
color: #f6f6f6;
font-size: 14.4px;
}
.menu li a :hover{
color: #f6f6f6;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="">首页</a>
</li>
<li><a href="">HTML</a>
</li>
<li><a href="">css</a>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,66 @@
<!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;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 490px;
height: 450px;
border: 1px solid #d3d3d3;
}
.main img {
width: 490px;
height: 225px;
}
.main h1 {
text-align: center;
}
.main p {
text-align: center;
}
.main .login {
width: 350px;
height: 36px;
background: blue;
font-size: 16px;
text-align: center;
border: 1px solid #d3d3d3;
margin: 0 auto;
line-height: 32px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.zhihu.com/heifetz/assets/loginBackgroundImg.2c81e205.png" alt="">
<h1>登录一下</h1>
<p>更多精彩内容等你发现</p>
<div class="login">登录</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,164 @@
<!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="...">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.left{
float: left;
}
.right{
float: right;
}
.overflow{
overflow: hidden;
}
.mian{
width: 280px;
height: 442px;
padding: 0 10px;
box-sizing: border-box;
}
.main_title{
margin-bottom: 15px;
height: 40px;
line-height: 40px;
}
.main_title p{
font-size: 14px;
color: #969696;
}
.mian_title .mian_title_r i{
font-size: 13px;
}
.mian_title .mian_title_r span {
font-size: 14px;
color: #969696;
}
.mian_list li{
margin-bottom: 15px;
}
.mian_list .mian_item_left img {
width: 48px;
height: 48px;
margin-right: 10px;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="mian">
<div class="mian_title overflow">
<p class="left">推荐作者</p>
<div class="mian_title_r right">
<i class="iconfont icon-shuaxin"></i>
<span>换一批</span>
</div>
</div>
<ul class="mian_list">
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
</ul>
<div class="all">
<span>查看全部</span>
<i class="iconfont icon-jinrujiantouxiao"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.main .main_title {
width: 375px;
height: 51px;
font-size: 16px;
background-color: #ffffff;
}
.mian ul {
padding: 14px 12px;
}
.main ul li {
display: flex;
margin-bottom: 35px;
}
.main ul .img {
width: 35px;
height: 36px;
margin-right: 10px;
border-radius: 100%;
}
.main ul .all .biaoti {}
.main ul .all .biaoti .biaoti_1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.main ul .all .biaoti .biaoti_1 .name {
font-size: 14px;
margin-bottom: 5px;
color: #333333;
}
.main ul .all .biaoti .biaoti_1 .zan {
display: flex;
align-items: center;
}
.main ul .all .biaoti .biaoti_1 .zan img {
width: 13px;
height: 14px;
margin-right: 5px;
}
.main ul .all .biaoti .biaoti_1 .zan span {
font-size: 12px;
color: #999999;
}
.main ul .all .biaoti .time {
font-size: 10px;
color: #999999;
margin-bottom: 19px;
}
.main ul .all .wenben {
font-size: 14px;
color: #333333;
}
</style>
<body>
<div class="main">
<div class="main_title">全部评论</div>
<ul>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="all">
<div class="biaoti">
<div class="biaoti_1">
<div class="name">呆小瓜</div>
<div class="zan">
<img src="" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="wenben">限价房从开扣税的目标我日哦部门</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!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>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul></ul>
</body>
<script>
var result = [];
var list = [
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
'明天我想学习', '明天我们出去玩'
];
var mes =document.querySelector("input"),
ul = document.querySelector("ul");
mes.oninput = function(){
result =[]
if( mes.value.length !=0){
for(var i = 0;i<list.length;i++){
if(list[i].includes(mes.value)){
var spanText=`<span style="color:red">${mes.value}</span>`
var pushText=list[i].replace(mes.value,spanText)
result.push(pushText)
}
}
renderHTML()
}else{
ul.innerHTML =""
}
}
function renderHTML(){
var html =""
console.log(result);
result.forEach(function (v,i){
html +=`<li>${v}</>`
})
ul.innerHTML =html
}
</script>
</html>

View File

@@ -0,0 +1,58 @@
<!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>
* {
margin: 0;
padding: 0;
border: none;
outline: none;}
.main{
width: 400px;
height:300px;
border: 1px solid #000;
position: relative;
}
.main textarea {
width: 100%;
height: 100%;
resize: none;
}
</style>
<body>
<div class="main">
<textarea name="" id="" ></textarea>
<span>100/100</span>
</div>
</body>
<script>
var message=document.querySelector("textarea")
tips =document.querySelector(".main.span")
total=100
message. oninput =function(){
var sy = total - message.value.length;
if(sy<=0){
tips.innerText = "已达限制"
tips.classList.replace("hui", "red")
message.value = message.value.substring(0, 100)
}else{
tips.innerText = `100/${sy}`
tips.classList.replace("red", "hui")
}
}
</script>
</html>

View File

@@ -0,0 +1,69 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 490px;
height: 450px;
border-radius: 4px;
border: 1px solid #000;
text-align: center;
}
.main img{
width: 100%;
}
.main h1{
margin-top: 32px;
margin-bottom: 4px;
font-size: 34px;
}
.mian p{
margin-top: 4px;
margin-bottom: 36px;
font-size: 22px;
color: #444;
}
.mian .login{
width: 350px;
height: 36px;
background-color: #06f;
margin: 0 auto;
line-height: 36px;
color: #fff;
border-radius: 3px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="head">
<div class="center">
<div class="main">
<img class="logo" src="https://static.zhihu.com/heifetz/assets/loginBackgroundImg.2c81e205.png" alt="">
<h1>登录一下</h1>
<p>更多精彩内容等你发现</p>
<div class="login">登录</div>
</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@@ -0,0 +1,184 @@
<!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>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: 120px;
}
.alert {
position: inherit;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
//随机生成图片+图片的移动
//点击图片 图片点击事件 图片暂停 关闭图片弹窗 和重新运动
var clientWidth = $("body").clientWeight,
clientHeight = $("body").clientHeight,
alert = $(".alert"),
text = $(".alert_body"),
close = $(".alert_title .close"),
clickImg = null, // 保存你点击的图片的虚拟dom对象
body = $("body"),
createdId = null
//生成图片 图片运动
//随机生成图片
function createdHB() {
var x = parseInt(Math.randmo() * (clientwidth - 80))
var img = document.createElement("img");
img.src = "./p.png"
img.style = `
left: ${x}px;
top :-105px;
`
//红包点击事件
img.onclick = function () {
clickImg = img;
probability()
alert.classList.remove("hidden")
clearInterval(craetedId)
allImgAction(2)
}
body.appendchild(img)
motion(img)
}
//设置定时器让红包运动起来
function mation(el) {
el.num = setInterval(function () {
var topSet = parseInt(el.style.top) + 1
el.style.top = `${topSet}px`
if (topSet > clientHeight) {
$(".body").removechild(el)
clearInterval(el.num)
}
}, 6)
}
//关闭弹窗
close.onclick = function () {
$("body").removechild(clickImg)
alert.classList.add("hidden")
allImgAction(1)
//开始创建红包以及所需要的时间
autoCreated()
}
//计算概率
function probability() {
var prob = Math.random();
if (prob <= 0.2) {
text.innerText = `${prob}恭喜您中了1折优惠卷`
} else if (0.2 < prob && prob <= 0.8) {
text.innerText = `${prob}恭喜您中了7 折优惠卷`
} else if (prob > 0.8) {
text.innerText = `${prob}恭喜您中了3折优惠卷`
}
}
function allImgAction(type) {
var allImg = document.querySelectorAll("img");
allImg.forEach(function (v) {
type == 1 ? motion(v) : clearInterval(v.num)
})
}
function autoCreated() {
createdId = setInterval(function () {
createdHb()
}, 1000)
}
autoCreated()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

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">
<title>简述</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="main">
<div class="mian_title">
<p>推荐作者</p>
<div class="mian_title_right">
<img src="" alt="">
<span>换一批</span>
</div>
</div>
<ul class="mian_list">
<li>
<div class="main_item_left">
<img src="" alt="">
<div class="main_text">
<div class="1"><a href="">闫泽华</a></div>
<div class="2">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right">
<img src="" alt="">
<span>关注</span>
</div>
</li>
</ul>
<div class="list">
<span>查看全部</span>
<img src="" alt="">
</div>
</div>
</body>
</html>