寒假第18页作业jQuery

1qq聊天

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ聊天消息平台</title>
		<style>
			.div01{
				border: 1px solid gray;
				width: 500px;
				height: 400px;
				margin: 0px auto;
			}
			.div02{
				border: 1px solid white;
				width: 500px;
				height: 250px;
			}
			.div03{
				border: 1px solid white;
				width: 500px;
				height: 110px;
			}
			.div03 button{
				background-color: dodgerblue;
				border: none;
				border-radius:6px ;
				padding-top: 5px;
				padding-bottom: 5px;
				color: white;
				float: right;
				margin-right: 10px;
				margin-top: 10px;
			}
			.div03 textarea{
				width: 490px;
				height: 60px;
				border: none;
			}
			.chatText{
				border: none;
				width: 100%;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<section>
		<div class="div01">
			<div class="div02">
				<div class="head01"></div>
			</div>
			<div>
				<img src="img/icon.jpg"/ width="500px">
			</div>
			<div class="div03">
				<textarea></textarea>
				<div class="btn">
				<button id="c">关闭(C)</button>
				<button id="s">发送(S)</button>
				</div>
			</div>
		</div>
		<section>
	</body>
</html>
<script src="js/jquery-3.3.1.js">
</script>
<script>
	$(function(){
		var img=new Array("head01.jpg","head02.jpg","head03.jpg");
		var name=new Array("松松","时尚伊人","六月奇迹");
		$("#c").click(function(){
			var head=$("textarea").html();
			var num=Math.floor(Math.random()*3);
			var headname="<div><img src=images/"+img[num]+"></div>";
			var iname="<div>"+name[num]+"</div>";
			$(".head01").html();
		});
		
	});
</script>

2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,h1,h2,p,div{margin: 0; padding: 0;}
			body{font-size: 14px; line-height: 28px; font-family: "微软雅黑";}
			#book{
    			margin: 0 auto;
    			width: 800px;
    			overflow: hidden;
    			padding-top: 10px;
    			}
			img{float: left; margin-right: 10px;}
			h1{font-size: 32px; line-height: 45px;}
			.intro{clear: both; display: none;}
			h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
			.intro p{text-indent: 2em;}
		.title{
    			font-size: 24px;
    			color: #0000ff;
			}

		</style>
	</head>
	<body>
		<div id="book">
    <img src="img/book.gif" /><h1>你是人间的四月天</h1>
    <p>
       		 笑响亮了四面风<br/>
       		 轻灵在春的光艳中交舞看变<br/>
       		 你是一月早天的云烟<br/>
        	黄昏吹着风的软<br/>
       		 ....<br/>
        <a href="#" class="whole">查看全部</a><br/>
    </p>
    <div class="intro">
        <h2>内容简介</h2>
        <p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出,引起读者尖叫连连。一经上市,便引发各大报纸、媒体的一致报道。
        </p><p>有人崇拜她,把她当做女神、偶像;也有人放出话来,“喜欢她的女人,品行有问题;喜欢她的男人,脑子有问题。”
    </p><p>她是缺乏幽娴品德的女人,她喜好与人辩论,她用诗句表达她的哀愁,她精通文理,学贯中西。她对文学和艺术,具有本能的、直接的感悟。生长富贵,命运坎坷,修养让她把热情藏在里面,热情却是她生活的支柱。
        她,就是那个万千宠爱于一身的一代才女——林徽因。
    </p><p>《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集,几乎收录了林徽因所有的经典文学作品。其散文成就颇大,虽然数量不多,但风格独特,知识性强。诗歌尤多,其诗作融人中国古典诗歌和西方唯美派的一些表现手法,每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅,如行云流水,又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。</p>
    </div>
	</div>
	</body>
</html>
<script src="js/jquery-3.3.1.js"></script>
<script>
	$(document).ready(function(){
		$("h1").click(function(){
			$("h1").css("font-size","20px");
			$("h1").css("color","blue");
		});
		$("a").click(function(){
			$(".intro").show();
		});
});
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值