HTML5第五章CSS3美化⽹页课后作业
制作北⼤青鸟课程介绍页⾯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北⼤青鸟课程介绍</title>
<style>
学生个人网页制作html代码cssdiv{
background:-moz-linear-gradient(#ECECEC,#FFFFED);
width: 598px;
line-height: 30px;
}
.one{
color: #5C9815;
}
.two{
color: #F26522;
}
p span:nth-of-type(1){background: darkslategray;color: #FFFFFD}
p span:nth-of-type(2){background: #5C9815;color: #FFFFFD}
p span:nth-of-type(3){background: chartreuse;color: #FFFFFD}
p span:nth-of-type(4){background: cyan;color: #FFFFFD}
p span:nth-of-type(5){background: fuchsia;color: #FFFFFD}
p span:nth-of-type(6){background: lightgreen;color: #FFFFFD}
</style>
</head>
<body>
<div>
<p><img src="图⽚素材/title.gif"></p>
<p><img src="图⽚素材/img_01.png"></p>
<p class="one"><span>逆向课程设计：</span> 以企业需求决定课程设计内容，确保训练内容及深度和企业需求⼀致<br> <span>模拟学员学习路线：</span> 强调难点和复杂技能点的反复训练，⼒求学习效果和学习体验<br>
<span>互联⽹作为教学环境：</span> 学员的⽇常教学和训练均在互联⽹线上进⾏<br>
<span>学习挡板监控⽹上学习效果：</span> 每个学习阶段设置线上线下测试，严密监控学习效果<br>
<span>真实开发项⽬经验积累：</span>采⽤专业互联⽹企业提供的真实项⽬作为模拟开发</p>
<p><img src="图⽚素材/img_02.png"></p>
<p class="two"><span>【实⽤性】—— </span>以就业岗位需求为导向，重点讲解企业80％的时间在使⽤的20％的技术<br> <span>【权威性】—— </span> 与来⾃百度等知名企业的专家联合开发<br>
<span>【专业性】—— </span>引进业内资深⼈才和典型⾏业开发项⽬<br>
<span>【真实性】——</span>在互联⽹真实环境下进⾏教学和训练<br>
<span>【易学性】—— </span>在线培训模式，24⼩时专家在线解答疑难问题<br>
<span>【完整性】—— </span>利⽤SNS虚拟社区：学习、⼈脉双丰收</p>
中公教育前端培训
</div>
</body>
</html>
制作席慕容的诗《初相遇》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初相遇</title>
<style>
div{
background:-moz-linear-gradient(#CAEFFE,#FFFFED);
width: 400px;
}
}
h1 .one{
font-size: 30px;
color: #1F87CC;
}
h1{font-size: 18px;
text-align: center;
text-shadow: black 2px 2px 2px;
}
p{
font-size: 12px;
text-indent: 2em;
line-height: 22px;
}
p .two{
color: darkorchid;
font-size: 18px;
font-weight: bold;
text-shadow: black 2px 2px 2px ;
}
p .thr{
font-style: italic;
color: blue;笔记本电脑死机怎么恢复
font-size: 16px;
}
div p:last-child{
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1><span class="one">初相遇</span> ⽂/席慕容</h1>
<p><span class="two">美</span>丽的梦和美丽的诗⼀样，都是可遇⽽不可求的，常常在最没能料到的时刻⾥出现。</p>
<p>我喜欢那样的梦，在梦⾥，⼀切都可以重新开始，⼀切都可以慢慢解释，⼼⾥甚⾄还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span class="thr" >胸怀中满溢着幸福，只因你就在我眼前，对我微笑，</span>⼀如当年。</p>
<p>我喜欢那样的梦，明明知道你已为我跋涉千⾥，却⼜觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>
制作淘宝⼥装分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝⼥装分类页⾯</title>
<style>
#a{
background-image: url("图⽚素材/dress01.png");
background-repeat: no-repeat;
}
attribute动词
#b{
background-image: url("图⽚素材/dress02.png");
background-repeat: no-repeat;
}
#c{
background-image: url("图⽚素材/dress03.png");
background-repeat: no-repeat;
}
#d{
background-image: url("图⽚素材/dress04.png");
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#e{
background-image: url("图⽚素材/dress05.png");
background-repeat: no-repeat;
}
h1{text-indent: 2.3em;
font-weight: bold;
font-size: 18px}
h1 a{
color: black;
text-decoration: none;
}
h1 a:hover{
jar包是压缩包吗text-decoration: underline;
}
li a{
font-size: 12px;
sql数据库select是什么意思color: black;
text-decoration: none;
}
li{
list-style: none;
text-indent: -2.3em;
}
li a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="a"><h1><a href="#">夏季流⾏</a></h1></div>
<hr>
<ul>
<li><a href="#">夏季新品</a> <a href="#">雪纺裙</a><a href="#">短袖T</a> <a href="#"铅笔裤></a><a href="#">短裤</a>
<a href="#">短袖衬衫</a> <a href="#">⼩脚⽜仔裤</a> </li>
<li><a href="#">开衫</a><a href="#">蕾丝/雪纺衫</a> <a href="#">韩版外套</a> <a href="#">⼩西装</a> <a href="#">中长款裙</a> </li>
</ul>
<h1 id="b"><a href="#">上装</a></h1>
<hr>
<ul>
<li><a href="#">T恤</a><a href="#">衬衫 </a> <a href="#">针织衫</a> <a href="#">长袖T</a> <a href="#">韩版T</a>
<a href="#">情侣衫</a><a href="#">雪纺衬衫</a> </li>
<li><a href="#">韩版衬衫</a><a href="#">防晒⾐ </a> <a href="#">休闲套装</a><a href="#">卫⾐</a> <a href="#">背⼼/吊带</a> </li>
</ul>
<h1 id="c"><a href="#">裙⼦</a></h1>
<hr>
<ul>
<li><a href="#">连⾐裙</a> <a href="#">半⾝裙 </a><a href="#">长裙</a><a href="#">短袖裙</a> <a href="#">蕾丝连⾐裙</a><a href="#">长袖裙</a> </li>
<li><a href="#">⽆袖/背⼼裙 </a><a href="#">A字裙 </a><a href="#">⽜仔裙</a> <a href="#">半⾝中长裙</a> <a href="#">半⾝短裙</a> <a href="#">包臀裙 </a </ul>
<h1 id="d"><a href="#">裤⼦</a></h1>
<hr>
<ul>
<li><a href="#">裤⼦</a><a href="#">休闲裤</a> <a href="#">⽜仔裤 </a><a href="#">打底裤</a><a href="#">长裤</a>
<a href="#">哈伦裤</a><a href="#">阔腿裤</a> </li>
<li><a href="#">短裤/热裤</a><a href="#">连体裤</a> <a href="#">七/九分裤 </a> <a href="#">⽜仔短裤</a> <a href="#">西装裤</a></li>
</ul>
<h1 id="e"><a href="#">其他⼥装</a></h1>
<hr>
<hr>
<ul>
<li><a href="#">胖M装</a><a href="#">中⽼年</a> <a href="#">婚纱</a> <a href="#">礼服</a><a href="#">旗袍</a>
<a href="#"></a><a href="#">舞台装</a> <a href="#">唐装</a> </li>
<li><a href="#">职业装</a><a href="#">全球购</a> <a href="#">⽺绒衫</a> <a href="#">⽑⾐ </a><a href="#">呢⼤⾐</a> <a href="#">⽻绒服</a> <a href="#">真⽪⽪⾐ </a> </li>
</ul>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论