本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记,欢迎学习交流。同时感谢陆老师的精彩传授!
一、课程目标
- 练习要求
- 练习项目
二、详情解读
2.1、练习要求
1.预先看完录播视频,并跟着视频演练了其中所有代码
2.练习不应当求快,求快没有任何意义,今天所省的每一点努力,将来都你是就业的阻力,应当专注于弄懂,弄明白各属性取值含义
1.练习有两种,第一种,提供了演示代码。这种练习参照演示代码,第一遍照着写,第二遍尝试自己写,第三遍尝试优化一下
2.第二种,没有参考代码,只有要求的作业。这种应当独立完成,碰到问题先思考,看看是不是自己哪里没掌握好,如果百思不得其解,就可以求助。
2.2、练习项目介绍
1.标签练习,通过练习增加对标签的熟悉
2.定位练习,通过练习提升对定位的理解
3.布局练习,通过练习提升对网页标签与网页定位的综合动用能力
三、前端基础练习
3.1、标签练习
3.1.1、基本标签_我的第一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个页面</title>
</head>
<body>
<h1>我的第一个页面</h1>
<h2>先练习一下p、br、img标签</h2>
<p>这是一张图片,与文字在同一行
<img src="timgbg.jpeg" width=100 height=100 alt="" />
</p>
<p>这一个段落,图片换行了<br>
<img src="timgbg.jpeg" width=100 height=100 alt="" />
</p>
<h2>接下来练习a、audio、video</h2>
<h3>首先是a</h3>
<p><a href="http://python.org">python官网</a></p>
<h3>接着是audio</h3>
<p>
<audio src="../../02_css3/img/mo.mp3" autoplay="autoplay" controls="">
当前浏览器不支持audio
</audio>
</p>
<h3>然后是video</h3>
<p>
<video width="800" height="" controls="controls">
<source src="../../03_js基础/a.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>
</p>
<hr >
<p>放分隔线</p>
<hr >
<h2>静夜思<small>唐-李白</small></h2>
<blockquote>
引用:据说这首诗写在李白独居山中,非常思念家中妻子的时候写作的
</blockquote>
<p><b>床前</b><i>明月光</i></p>
<p><strong>疑是地上霜</strong>。</p>
<p><em>举头望明月</em></p>
<p><mark>低头思故乡。</mark></p>
<hr >
<p>放分隔线</p>
<hr >
<h2>数学考试</h2>
<p>sinx<sup>2</sup>=?</p>
<p>x<sub>1</sub> + x<sub>2</sub>=y<sup>2</sup></p>
<p>如果<del>x==10</del>,那么x-10!=0</p>
<p><ins>e常数其实最早是用来算利息的</ins></p>
<pre>
x=10;
y = 20;
z = x + y
</pre>
<hr >
<p>放分隔线</p>
<hr >
<h2>练习任务</h2>
<ol>
<li>熟悉所讲的标签含义</li>
<li>参照该网页书写一遍,注意字体变化</li>
</ol>
<h3>练习完后可以选择下列行为</h3>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>唱歌</li>
</ul>
</body>
</html>
运行结果:
3.1.2、基本标签_课程表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table id="table" border="15" cellspacing="1" bordercolor="#f0f" width="800" height="600">
<!--1、给定id属性-->
<caption id="caption">课程表</caption>
<!--colspan合并列 rowspan合并行-->
<tr class="tr1">
<th colspan="2">时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="4" class="td1">上午</td>
<td class="td2">第一节课 8:00~8:40</td>
<td rowspan="2" id="a" >数据处理与智能决策</td>
<td rowspan="3" id="b" >大型数据库应用开发</td>
<td rowspan="2"></td>
<td rowspan="2" id="c" >物联网应用设计</td>
<td rowspan="2" id="d" >算法设计与分析</td>
</tr>
<tr>
<td class="td2">第二节课 8:45~9:25</td>
</tr>
<tr>
<td class="td2">第三节课9:55~10:35</td>
<td rowspan="2" id="e" >大学数学(上册)</td>
<td rowspan="2" id="f" >算法设计与分析</td>
<td rowspan="2" id="g">管理学概论</td>
<td rowspan="2"></td>
</tr>
<tr>
<td class="td2">第四节课10:40~11:20</td>
<td></td>
</tr>
<tr>
<td rowspan="4" class="td1">下午</td>
<td class="td2">第五节课14:00~14:40</td>
<td rowspan="2" id="h" onclick="h()">健美操</td>
<td rowspan="2" id="i" onclick="i()">专业英语</td>
<td rowspan="2" id="j" onclick="j()">离散数学</td>
<td rowspan="3" id="k" onclick="k()">日语</td>
<td rowspan="2"></td>
</tr>
<tr>
<td class="td2">第六节课14:45~15:25</td>
</tr>
<tr>
<td class="td2">第七节课15:40~16:20</td>
<td rowspan="2" id="l" onclick="l()">形势与政策</td>
<td rowspan="2" id="m" onclick="m()">物联网应用设计</td>
<td rowspan="2" id="n" onclick="n()">食疗保健(选修课)</td>
<td rowspan="2" id="o" onclick="o()">大学数学(上册)</td>
</tr>
<tr>
<td class="td2">第八节课16:25~17:05</td>
<td></td>
</tr>
</table>
</body>
</html>
运行结果:
3.1.3、基本标签_练习表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>欢迎注册有缘相见网</h1>
<table border="" cellspacing="" cellpadding="">
<tr><th>姓名</th><td><input type="" name="" id="" value="" /></td></tr>
<tr><th>出生年月日</th><td><select name="">
<option value="2000-10-1">2000-10-1</option>
<option value="2000-10-2">2000-10-1</option>
</select></td></tr>
<tr><th>性别</th><td>
<label>男</label>
<input name="radio" type="radio" checked>
<label>女</label>
<input name="radio" type="radio" checked>
</td></tr>
<tr><th>上传照片</th><td><input type="file" name="" id="" value="" /></td></tr>
<tr><th>出生年月日</th><td><select name="">
<option value="2000-10-1">2000-10-1</option>
<option value="2000-10-2">2000-10-1</option>
</select></td></tr>
<tr><th>爱好</th><td>唱歌<input type="checkbox" name="" id="" value="" />睡觉<input type="checkbox" name="" id="" value="" /></td></tr>
<tr><th>手机号</th><td><input type="" name="" id="" value="" /></td></tr>
<tr><th>登陆密码</th><td><input type="password" name="" id="" value="" /></td></tr>
<tr><th>确认密码</th><td><input type="password" name="" id="" value="" /></td></tr>
<tr><td colspan="2"><input type="submit" name="" id="" value="--------立即注册------" /></td></tr>
</table>
</body>
</html>
运行结果:
3.2、网页练习
3.2.1、定位练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
border: 2px solid red;
width: 340px;
height: 340px;
position: relative;
margin: 0 auto;
}
.container>div{
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
color: white;
position: absolute;
}
.link1{
left: 20px;
top: 20px;
}
.link2{
right: 20px;
top: 20px;
}
.container > .link3{
background-color: blue;
color: yellow;
top: 120px;
left: 120px;
}
.link4{
bottom: 20px;
left: 20px;
}
.link5{
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="link1">box1</div>
<div class="link2">box2</div>
<div class="link3">box3</div>
<div class="link4">box4</div>
<div class="link5">box5</div>
</div>
</body>
</html>
运行结果:
3.2.2、CSS菜单练习
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS多级菜单</title>
<link rel="stylesheet" type="text/css" href="css/step1.css"/>
<link rel="stylesheet" type="text/css" href="css/step2.css"/>
<style>
/* 二级及以上菜单 */
#nav>li>ul li{
position: relative;
padding: 10px;
background: #efefef;
}
#nav>li>ul li ul{
position: absolute;
left: -1000px;
top: -1000px;
margin: 0;
padding: 0;
z-index: 100;
list-style: none;
}
#nav>li>ul li:hover>ul{
left: 100%;
top: 0px;
display: block;
}
#nav>li>ul li:hover{
background: #779e25;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">菜单一</a>
<ul>
<li><a href="#">菜单一|一级一</a></li>
<li><a href="#">菜单一|一级二</a></li>
<li><a href="#">菜单一|一级三</a></li>
</ul>
</li>
<li><a href="#">菜单二»</a>
<ul>
<li><a href="#">菜单二|一级一 »</a>
<ul>
<li><a href="#">菜单二|一级一|二级一</a></li>
<li><a href="#">菜单二|一级一|二级二</a></li>
<li><a href="#">菜单二|一级一|二级三</a></li>
</ul>
</li>
<li>
<a href="#">菜单二|一级二 »</a>
<ul>
<li><a href="#">菜单二|一级二|二级一</a></li>
<li><a href="#">菜单二|一级二|二级二</a></li>
<li><a href="#">菜单二|一级二|二级三</a></li>
</ul>
</li>
<li>
<a href="#">菜单二|一级三 »</a>
<ul>
<li><a href="#">菜单二|一级三|二级一 »</a>
<ul>
<li><a href="#">菜单二|一级三|三级一 </a></li>
<li><a href="#">菜单二|一级三|三级二 </a></li>
<li><a href="#">菜单二|一级三|三级三 </a></li>
</ul>
</li>
<li><a href="#">菜单二|一级三|二级二 »</a>
<ul>
<li><a href="#">菜单二|一级三|二级二 |三级一</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 »</a>
<ul>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级一 »</a>
<ul>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级一|五级一</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级一|五级二</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级一|五级三</a>/li>
</ul>
</li>
<li><a href="#">菜单二|一级三|二级二|三级二 |四级二</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级三 »</a>
<ul>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级三 |五级一</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级三 |五级二</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级三 |五级三</a></li>
</ul>
</li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级四</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级二 |四级五</a></li>
</ul>
</li>
<li><a href="#">菜单二|一级三|二级二 |三级三</a></li>
<li><a href="#">菜单二|一级三|二级二 |三级四</a></li>
</ul>
</li>
<li><a href="#">菜单二|一级三|二级三 »</a>
<ul>
<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>
</li>
</ul>
</li>
<li><a href="#">菜单二|一级三 </a></li>
<li><a href="#">菜单二|一级四 </a></li>
</ul>
</li>
<li><a href="#">菜单三»</a>
<ul>
<li><a href="#">菜单三|一级一 </a></li>
<li><a href="#">菜单三|一级一 </a></li>
<li><a href="#">菜单三|一级一 </a></li>
</ul>
</li>
<li><a href="#">菜单四»</a>
<ul>
<li><a href="#">菜单四|一级一 </a></li>
<li><a href="#">菜单四|一级二 </a></li>
</ul>
</li>
<li><a href="#">菜单五</a></li>
</ul>
</body>
</html>
/*step1.css文件内容*/
/* 主菜单样式 */
a {
text-decoration: none;
font-family: 微软雅黑;
white-space: nowrap;
}
#nav {
position: relative;
margin: 0;
padding: 0;
z-index: 100;
background: #528e34;
font-size: 12px;
width: 740px;
height: 30px;
list-style: none;
}
#nav>li {
position: relative;
margin:0 15px 0 15px;
background: #039AE3;
float: left;
}
#nav>li>a{
display: block;
margin: 0 10px 0 10px;
white-space: nowrap;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 14px;
font-weight: bold;
}
#nav>li:hover{
background: #0F91F5;
}
/*step2.css文件内容*/
/* 第一级下拉菜单样式 */
/* 第一级子菜单在主菜单下方 */
#nav>li>ul{
position: absolute;
left: 0px;
top: 0px;
margin: 0;
padding: 0;
z-index: 100;
list-style: none;
display: none;
}
#nav>li:hover>ul{
top: 30px;
display:block;
}
#nav>li>ul>li{
padding:10px;
background: #efefef;
}
#nav>li>ul>li:hover{
background: #779e25;
}
#nav>li>a{
display: block;
margin: 0 10px 0 10px;
white-space: nowrap;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 14px;
font-weight: bold;
}
运行结果:
3.2.3、新闻列表练习
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
h3, ul, li,p{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
a:link{
color:#000;
}
a:visited{
color: #333;
}
a:hover{
color: #666;
}
.all{
width: 800px;
}
.tab a{
display:inline-block;
height: 40px;
width: 60px;
line-height: 40px;
text-align: center;
border: 0px solid #000000;
background: #e0e0e0;
color: #666;
}
.tab a:hover{
background: #efefef;
color: #333;
}
#news_pic{
margin-top: 15px;
width: 500px;
float:left;
}
#news_pic li{
list-style: none;
width: 100%;
}
.pic_left{
float:left;
width: 150px;
}
.pic_right{
padding-left:20px;
float:left;
width: 60%;
}
.pic_right p {
height: 48px;
line-height: 24px;
overflow: hidden;
}
.media{
float:left;
font-size:12px;
}
.date{
float:right;
font-size:10px;
}
#tips{
font-size: 11px;
color: #969696;
width: 100%;
text-align: center;
}
#news{
}
#news{
margin-top: 15px;
width: 150px;
float: left;
border-left: 3px solid #efefef;
font-family: "微软雅黑";
padding: 10px;
}
#news li{
list-style: none;
}
</style>
</head>
<body>
<div class="all">
<!--选项卡-->
<div class="tab">
<a href="">选项1</a>
<a href="">选项2</a>
<a href="">选项3</a>
</div>
<div id="news_pic">
<ul>
<li>
<img class="pic_left" src="../img/1.jpeg"/>
<div class="pic_right">
<h3><a href="">图文新闻列表标题</a></h3>
<p>asynchat是asyncore的高级封装模块,可以简化类似http这样的请求/响应简单的网络模式开发
</p>
<p><span class="media">新华社</span>
<em class="date">2018-09-12</em></p>
</div>
</li>
<li>
<img class="pic_left" src="../img/1.jpeg"/>
<div class="pic_right">
<h3><a href="">图文新闻列表标题</a></h3>
<p>asynchat是asyncore的高级封装模块,可以简化类似http这样的请求/响应简单的网络模式开发
</p>
<p>
<span class="media">新华社</span>
<em class="date">2018-09-12</em>
</p>
</div>
</li>
<li>
<img class="pic_left" src="../img/1.jpeg"/>
<div class="pic_right">
<h3><a href="">图文新闻列表标题</a></h3>
<p>asynchat是asyncore的高级封装模块,可以简化类似http这样的请求/响应简单的网络模式开发
</p>
<p>
<span class="media">新华社</span>
<em class="date">2018-09-12</em>
</p>
</div>
</li>
<li>
<img class="pic_left" src="../img/1.jpeg"/>
<div class="pic_right">
<h3><a href="">图文新闻列表标题</a></h3>
<p>asynchat是asyncore的高级封装模块,可以简化类似http这样的请求/响应简单的网络模式开发
</p>
<p>
<span class="media">新华社</span>
<em class="date">2018-09-12</em>
</p>
</div>
</li>
</ul>
</div>
<div id="news">
<h3>新闻列表</h3>
<ul>
<li><a href="">标题1</a></li>
<li><a href="">标题1</a></li>
<li><a href="">标题1</a></li>
<li><a href="">标题1</a></li>
<li><a href="">标题1</a></li>
</ul>
</div>
</div>
</body>
</html>
运行结果:
3.3、动画练习
3.3.1、太阳的东升西落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
height: 800px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
.sky{
width: 800px;
height: 500px;
background-color: #262626;
animation: sky 10s linear 1 forwards;
}
@-webkit-keyframes sky{
0%{
background-color: #262626;
}
50%{
background-color: #2E4171;
}
70%{
background-color: #2E4171;
}
100%{
background-color: #262626;
}
}
.ground{
width: 800px;
height: 300px;
background-color: #ccc;
position: absolute;
left: 0;
top: 500px;
z-index: 1;
animation: ground 10s linear infinite forwards;
}
@-webkit-keyframes ground{
0%{
background-color: #ccc;
}
50%{
background-color: #174A0B;
}
70%{
background-color: #174A0B;
}
100%{
background-color: #ccc;
}
}
.sun{
width: 200px;
height: 200px;
background-color: red;
border-radius: 100px;
position: absolute;
left: 590px;
top: 600px;
animation: sun 10s ease 1 forwards;
}
@-webkit-keyframes sun{
0%{
left: 590px;
top: 600px;
background-color: red;
}
33%{
left: 590px;
top: 20px;
background-color: yellow;
}
66%{
left: 10px;
top: 20px;
background-color: yellow;
}
100%{
left: 10px;
top: 590px;
background-color: red;
}
}
.clouds{
position: absolute;
top: 200px;
left: 300px;
animation: clouds 10s ease 1 forwards;
}
@-webkit-keyframes clouds{
0%{
top: 130px;
left: -150px;
}
33%{
top: 130px;
left: 300px;
}
66%{
top: 130px;
left: 350px;
}
100%{
top: 130px;
left: 810px;
}
}
.cloud1,.cloud2,.cloud3{
width: 100px;
height: 50px;
border-radius: 50px/25px;
background-color: white;
position: absolute;
left: 0;
top: 0;
}
.cloud2{
top: -10px;
left: 30px;
}
.cloud3{
top: 5px;
left: 50px;
}
.moon{
position: absolute;
right: 170px;
top: 20px;
opacity: 0;
animation: moon 3s linear 11s 1 forwards;
}
@-webkit-keyframes moon{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.y{
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 75px;
position: absolute;
left: 0;
top: 0;
}
.d{
width: 150px;
height: 150px;
background-color: #262626;
border-radius: 75px;
position: absolute;
left: -50px;
}
</style>
</head>
<body>
<div class="container">
<div class="sky"></div>
<div class="ground"></div>
<div class="sun"></div>
<div class="clouds">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
</div>
<div class="moon">
<div class="y"></div>
<div class="d"></div>
</div>
</div>
</body>
</html>
运行结果:
3.3.2、太阳的东升西落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.stage>img{
position: absolute;
left:0;
top:0;
width: 200px;
height: 200px;
}
.stage{
position: absolute;
left: 200px;
top: 200px;
width:200px;
height:200px;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(0deg);
animation: img_roate 5s linear infinite;
}
@-webkit-keyframes img_roate{
from{
transform: rotateX(-30deg) rotateY(10deg);
}
to{
transform: rotateX(-30deg) rotateY(1090deg);
}
}
/*img{display: none;}*/
img{
opacity: 0.5;
/* box-shadow: 1px 1px 10px greenyellow; */
}
img:nth-child(1){
transform:translateZ(100px);
}
img:nth-child(2){
transform: rotateY(180deg) translateZ(100px);
}
img:nth-child(3){
transform: rotateY(90deg) translateZ(100px);
}
img:nth-child(4){
transform: rotateY(-90deg) translateZ(100px);
}
img:nth-child(5){
transform: rotateX(90deg) translateZ(100px);
}
img:nth-child(6){
transform: rotateX(-90deg) translateZ(100px);
}
</style>
<body>
<div class="stage">
<img src="img/6-1.jpg" />
<img src="img/6-2.jpg" />
<img src="img/6-3.jpg"/>
<img src="img/6-4.jpg"/>
<img src="img/6-5.jpg"/>
<img src="img/6-6.jpg"/>
</div>
</body>
</html>
运行结果:
3.3.2、骰子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.box{
position: relative;
left: 100px;
top: 100px;
width: 300px;
height:300px;
transform-style: preserve-3d;
transform: rotateX(-10deg);
animation: round 3s linear infinite;
}
@-webkit-keyframes round{
from{transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);}
to{transform: rotateX(-10deg) rotateY(360deg) rotateZ(360deg);}
}
.face{
position: absolute;
left: 0;
top: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 30px;
}
.point{
margin: auto;
background: #FF0000;
border-radius: 50% ;
}
.face1{
transform: translateZ(150px);
}
/* 定义了1点的大小,1点比其他的点要大 */
.point1{
margin:-webkit-calc(50% - 40px);
width: 80px;
height: 80px;
}
/* 2点面的样式 */
.face2{
transform: rotateX(180deg) translateZ(150px);
}
.face2>div:first-child{
margin-top: -webkit-calc(50% - 60px);
}
/* 2点, 3点,4点一样大 */
.point2,.point3,.point4{
width: 60px;
height: 60px;
}
/* 第三面定义 */
.face3{
transform: rotateX(90deg) translateZ(150px);
}
/* 3点面中第一个点的位置 */
.point3:first-child{
margin-top: -webkit-calc(50% );
margin-left: -webkit-calc(50% - 100px);
}
/* 其余两个点的位置 */
.face3 .point3,.point4{
float: left;
margin-top: -webkit-calc(50% - 60px);
}
/* 第四个面的定义 */
.face4{
transform: rotateX(-90deg) translateZ(150px);
}
/* 使用li排列4个点 */
.face4 ul{
margin: -webkit-calc(50% - 60px);
padding: 0;
width: 130px;
height:130px;
border: 1px solid #f00;
}
.face4>ul>li{
float:left;
list-style: none;
width: 60px;
height: 60px;
border-radius: 30px;
background: #f00;
border: 1px solid #f00;
}
/* 5,6面的点的排列方式是一样的 */
.face5{
transform: rotateY(90deg) translateZ(150px);
}
.face6{
transform: rotateY(-90deg) translateZ(150px);
}
.face5 ul,.face6 ul{
margin: -webkit-calc(50% - 70px);
padding: 0;
width: 130px;
height:130px;
border: 1px solid #f00;
}
.face5>ul>li,.face6>ul>li{
float:left;
list-style: none;
width: 60px;
height: 60px;
border-radius: 30px;
background: #f00;
border: 1px solid #f00;
}
</style>
<body>
<div class="box">
<!-- face样式统一定义了六个面的大小属性
每个面的位置由各自的第二个class,face1~face2各自定义
-->
<div class="face face1">
<div class="point point1">
</div>
</div>
<div class="face face2">
<div class="point point2">
</div>
<div class="point point2">
</div>
</div>
<div class="face face3">
<div class="point point3">
</div>
<div class="point point3">
</div>
<div class="point point3">
</div>
</div>
<div class="face face4">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="face face5">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="face face6">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
运行效果:
3.3.3、css动态菜单.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.nav{
width: 900px;
height: 50px;
background: #333;
color: #fff;
}
.nav>ul{
margin: 0;
height: 50px;
}
.nav>ul>li{
float:left;
list-style: none;
width: 100px;
height: 50px;
line-height: 50px;
}
.nav>ul>li>ul{
/* display: none; */
margin: 0;
padding:0;
opacity: 0;
color: #0F91F5;
height: 0px;
transition:1s;
overflow: hidden;
}
.nav>ul>li:hover>ul{
/* display: block; */
opacity: 1;
height: 100px;
}
.sub-nav>li{
height:25px;
line-height: 25px;;
}
</style>
<body>
<div class="nav">
<ul>
<li>导航1
<ul class="sub-nav">
<li>子导航1</li>
<li>子导航2</li>
<li>子导航3</li>
</ul>
</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
</body>
</html>
运行结果:
3.3.4、css动态菜单.2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.nav li{
width: 200px;
height: 30px;
overflow: hidden;
transition-duration: 1s;
}
.nav li>ul{
position: relative;
left: 200px;
transition-duration: 2s;
}
.nav li:hover{
height: 100px;
}
.nav li:hover>ul{
left: 0;
background: #0000FF;
}
</style>
<body>
<ul class="nav">
<li>链接1
<ul class="submenu">
<li>子链接1</li>
<li>子链接2</li>
<li>子链接3</li>
<li>子链接4</li>
<li>子链接5</li>
</ul>
</li>
<li>链接2</li>
<li>链接3</li>
<li>链接4</li>
<li>链接5</li>
</ul>
</body>
</html>
运行结果:
3.3.5、css动态菜单.3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.dock a{
display: inline-block;
float: left;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
border: 3px solid #ff0;
border-radius: 41px;
background: #d0a0c0;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.dock a:hover{
transform: scale(0.5);
}
</style>
<body>
<div class="dock">
<a href="">日历</a>
<a href="">keynote</a>
<a href="">number</a>
</div>
<div style="clear:both"></div>
</body>
</html>
运行结果: