web学习习题(html5编写)

(106) 2024-04-03 18:01:01

制作我的第一个网页

<head>
	<meta charset="{CHARSET}">
	<title>我的第一个网页</title>
	<style type="text/css">
		p{
			font-size: 36px;
			color:red;
			text-align: center;
		}
	</style>
</head>
<body>
<p>这是我的第一个网页哦。</p>	
</body>

图文混排加表格

web学习习题(html5编写) (https://mushiming.com/)  第1张

列表及表单练习

web学习习题(html5编写) (https://mushiming.com/)  第2张
web学习习题(html5编写) (https://mushiming.com/)  第3张
效果图
web学习习题(html5编写) (https://mushiming.com/)  第4张

活动通知

web学习习题(html5编写) (https://mushiming.com/)  第5张
web学习习题(html5编写) (https://mushiming.com/)  第6张

web学习习题(html5编写) (https://mushiming.com/)  第7张

新闻页面

web学习习题(html5编写) (https://mushiming.com/)  第8张
web学习习题(html5编写) (https://mushiming.com/)  第9张

音乐排行榜


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>音乐排行榜</title> <style type="text/css"> *{ 
   margin:0;padding: 0;}
			.bg{ 
   width: 600px;
			height: 550px;
			background-image: repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
			margin: 50px auto;
			padding: 40px;
			border-radius: 50%;
			padding-top: 40px;
			border: 10px solid #ccc;}
			.sheet{ 
   
				width: 372px;
				height: 530px;
				background: #fff;
				border-radius: 30px;
				box-shadow: 15px 15px 12px #000;
				margin: 0 auto;
			}
			.sheet p{ 
   width: 372px;
			height: 55px;
			background: #504d58 no-repeat 70px 20px;
			margin-bottom: 2px;
			font-size: 18px;
			color: #d6d6d6;
			line-height: 55px;
			text-align: center;
			font-family: "微软雅黑";}
			.sheet .tp{ 
   width: 372px;
			height: 247px;
			background: #fff;
			background-image: url(yinyue.jpg),url(wenzi.jpg);
			background-repeat: no-repeat;
			background-position: 87px 16px ,99px 192px;
			border-radius:30px 30px 0 0;}
			.sheet .yj{ 
   border-radius: 0 0 30px 30px;}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="sheet">
				<p class="tp"></p>
				<p>vnessa——constance</p>
				<p>dogffedrd——seeirtit</p>
				<p>dsieirif——constance</p>
				<p>wytuu——qeyounted</p>
				<p class="yj">qurested——conoted</p>
			</div>
		</div>
	</body>
</html>

web学习习题(html5编写) (https://mushiming.com/)  第10张

新闻列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>企业新闻</title>
		<link rel="stylesheet" href="style05.css" type="text/css" />
	</head>
	<body>
		<div class="all">
			<h2 class="head">企业新闻</h2>
			<ul class="content">
				<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>		
	</body>
</html>
body{ 
   font-size: 12px;font-family: "宋体";color: #222;}
body,h2,ul,li{ 
   padding:0;margin:0;list-style: none;}
.all{ 
   width: 300px;
height: 200px;
margin: 20px auto;}
.head{ 
   
	font-size: 12px;
	color: #fff;
	height: 30px;
	line-height: 30px;
	border-bottom: 5px solid #cc5200;
	background: #f60 url(title_bg.png) no-repeat 11px 7px;
	padding-left: 34px;
}
.content{ 
   
	padding: 25px 0 0 15px;
	background: #fff5ee;
}
.content li{ 
   height: 26px;
background: url(li_bg.png) no-repeat left top;
padding-left: 22px;
}
.content li a:link,.content li a:visited{ 
   
	color: #666;
	text-decoration: none;
}
.content li a:hover{ 
   
	color: #F60;
}

web学习习题(html5编写) (https://mushiming.com/)  第11张

通栏banner

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>通栏Banner</title>
		<link rel="stylesheet" href="style15.css"type="text/css"  />
	</head>
	<body>
	<div class="bg_banner" >
		<div class="banner">
				<!--left begin-->
				<div class="left">
					<div class="content_left">
					<p class="school_en">YOUDIANSHEJI</p>
					<p class="school_ch">有点设计</p>
					<p class="advertise">以就业为导向<br />打造理论与实践相结合的实战型人才
					</p>
					<ul class="style_a">
						<li class="current"><a href="#"></a></li>
						<li><a href="#"></a></li>
						<li><a href="#"></a></li>
						<li><a href="#"></a></li>
					</ul>
				    </div>
				</div>		
			<!-- left end -->
			<!--right begin-->
			<div class="right">
				<div class="content_right">
					<h4>课程介绍<br />INTRODUCTION</h4>
					<ul class="style_icon">
						<li><a href="#"><img src="icon1.gif"></a></li>
						<li><a href="#"><img src="icon2.gif"></a></li>
						<li><a href="#"><img src="icon3.gif"></a></li>
						<li><a href="#"><img src="icon4.gif"></a></li>
					</ul>
					<p class="cl">掌握平面设计,网页设计,UI设计,FLASH设计四门主流技术。让你有点设计</p>
				</div>			
			</div>
			<!-- right end -->
		</div>
	</div>
	</body>
</html>

body{ 
   font-family: "微软雅黑";font-size: 12px;color: #fff;}
@font-face { 
   
	font-family:dn;
	src: url(dqc.ttf);
}
body,p,ul,li,h4,img{ 
   margin: 0;padding: 0;border: 0;list-style: none;}


.bg_banner{ 
   width: 100%;height: 285px;background-color: #00214d;}
.banner{ 
   
	width: 1000px;
	height: 285px;
	margin: 13px auto 15px auto;
	overflow: hidden;



	
}
.left{ 
   
	width: 755px;
	height: 285px;
	font-weight: bold;
	background:url(pic.gif) no-repeat;
	position: relative;
	
	float: left;
}
.content_left{ 
   
	position: absolute;
	top: 75px;
	right: 45px;
	text-align: right;
}
.school_en{ 
   
	font-size: 14px;
}
.school_ch{ 
   
	font-size: 36px;
	font-family:dn;
	border-right: 5px solid #f90;
	padding-right: 10px;
}
.advertise{ 
   
	margin-top: 20px;
	font-size: 16px;
}
ul.style_a{ 
   
	margin-top: 25px;
	margin-left: 120px;
	list-style: none;
	overflow: hidden;
}
ul.style_a li{ 
   float: left;
margin-left: 10px;}
ul.style_a li a{ 
   
	background: #fff;
	width: 46px;
	height:3px;
	text-align: center;
	line-height: 22px;
	display: block;
	font-size: 18px;
	opacity: 0.3;
}
ul.style_a li.current a{ 
   opacity: 0.8;}
.right{ 
   width: 245px;
height: 285px;
background:rgba(255,255,255,0.2);
float: right;
position: relative;

}
.content_right{ 
   position: absolute;
top: 50px;left:30px}
ul.style_icon{ 
   margin-top: 10px;}
ul.style_icon li{ 
   float: left;
margin-right: 12px;}
.cl{ 
   margin-top: 55px;
margin-right: 30px;
line-height: 24px;}

web学习习题(html5编写) (https://mushiming.com/)  第12张

音乐播放界面(风吹麦浪为例)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>音乐播放界面</title>
		<link rel="stylesheet" href="style08.css" type="text/css"/>
	</head>
	<body>
		<div id="box-video">
			<video src="mailang.webm" autoplay="autoplay" loop>浏览器不支持video标签</video>
			<div class="cd">
				<div class="center"></div>
			</div>
			<div class="song">
				<h2>风中的麦浪</h2>
				<p>爱过的地方<br />当微风带着收获的味道<br />吹向我脸庞<br />想起你轻柔的话语<br />曾打湿我眼眶<br />嗯……啦……嗯……啦……<br />我们曾在田野里歌唱
				<br />在冬季盼望<br />却没能等到阳光下
				</p>
				<audio src="mailang.mp3" autoplay="autoplay" loop></audio>
			</div>
		</div>
		
	</body>
</html>

*{ 
   margin: 0;padding: 0;}
#box-video{ 
   width: 100%;height: 100%;
position: absolute;
overflow: hidden;}
#box-video video{ 
   
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -1350px;
	margin-top: -540px;
}
.cd{ 
   width: 422px;
height: 422px;
position: absolute;
top: 25%;
left: 10%;
z-index: 2;
border: 10px solid #fff;
border-radius: 50%;
box-shadow: 5px 5px 15px #000;
background: url(./cd_img.jpg) no-repeat;}
.center{ 
   
	width: 100px;
	height: 100px;
	background-color: #000;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	z-index: 3;
	border: 5px solid #FFFFFF;
	background-image: url(yinfu.gif);
	background-position: center center;
	 background-repeat: no-repeat;
}
.song{ 
   
	position: absolute;
	top: 25%;
	left: 50%;
}
@font-face { 
   
	font-family:md;
	src: url(md.ttf);
}
h2{ 
   
	font-family: md;
	font-size: 110px;
	color: #913805;
}
p{ 
   
	width: 556px;
	height: 300px;
	font-family: "微软雅黑";
	padding-left:30px;
	line-height: 30px;
	background: url(./bg.png) repeat-x;
	box-sizing: border-box;
}

web学习习题(html5编写) (https://mushiming.com/)  第13张

THE END

发表回复