1.个人博客
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework</title>
</head>
<body>
<center>
<div id="div3">
<a href="#div2">去底部</a>
<a href="#div1">跳转到歌词第一行</a>
<h1>My Favorite Singer And Music.</h1>
</div>
<hr/>
<h3>绅士</h3>
<a href="https://baike.baidu.com/item/%E8%96%9B%E4%B9%8B%E8%B0%A6/144417" >薛之谦</a>
<div id="div1">
<p>好久没见了什么角色呢</p>
<p>细心装扮着</p>
<p>白色衬衫的袖扣是你送的</p>
<p>尽量表现着像不在意的</p>
<p>频繁暴露了自欺欺人者</p>
<p>越掩饰越深刻</p>
<p>你说我说听说</p>
<p>忍着言不由衷的段落</p>
<p>我反正决定自己难过</p>
<p>我想摸你的头发</p>
<p>只是简单的试探啊</p>
<p>我想给你个拥抱</p>
<p>像以前一样可以吗</p>
<p>你退半步的动作认真的吗</p>
<p>小小的动作伤害还那么大</p>
<p>我只能扮演个绅士</p>
<p>才能和你说说话</p>
<p>我能送你回家吗</p>
<p>可能外面要下雨了</p>
<p>我能给你个拥抱</p>
<p>像朋友一样可以吗</p>
<p>我忍不住从背后抱了一下</p>
<p>尺度掌握在不能说想你啊</p>
<p>你就当刚认识的绅士</p>
<p>闹了个笑话吧</p>
<img src="../../images/1.jpg" alt="第一张照片">
<p>尽量表现着善解人意的</p>
<p>频繁暴露了不欲人知的</p>
<p>越掩饰越深刻</p>
<p>想说听说别说</p>
<p>忍着言不由衷的段落</p>
<p>我反正注定留在角落</p>
<p>我想摸你的头发</p>
<p>只是简单的试探啊</p>
<p>我想给你个拥抱</p>
<p>像以前一样可以吗</p>
<p>你退半步的动作认真的吗</p>
<p>小小的动作伤害还那么大</p>
<p>我只能扮演个绅士</p>
<p>才能和你说说话</p>
<p>我能送你回家吗</p>
<p>可能外面要下雨了</p>
<p>我能给你个拥抱</p>
<p>像朋友一样可以吗</p>
<p>我忍不住从背后抱了一下</p>
<p>尺度掌握在不能说想你啊</p>
<p>你就当刚认识的绅士</p>
<p>闹了个笑话吧</p>
<p>你能给我只左手</p>
<p>牵你到马路那头吗</p>
<p>我会像以前一样</p>
<p>看着来往的车子啊</p>
<p>我们的距离在眉间皱了下</p>
<p>迅速还原成路人的样子啊</p>
<p>越有礼貌我越害怕</p>
<p>绅士要放得下</p>
<img src="../../images/2.jpg" alt="第二张照片">
</div>
<hr/>
<div id="div2">
友情链接:<a href="https://github.com/">Github</a>|<a href="https://www.yinxiang.com/">印象笔记</a>|<a href="https://outlook.live.com">Outlook</a>
<br/>
<a href="#div3">回到顶部</a>|
<a href="mailto:fmk.insist@gmail.com">联系我们</a>
</div>
</center>
</body>
</html>
2.CSS选择器练习（餐厅练习）
1. plate 元素选择器
2. bento 元素选择器
3. #fancy ID选择器
4. plate apple 后代选择器
5. #fancy pickle 后代选择器加ID选择器
6. .small 类选择器
7. orange.small 复合选择器
8. bento orange.small 后代选择器+ 类选择器
9. plate,bento 选择器分组
10. * 通用组合器
11. plate * 通用选择器 + 后代选择器
12. plate + apple +相邻兄弟选择器
13. bento ~ pickle ~选择器
14. plate > apple 直接子元素选择器
15. plate orange:first-child
16. plate :only-child 子元素选择器
17. #fancy .small, pickle:last-child 子元素选择器+id选择器+ 后代选择器
18. plate:nth-child(3) 指定位置子元素选择器
19. bento:nth-child(2) 指定位置子元素选择器
20. apple:first-of-type | apple:first-child 子元素选择器
21. plate:nth-of-type(even) 子元素选择器
22. plate:nth-of-type(2n+3) 子元素选择器（伪类）
23. apple:only-of-type 唯一子元素选择器
24. .small:last-of-type 最后子元素选择器
25. bento:empty 空子元素选择器
26. apple:not(.small) 否定伪类选择器
-
开班信息
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班信息</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<body>
<div class="div1">
<div class="title">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<h3><a href="#">人工智能+Python-高薪就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a href="#">Android开发+测试-高薪就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a href="#">大数据软件开发-青芒工作室</a></h3>
<ul class="no-border">
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*页面字体*/
body{
font: 12px/1 宋体;
}
.div1{
width: 300px;
height: 466px;
margin: 50px auto;
}
.title{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
/*设置行高*/
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
font: 16px/36px "微软雅黑";
}
.content{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.content a{
color: black;
text-decoration: none;
font-size: 12px;
}
.content a:hover{
color: red;
}
.content ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
.content h3{
margin-top: 15px;
margin-bottom: 15px;
}
.content li{
margin-bottom: 15px;
}
.content .no-border{
border: none;
}
-
亚马逊雪碧图
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.image{
width: 119px;
height: 42px;
background-image: url(../../images/amazon-sprite_.png);
/*background-position: ;*/
/*background-position: 0 0;*/
/*z-index:10;*/
}
.btn{
background-image: url(../../images/amazon-sprite_.png);
width: 49px;
height: 40px;
background-position: 0 -330px;
/*width: 95px;*/
/*height: -355px;*/
}
.btn:hover{
background-image: url(../../images/amazon-sprite_.png);
width: 49px;
height: 40px;
background-position: -49px -330px;
}
</style>
</head>
<body>
<div class="image">
</div>
<div class="btn">
</div>
</body>
</html>
-
按钮练习
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮练习</title>
<style type="text/css">
.btn:link{
display: block;
width: 93px;
height: 29px;
background-image: url(../../images/btn.png);
}
.btn:hover{
background-position: -93px 0px;
}
.btn:active{
background-position: -186px 0px;
}
</style>
</head>
<body>
<a href="#" class="btn">
</a>
</body>
</html>
6.特征布局：翻页（所需知识点：盒模型、内联元素）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页</title>
<style type="text/css">
.page{
width: 960px;
height: 42px;
border: 1px slategray solid;
margin: 50px auto;
text-align: center;
}
a{
color: black;
font: 12px "雅黑";
background-color:gold;
text-decoration: none;
padding: 5px 10px;
position:relative;
top: 9px;
}
span{
position: relative;
top: 5px;
}
a:hover{
background-color: #cc0000;S
}
</style>
</head>
<body>
<div class="page">
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span>...</span>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#">下一页</a>
</div>
</body>
</html>
7.特征布局：导航条01（所需知识点：盒模型、行内元素布局）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条01</title>
<style type="text/css">
.gps{
width: 960px;
height: 42px;
border: 1px black solid;
margin: 50px auto;
text-align: center;
}
li{
list-style: none;
}
a,span{
float: left;
padding:0px 15px;
text-decoration: none;
font: 14px "雅黑";
color: black;
margin: -5px 0px;
position: relative;
left: 59px;
}
a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<div class="gps">
<ul>
<li><a href="#">首页</a></li>
<span>|</span>
<li><a href="#">网站建设</a></li>
<span>|</span>
<li><a href="#">程序开发</a></li>
<span>|</span>
<li><a href="#">网络营销</a></li>
<span>|</span>
<li><a href="#">企业VI</a></li>
<span>|</span>
<li><a href="#">案例展示</a></li>
<span>|</span>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
8.导航条02
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条02</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
text-align: center;
}
.gps{
width: 960px;
height: 40px;
background-color: #55a8ea;
margin: 50px auto;
position: relative;
}
a{
text-decoration: none;
width: 100px;
float:left;
font:14px "雅黑";
color: #fff;
line-height: 40px;
}
a:hover{
background-color: #00619f;
}
.new{
position: absolute;
left: 430px;
z-index: 1;
top:-5px;
}
</style>
</head>
<body>
<div class="gps">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#" class="qiye">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<img src="../../images/new.png" class="new">
</div>
</body>
</html>
9.图片列表
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 960px;
height: 272px;
border: 1px slategray solid;
margin: 50px auto;
}
.display{
width: 100px;
height: 50px;
margin: 0 0 0 20px;
line-height: 50px;
border-bottom: 1px red solid;
text-align: center;
float: left;
}
.blank{
width: 816px;
height: 50px;
border-bottom: 1px silver solid;
float:left;
}
img{
display: block;
width: 160px;
height: 68px;
margin:20px 9px 5px 20px;
float: left;
transition: all 1s ease;
}
img:hover{
transform: translate(-10px, -10px);
}
</style>
</head>
<body>
<div class="box">
<div class="display">
<span>图片展示</span>
</div>
<div class="blank">
</div>
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
<img src="../../images/goods.jpg">
</div>
</body>
</html>
10.新闻列表
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 600px;
height: 290px;
border: 1px dimgray solid;
margin: 50px auto;
}
.box2{
width: 110px;
height: 50px;
margin: 0 0 0 20px;
line-height: 50px;
border-bottom: 1px red solid;
text-align: center;
float: left;
}
.box3{
width: 450px;
height: 50px;
border-bottom: 1px silver solid;
float:left;
text-align: right;
line-height: 50px;
float: left;
}
.box3 a{
text-decoration: none;
left: 20px;
}
.videos{
float: left;
margin-left: 20px;
border-bottom: 1px rgb(249, 249, 249) solid;
width: 560px;
height: 38px;
line-height: 38px;
}
.videos a{
text-decoration: none;
float: left;
}
.date{
display: block;
float: right;
}
.sb{
margin-bottom: 6px;
}
.bs{
margin-right: 2px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<span>新闻列表</span>
</div>
<div class="box3">
<a href="#">更多>></a>
</div>
<div class="videos">
<a href="#"><img src="../../images/dot.gif" class="sb">
<img src="../../images/icon.jpg" class="bs">少壮不努力，老大徒伤悲。</a>
<span class="date">2018-9-13</span>
</div>
<div class="videos">
<a href="#"><img src="../../images/dot.gif" class="sb">
<img src="../../images/icon.jpg" class="bs">少壮不努力，老大徒伤悲。</a>
<span class="date">2018-9-13</span>
</div>
<div class="videos">
<a href="#"><img src="../../images/dot.gif" class="sb">
<img src="../../images/icon.jpg" class="bs">少壮不努力，老大徒伤悲。</a>
<span class="date">2018-9-13</span>
</div>
<div class="videos">
<a href="#"><img src="../../images/dot.gif" class="sb">
<img src="../../images/icon.jpg" class="bs">少壮不努力，老大徒伤悲。</a>
<span class="date">2018-9-13</span>
</div>
<div class="videos">
<a href="#"><img src="../../images/dot.gif" class="sb">
<img src="../../images/icon.jpg" class="bs">少壮不努力，老大徒伤悲。</a>
<span class="date">2018-9-13</span>
</div>
<div class="videos">
<a href="#"><img src="../../images/dot.gif" class="sb">
<img src="../../images/icon.jpg" class="bs">少壮不努力，老大徒伤悲。</a>
<span class="date">2018-9-13</span>
</div>
</div>
</body>
</html>
