qianduan

myh121380

已于 2023-05-12 23:52:00 修改

阅读量52

点赞数

文章标签： css 前端 html

于 2023-05-12 21:35:16 首次发布

本文链接：https://blog.csdn.net/myh121380/article/details/130650636

版权

-----------------------------------------------------------------------------------------

1、弹出菜单

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul{

list-style: none;

width: 160px;

}

ul,li{

padding:0;

margin:0;

border-bottom: 1px solid #fff;

}

li>span{

display: block;

background-color: pink;

}

li>div{

height: 120px;

background-color: yellow;

display: none;

}

</style>

$(function(){

$("span").click(function(){

if($(this).next().is(":visible"))

$(this).next().slideUp();

else

$(this).next().slideDown().parent().siblings().children("div").slideUp();

})

</script>

</head>

<body>

<ul>

<li>

<div>我是弹出来的div1</div>

</li>

<li>

<div>我是弹出来的div2</div>

</li>

<li>

<div>我是弹出来的div3</div>

</li>

<li>

<div>我是弹出来的div4</div>

</li>

</ul>

</body>

</html>

-----------------------------------------------------------------------------------------

2、一级菜单

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul,

li {

padding: 0;

margin: 0;

list-style: none;

text-align: center;

}

#wrap {

width: 330px;

margin: 30px auto 0;

height: 30px;

background-color: blue;

border-radius: 5px;

padding: 0 5px;

}

#wrap>ul {

height: 30px;

}

#wrap>ul>li {

float: left;

width: 100px;

background-color: yellow;

height: 30px;

line-height: 30px;

margin: 0 5px;

}

a {

text-decoration: none;

color: red;

}

#wrap .uu {

background-color: pink;

display: none;

}

</style>

$(function() {

$("#wrap>ul>li").mouseenter(function() {

$(this).children("ul").show();

}).mouseleave(function() {

$(this).children("ul").hide();

})

});

</script>

</head>

<body>

<ul>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------

3、学校概况

<!doctype html>

<html>

<head>

ul,li{margin:0;padding:0}

body{font-size:12px;}ul,li{list-style: none;}

a:link,a:visited{text-decoration:none;}

div.list{width:210px;margin:40px auto 0 auto;}

.list a{display:block;font-weight:bold; height:36px;line-height:36px;}

.list ul li{background-color:#467ca2; border-bottom:solid 1px #316a91;}

.list ul li a{padding-left:10px;color:#fff;}

.list ul li ul{display:none;}

.list ul li ul li {background-color:#6196bb;border-bottom:solid 1px #467ca2;}

.list ul li ul li ul{display:none;}

.list ul li ul li a{ padding-left:20px; color:#9FC;}

.list ul li ul li ul li { background-color:#d6e6f1; border-bottom:solid 1px #6196bb; }

.list ul li ul li ul li a{ padding-left:30px;color:#316a91;}

</style>

$(function(){

$("a.inactive").click(function(){

if($(this).next("ul").is(":visible"))

$(this).next("ul").hide();

else $(this).next("ul").show().parent().siblings().find("ul").hide();

})

</script>

</head>

<body>

<ul>

<ul >

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

<ul >

<li><a href="#">本科生教育</a></li>

<li><a href="#">研究生教育</a></li>

</ul>

</li>

<ul >

<li><a href="#">本科生招生</a></li>

<li><a href="#">研究生招生</a></li>

<li><a href="#">继续教育招生</a></li>

<li><a href="#">就业信息网</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------

4、微博发布

<!doctype html>

<html>

<head>

<style>

.box {

width: 600px;

margin: 20px auto;

border: 1px solid #000;

padding: 10px;

}

#txt {

width: 400px;

height: 150px;

}

ul,

li {

padding: 0;

margin: 0;

}

ul {

list-style: none;

margin: 0 126px 0 65px;

}

li {

border-bottom: 1px dashed #ccc;

}

</style>

</script>

$(function() {

$("#btn").click(function() {

var tt = $("#txt").val();

$("#txt").val("");

var $li = $("<li>" + tt + "<li>");

$("ul").prepend($li);

});

})

</script>

</head>

<body>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------

5、苹果橘子

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

$(function() {

var $li = $("<li>哈密瓜</li>");

$("li:eq(2)").after($li);

$("li:lt(2)").clone().appendTo("ul");

});

</script>

</head>

<body>

<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>

<ul>

</ul>

</body>

</html>

-----------------------------------------------------------------------------------------

6、课题专业添加删除

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

float: left;

}

.divC {

padding-top: 80px;

margin: 0 30px;

}

select {

width: 122px;

height: 200px;

}

</style>

$(function() {

$("#btn1").click(function() {

$("#sel1>option:selected").appendTo("#sel2");

})

$("#btn2").click(function() {

$("#sel1").append($("#sel2>option:selected"));

})

</script>

</head>

<body>

<h2>课题专业选择</h2>

<span>课题适合专业</span><br>

</select>

</div>

</div>

</select>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------

7、黑白块，国际象棋

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table{

border: 3px solid #000;

}

td{

width: 50px;

height: 50px;

border: 1px solid #000;

}

</style>

$(function(){

$("tr:nth-child(odd)>td:nth-child(even)").css("background-color","#000");

$("tr:nth-child(even)>td:nth-child(odd)").css("background-color","#000");

})

</script>

</head>

<body>

</table>

</body></html>

-----------------------------------------------------------------------------------------

8、围巾

<!DOCTYPE html>

<html>

<head>

<style>

ul,li{

padding: 0;

margin:0;

list-style: none;

}

.wrapper {

width: 298px;

height: 243px;

margin: 100px auto 0;

border: 1px solid pink;

}

#left, #center, #right {

float: left;

height: 243px;

}

#left,#right{

width: 80px;

}

#center{

width:138px;

height: 243px;

}

#left li, #right li {

background-color:rgba(200,200,200,0.3);

height: 27px;

}

#left li a, #right li a {

display: block;

height: 26px;

border-bottom: 1px solid pink;

line-height: 26px;

text-align: center;

color:red;

text-decoration: none;

font-size: 12px;

}

#left li a:hover, #right li a:hover {

color: blue;

background-color:yellow;

text-decoration: underline;

}

#center li{

height: 243px;

background-color:rgba(255,255,0,0.3);

}

#center li a{

display: block;

height: 243px;

line-height:243px;

text-align: center;

font-size: 40px;

text-decoration: none;

color:#000;

}

#center>li{display: none;}

#center>li:nth-child(1){

display:block;

}

</style>

$(function(){

$("#left>li").mouseenter(function(){

var index=$(this).index();

$("#center>li:eq("+index+")").show().siblings().hide();

})

$("#right>li").mousedown(function(){

var index=$(this).index()+9;

$("#center>li:eq("+index+")").show().siblings().hide();

})

</script>

</head>

<body>

</ul>

</ul>

</ul>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------

9、全选/全不选

<!doctype html>

<html>

<head>

<title>复选框级联效果</title>

caption{

font-size: 20px;

font-weight: bold;

margin-bottom: 10px;

}

td{

text-align:center;

font-size:16px;

line-height:16px;

}

input{

display: inline-block;

width: 16px;

height: 16px;

}

input[type=button]{

width: 100px;

}

</style>

$(function() {

//点击全选按钮后，根据全选按钮的选中状态来控制下面所有子复选框的状态

$("#all").click(function() {

var ch = this.checked;

$("input[name=product]").each(function() {

this.checked = ch;

})

$("input[name=product]").click(function() {

if ($("input[name=product]:checked").length == $("input[name=product]").length)

$("#all")[0].checked = true;

else

$("#all")[0].checked = false;

})

</script>

</head>

<body>

<caption>河科大软件学院Web前端课程开设情况表</caption>

<tr>

<td>

<input type = "checkbox" id = "all" value = "全选" />全选

</td>

</tr>

<tr>

<td>网页设计基础</td>

</tr>

<tr>

<td>JavaScript程序设计</td>

</tr>

<tr>

<td>JQuery程序设计</td>

</tr>

<tr>

<td>Vue.js前端开发</td>

</tr>

<tr>

<td>移动开发技术</td>

</tr>

</table>

</body>

</html>

10、衬衫

<!doctype html>

<html>

<head>

ul,li{margin:0;padding:0}

body{font-size:20px;}ul,li{list-style: none;}

a:link,a:visited{text-decoration:none;}

div.list{width:210px;margin:40px auto 0 auto;}

.list a{display:block; height:50px;line-height:50px;}

.list ul li{ border:1px solid #9fe7fd;}

.list ul li a{padding-left:10px;color: rgb(76, 130, 180);}

.list ul li ul{display:none;}

.list ul li ul li {height:40px;line-height:40px;border: 0px;padding-left:10px;}

.selected{

background: rgb(92, 170, 233);

}

</style>

$(function(){

$("a.inactive").click(function(){

$(this).addClass("selected").parent().siblings().children("a").removeClass("selected");

if($(this).next("ul").is(":visible")){

$(this).next("ul").hide();

$(this).removeClass("selected");

}

else{

$(this).next("ul").show().parent().siblings().find("ul").hide()

}

})

</script>

</head>

<body>

<ul>

</ul>

</li>

<ul >

</ul>

</li>

<ul >

</ul>

</li>

</ul>

</div>

</body>

-----------------------------------------------------------------------------------------

11、时事体育娱乐

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul,

li {

margin: 0;

padding: 0;

}

.tab {

width: 240px;

margin: 50px;

}

.tab_menu {

overflow: hidden;

}

.tab_menu li {

float: left;

text-align: center;

cursor: pointer;

list-style: none;

padding: 1px 6px;

margin-right: 4px;

background: #F1F1F1;

border: 1px solid #898989;

border-bottom: none;

}

.tab_menu li.selected {

color: #FFF;

background: #6D84B4;

}

.tab_box {

border: 1px solid #898989;

height: 100px;

font-size: 40px;

}

.hide {

display: none

}

</style>

</head>

$(function() {

var $div_li = $("div.tab_menu ul li");

$div_li.click(function() {

$(this).addClass("selected")//当前<li>元素高亮

.siblings().removeClass("selected");//去掉其他同辈<li>元素的高亮

var index = $(this).index();//获取当前点击的<li>元素在其兄弟元素中的索引

$("div.tab_box>div")//选取子节点不选取子节点的花，会引起错误，如果里面还有div

.eq(index).show()//显示<li>元素对应的<div>元素

.siblings().hide();//隐藏其他几个同辈的<div>元素

})

</script>

<body>

<ul>

</ul>

</div>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------

12、隔行变色多选

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

table{ border:0;border-collapse:collapse;}

td{padding:2px;width:100px;}

th{text-align:left;padding:4px;border-bottom:1px solid #333;}

.odd{background:#FFF38F;} /* 奇数行样式*/

.even{background:#EEEEEE;} /* 偶数行样式*/

.selected{background:#FF6500;color:#fff;} /* 被选中行样式*/

</style>

</script>

$(function(){

//奇数行添加“.odd”样式

$("tbody>tr:even").addClass("odd");

//偶数行添加“.even”样式

$("tbody>tr:odd").addClass("even");

//复选框选中的行添加“.selected”样式

$("tr:contains('王五')").addClass("selected");

$('tbody>tr').click(function(){

if ($(this).hasClass('selected')){

$(this).removeClass('selected').find(':checkbox').prop('checked',false);

}else {

$(this).addClass('selected').find(':checkbox').prop('checked',true);

}

});

})

</script>

</head>

<body>

<table>

<thead>

</thead>

<tbody>

<td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

</tbody>

</table>

</body>

</html>

</body>

</html>

13、隔行变色同上单选

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

table{ border:0;border-collapse:collapse;}

td{padding:2px;width:100px;}

th{text-align:left;padding:4px;border-bottom:1px solid #333;}

.odd{background:#FFF38F;} /* 奇数行样式*/

.even{background:#EEEEEE;} /* 偶数行样式*/

.selected{background:#FF6500;color:#fff;} /* 被选中行样式*/

</style>

</script>

$(function(){

//输入代码

$("tbody>tr:even").addClass("odd");

$("tbody>tr:odd").addClass("even");

$(":radio:checked").parent().parent().addClass("selected");

$("tbody>tr").click(function(){

if($(this).hasClass("selected")){

$(this).removeClass("selected").find(":radio").prop("checked",false);

}else{

$(this).addClass("selected").find(":radio").prop("checked",true);

$(this).siblings().removeClass("selected")

}

})

</script>

<body>

<table>

<thead>

</thead>

<tbody>

<td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

</tbody>

</table>

</body>

</head>

</html>

-----------------------------------------------------------------------------------------

14、爱好的运动

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</script>

$(function() {

$("#CheckedAll").click(function() {

$(":checkbox").prop("checked", true);

})

$("#CheckedNo").click(function() {

$(":checkbox").prop("checked", false);

})

$("#CheckedRev").click(function() {

//each()方法是实现对jQuery对象中封装的原生对象的遍历

$(":checkbox").each(function() {

//this就代表当前遍历到的那个原生对象

this.checked = !this.checked;

})

$("#send").click(function() {

var str = "你选中的是：\n";

$(":checkbox:checked").each(function() {

str = str + $(this).val() + "\n";

})

alert(str);

})

</script>

</head>

<body>

<form>

你爱好的运动是？<br>

<input type="checkbox" name="items" value="足球">足球

<input type="checkbox" name="items" value="篮球">篮球

<input type="checkbox" name="items" value="羽毛球">羽毛球

</form>

</body>

</html>

-----------------------------------------------------------------------------------------

15、添加景点

<!DOCTYPE html>

<head>

<title>v-for指令</title>

<style>

table {

border: 3px solid red;

border-collapse: collapse;

}

td,

th {

border: 1px solid red;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<td>{{item.province}}</td>

</tr>

</table>

</div>

// 创建vue实例

var myVue = new Vue({

el: "#app",

data: {

list: [ {

id: 1,

province: "河南省",

city: "郑州市",

spot: "少林寺"

}, {

id: 2,

province: "河南省",

city: "洛阳市",

spot: "龙门石窟"

}, {

id: 3,

province: "湖北省",

city: "长沙市",

spot: "橘子洲头"

}, {

id: 4,

province: "湖南省",

city: "武汉市",

spot: "黄鹤楼"

} ]

methods: {

add() {

var len = this.list.length + 1;

var str = {

id: len,

province: "山东省",

city: "青岛市",

spot: "日照"

};

this.list.push(str);

del(x) {

this.list.splice(x, 1);

}

})

</script>

</body>

</html>

-----------------------------------------------------------------------------------------

16、简易计算器(vue.js的应用)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</select>

</div>

var vm=new Vue({

el:"#app",

data:{

n1:0,

n2:0,

result:0,

opt:'+'

methods:{

calc:function(){

switch(this.opt){

case"+":

this.result=parseInt(this.n1)+parseInt(this.n2);

break;

case"-":

this.result=parseInt(this.n1)-parseInt(this.n2);

break;

case"*":

this.result=parseInt(this.n1)*parseInt(this.n2);

break;

case"/":

this.result=parseInt(this.n1)/parseInt(this.n2);

break;

}

})

</script>

</body>

</html>

-----------------------------------------------------------------------------------------

17、图片切换((vue.js的应用)

<!DOCTYPE html>

<head>

<style>

#app{

width: 400px;

margin:0 auto;

position: relative;

}

h1{

text-align: center;

}

#app>img{

width: 100%;

height:300px;

/*overflow: hidden; 消除误差*/

display: block; /*消除误差*/

}

a>img{

width: 30px;

height: 50px;

position: absolute;

}

a>.imgl{

left:0;

top:125px;

}

a>.imgr{

right:0;

top:125px;

}

</style>

</head>

<body>

<h1>洛阳牡丹甲天下,花开时节动京城</h1>

</div>

var myVue=new Vue({

el:"#app",

data:{

imgArr:["images/mudan1.jpg",

"images/mudan2.jpg",

"images/mudan3.jpg",

"images/mudan4.jpg",

"images/mudan5.jpg",

"images/mudan6.jpg",

"images/mudan7.jpg",

"images/mudan8.jpg",

"images/mudan9.jpg",

"images/mudan10.jpg"],

index:0,

methods:{

left:function(){

this.index--;

right:function(){

this.index++;

}

})

</script>

</body>

</html>

-----------------------------------------------------------------------------------------

18、迷你记事本 (vue.js的应用)

<!DOCTYPE html>

<head>

<title>记事本举例</title>

<style>

body,

h2,

ul,

li {

padding: 0;

margin: 0;

}

body {

margin-top: 50px;

background-color: #eee;

}

#app {

width: 300px;

margin: 20px auto 0 auto;

/*border:1px solid #ccc;*/

background-color: #fff;

border-radius: 5px;

}

h2 {

text-align: center;

margin-bottom: 10px;

color: red;

}

div.write>input {

height: 35px;

width: 290px;

border: none;

border-bottom: 1px solid #ccc;

padding-left: 10px;

font-size: 20px;

font-style: italic;

outline: none;

}

ul {

list-style: none;

background-color: #fff;

padding-left: 10px;

padding-right: 10px;

}

ul>li {

line-height: 38px;

color: #000;

font-size: 20px;

border-bottom: 1px solid #ccc;

position: relative;

}

ul>li>img {

width: 24px;

position: absolute;

right: 0;

top: 9px;

display: none;

cursor: pointer;

}

ul>li:hover>img {

display: block;

}

/* ul>li:last-child{

border: none;

}*/

div.count {

height: 18px;

color: #000;

font-size: 12px;

padding: 8px 10px 0 10px;

position: relative;

}

div.count>span.right {

float: right;

cursor: pointer;

}

</style>

</head>

<body>

<h2>迷你记事本</h2>

</div>

<ul>

<li v-for="(item,index) in list"> {{index+1+": "}}{{item}}

</li>

</ul>

<span class="right" @click=" clear" v-if="list.length">Clear</span>

</div>

var myVue = new Vue({

el: "#app",

data: {

list: ["学习", "吃饭", "购物"],

inputValue: "",

methods: {

add:function(){

this.list.push(this.inputValue);

this.inputValue="";

remove:function(x){

this.list.splice(x,1);

clear:function(){

this.list=[];

}

})

</script>

</body>

</html>

-----------------------------------------------------------------------------------------

19、品牌显示案例(vue.js的应用)宝马奔驰

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table{

width:600px;

border-collapse: collapse;

margin-top:30px;

}

th,td{

border: 1px solid pink;

text-align: center;

}

</style>

</head>

<body>

<div >

</div>

<div >

序号:

</label>

名称:

</label>

搜索关键字:<input type="text" v-model="keyWords">

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>{{item.ctime|dateFormat}}</td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

// 自定义全局按键修饰符

Vue.config.keyCodes.insert=45;

// 全局的过滤器，进行时间的格式化

Vue.filter('dateFormat',function(dateStr){

// 根据给定的时间字符串，得到特定的时间

// var dt=new Date(dateStr)

var dt=dateStr;

//yyyy-mm-dd

var y=dt.getFullYear();

var m=(dt.getMonth()+1).toString().padStart(2,"0");

var d=dt.getDate().toString().padStart(2,"0");

var hh=dt.getHours().toString().padStart(2,"0");

var mm=dt.getMinutes().toString().padStart(2,"0");

var ss=dt.getSeconds().toString().padStart(2,"0");

return y+'-'+m+'-'+d+' '+hh+':'+mm+':'+ss;

// return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

})

var vm=new Vue({

el:"#app",

data:{

id:'',

name:'',

list:[

{id:1,name:'奔驰',ctime:new Date()},

{id:2,name:'宝马',ctime:new Date()},

{id:3,name:'奥迪',ctime:new Date()},

{id:4,name:'大众',ctime:new Date()}

keyWords:""//搜索关键字

methods:{

add(){

// 获取到id和name，直接从data上面获取

// 组织一个对象

//把这个对象，调用数组的相关方法，添加到tata的list中

//在Vue中已经实现了数据的双向绑定，当修改data中的数据，Vue会默认监听到数据的改动，自动把最新的数据应用到页面上

//更多的是在进行VM中Model数据的操作，同时在操作Model数据的时候，制定业务逻辑操作

var car={id:this.id,name:this.name,ctime:new Date()};

this.list.push(car)

del(id){

// 1.如何根据ID，找到要删除这一项的索引

// 2.找到索引，直接调用数组的splice方法

var _this=this;

// this.list.forEach(function(item,index){

// if(item.id==id){

// _this.list.splice(index,1);

// 不能终止

// }

// })

// // this.list.some(function(item,index){

// if(item.id==id){

// _this.list.splice(index,1);

// return true; 可以终止

// }

// })

var index=this.list.findIndex(function(item){

if(item.id==id)

return true;

})

_this.list.splice(index,1);

// 根据关键字实现数组的过滤

search(keyWords){

var newList=[];

// this.list.forEach(function(item){

// // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

// // 对于空字符串包含于任何字符串，结果为0

// if(item.name.indexOf(keyWords)!=-1)

// newList.push(item);

// })

// return newList;

// forEach、some、filter、findIndex都是数组的方法，都会对数组进行遍历执行相关操作

newList=this.list.filter(function(item){

if(item.name.includes(keyWords))

return item;

})

return newList;

}

});

</script>

</body>

</html>

myh121380

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
qianduan

姓名性别暂住地删除MAXMAN女浙江杭州
复制链接

扫一扫

qianduan

“相关推荐”对你有帮助么？