web学习习题(html5编写）
制作我的第一个网页
<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>
图文混排加表格
列表及表单练习
效果图
活动通知
新闻页面
音乐排行榜
<!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>
新闻列表
<!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;
}
通栏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;}
音乐播放界面（风吹麦浪为例）
<!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;
}
THE END
