web课堂
9.1课堂
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<link href="first.css" />
<style>
/*选择器*/
h3{
color: red;
}
/*id选择器*/
#p1{
font-size: 18px;
}
/*类选择器*/
.e1{
color: greenyellow;
}
/*后代选择器*/
p b{
font-size: 12px;
}
/*并集,交集选择器*/
p#p1,p.p2{
font-family: "楷体";
}
</style>
</head>
<body>
<h3 align="center">我是一个标题</h3>
<p id="p1">我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是
<b class="e1">加粗一下我是一个段落我是一个段落</b>
</p>
<hr size="6px" color="red" />
<p class="p2">
我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
</p>
<b class="p2">这个该不该楷体,这个不该</b>
<p>我是一个段落我是一个段落</p>
</body>
</html>
课堂小作业
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>课堂作业</title> <style> .pp1{ font-family: 隶书; font-size: 25px; color: cornflowerblue; } .ppp1{ color: red; } </style> </head> <body> <h6><b>【1.标题字应用】</b></h6> <h1 align="center">软件工程是全国就业薪酬涨幅最大的职业</h1> <h6 align="left"><b>软件工程是全国就业薪酬涨幅最大的职业</b></h6> <hr size="8px" color="#FF0000"/> <h6><b>【2.段落，字体标记应用】</b></h6> <p class="pp1"> 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。 </p> <h6><b>【3.文本标记应用】</b></h6> <p> <b>2X<sup>2</sup>+3x=9</b> <small> x<sub>1</sub>+x<sub>2</sub>=10</small><br /> <em>地址：江苏省南京市珠江路1924号</em> </p> <h6><b>【4.其他排版标记应用】</b></h6> <p> <h1 class="ppp1"> 春 思</h1> <p> --李白</p> <pre> 燕草如碧丝，秦桑低绿枝。<br/> 当君怀归日，是妾断肠时。<br/> 春风不相识，何事入罗帏？ </pre> </p> <p><blockquote> 【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情，委婉动人。</blockquote> </p> </p> </body> </html>
9.2
课堂作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第四章</title>
<style>
*{
background-color: gainsboro;
}
h4{
font-weight: bolder;
font-family: 楷体;
text-align: center;
background-color: white;
font-size: 36px;
}
.uu{
color: blue;
}
</style>
</head>
<body>
<!--无序列表，有序列表，列表嵌套-->
<h4>高校资讯</h4>
<!--<ul type="circle">
<li>无序列表</li>
</ul>-->
<hr />
<ol type="A" start="7"class="uu">
<li>国防科技大学员问鼎2014国际数模竞赛最高奖 </li>
</ol>
<ol type="a" start="1"class="uu">
<li>同济大学教授阮仪三获2014亨利•霍普•里德奖 </li>
</ol>
<ol type="A" start="2"class="uu">
<li>中科大徐春叶教授获2014年国际材料科学奖 </li>
</ol>
<ol type="1" start="12"class="uu">
<li>北京和睦家医院肺癌诊疗会诊中心成立 </li>
</ol>
<ol type="A" start="13" class="uu">
<li>兰州大学博士生获全国优秀博士学位论文提名 </li>
</ol>
</body>
</html>
9.8课堂（超链接练习）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超链接应用</title> </head> <body> <h1>超链接导航</h1> <a href="https://www.cnblogs.com/rongrongrong" name="name书签" title="title" target="_top">个人博客 </a><br /> <a href="img/3.jpg" title="鸡">小鸡</a> <h2><a href="img/3.jpg"><img src="img/3.jpg" /></a>点这个小鸡也行</h2> <h1>书签</h1> <ul> <li><a href="#aal"> aal书签</a></li> <li><a href="#bbl"> bbl书签</a></li> </ul> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h2><a = name="aal"> aal </a></h2> <p> 芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~芜湖~~ </p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h2><a name="bbl">bbl</a></h2> <p> 起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~~起飞~ </p> </body> </html>
作业：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超链接应用</title> </head> <body> <h1>主流的网页设计软件</h1> <ul> <li><a href="#Dreamweaver"><img src="t1.jpg" /> Dreamweaver</a></li> <li><a href="#Flash"><img src="t2.jpg" />Flash</a></li> <li><a href="#Adobe Fireworks"><img src="img/3.jpg" />Adobe Fireworks</a></li> <li><a href="#EditPlus">EditPlus<img src="t3.jpg" /></a></li> </ul> <h2><a name="Dreamweaver"> Dreamweaver </a></h2> <p> 芜Dreamweaver是美国Macromedia公司（现已被Adobe公司收购，成为Adobe Dreamweaver）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 </p> <h2><a name="Flash"> Flash </a></h2> <p> Flash是美国Macromedia公司所设计的二维动画软件，全称Macromedia Flash（被Adobe公司收购后称为Adobe Flash），主要用于设计和编辑Flash文档。附带的Macromedia Flash Player，用于播放Flash文档。 现在，Flash已经被Adobe公司购买，最新版本为：Adobe Flash CS6 Professional，播放器也更名为Adobe Flash Player。 </p> <h2><a name="Adobe Fireworks"> Adobe Fireworks </a></h2> <p> Adobe Fireworks可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件进行集成。在Fireworks 中将设计迅速转变为模型，或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。然后直接置入Dreamweaver 中轻松地进行开发与部署。 </p> <h2><a name="EditPlus"> EditPlus </a></h2> <p> EditPlus（文字编辑器）汉化版一套功能强大， 可取代记事本的文字编辑器，EditPlus拥有无限制的撤销与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴板的功能，能够同步于剪贴板自动将文字粘贴进 EditPlus 的编辑窗口中，让你省去粘贴的步骤。另外它也是一个非常好用的 HTML 编辑器，它除了支持颜色标记、HTML 标记，同时支持 C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装IE 3.0 以上版本，它还会结合IE 浏览器于EditPlus 窗口中，让你可以直接预览编辑好的网页（若没安装IE，也可指定浏览器路径）。 </p> </body> </html>
9.14学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.14浮动框架和滚动文字</title>
<style type="text/css">
img{
width: 160px;
height: 160px;
/* 边框*/
border: 1px solid red;
}
iframe{
width: 200px;
height: 200px;
}
marquee{
width: 400px;
height: 30px;
background-color: greenyellow;
}
</style>
</head>
<body>
<h3>浮动框架应用</h3>
<iframe src="http://www.cnblogs.com/rongrongrong" name="wcr"></iframe>
<iframe src="http://www.njust.edu.cn" width="160" height="160"></iframe>
<a href="t1.jpg">跳转 1</a>
<p align="center">
<input type="text" size="60" name="输入"/>
<input type="button" name="baidu" value="百度一下"/>
</p>
<a href="1.jpg" target="fral"><img src="1.jpg" /><br /> </a>
<a href="2.png" target="fral"><img src="2.png" /><br /><br /> </a>
<a href="3.jpg" target="fral"><img src="3.jpg" /><br /><br /> </a>
<a href="t1.jpg" target="fral"><img src="t1.jpg" /><br /><br /> </a>
<iframe src="1.jpg" name="fral"></iframe><br />
<!--
directtion 属性：left 向左滚动
behavior 属性：scroll 来回滚动slide 滚一次就停止 alternate 交替滚动
100ms 走 10 个像素
-->
<marquee direction="left" behavior="alternate"
scrollamount="10px" scrolldelay="100" >www.cnblogs.com/rongrongrong</marquee>
</body>
</html>
9.15表格设计
课堂笔记：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
table,td,tr{
text-align: center;
}
</style>
</head>
<body>
<table border="1px" width="300px" height="100px">
<caption>这是标题</caption>
<tr>
<th>姓名</th>
<<!--th colspan="2">姓名</th>-->
<!--来个跨列
跨列跨行都会多出一项，记得删了
-->
<th>单位</th>
<th>学号</th>
</tr>
<tr>
<!--<td>小王</td>-->
<!--来个跨行-->
<td rowspan="2">小王</td>
<td>机器人学院</td>
<td>201902021126</td>
</tr>
<tr>
<!--<td>小雨</td>-->
<!--上面跨行操作需要注释掉此行-->
<td>大数据学院</td>
<td>201902021126</td>
</tr>
<tr>
<td>小辰</td>
<td>大数据学院</td>
<td>201902021126</td>
</tr>
</table>
</body>
</html>
课堂小练习 11-8：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table,td,tr{ text-align: center; } </style> </head> <body> <table border="1px" width="500px" height="100px"> <caption>云计算与物联网会议日程安排表</caption> <tr> <td colspan="2">上午</td> <td colspan="2">下午</td> </tr> <tr> <td>8 10</td> <td>10 12</td> <td>14 16</td> <td>16 18</td> </tr> <tr> <td rowspan="2">领导讲话</td> <td>大会主题报告</td> <td>分会主题报告</td> <td rowspan="2">总结报告</td> </tr> <tr> <td>专家报告</td> <td>分组讨论</td> </tr> <tr> <td colspan="4">全天参观考察无锡国家物联网中心</td> </tr> </table> </body> </html>
课堂小练习 11-9（表中表）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格嵌套</title> <style type="text/css"> table,tr,th,td{ border: 1px solid black; text-align: center; width: 500px; height: 50px; list-style-type: none; /*列表前面小黑点去掉*/ text-indent: 2em; /*首行缩进两个字符 2em = 2个字符*/ } </style> </head> <body> <table> <caption><b>表格嵌套</b></caption> <tr> <td></td> <td rowspan="3">地铁4号线横穿南京，从合西到仙林，七点龙江站。根据施工计划，龙江片区要掏一个深达20多米，长520米的地铁枢纽站.目前，车站已经完成70%的体重，剩余的30%，将是建设难度最大的部分。昨天，地铁施工方特意“打招呼”，为了安全，下月起将加大围挡范围，可能影响到部分商户经营及市民的出行，至少要3个月。据介绍，4号线计划名年底通车.</td> <td>新闻链接</td> </tr> <tr> <td> <table style="width: 250px; height: 50px;"> <tr><td>科技</td></tr> <tr><td>财经</td></tr> <tr><td>探索</td></tr> </table> </td> <td rowspan="2"> /*地址懒得写*/ <li><a = href="">百度</a> </li> <li><a = href="">网易</a> </li> <li><a = href="">新浪</a> </li> <li><a = href="">搜狐</a> </li> </td> </tr> <tr> <td></td> </tr> </table> </body> </html>
9.22输入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.22浮</title>
</head>
<body>
<marquee direction="left" behavior="alternate"
scrollamount="10px" scrolldelay="100" ><a href="https://www.cnblogs.com/rongrongrong"> www.cnblogs.com/rongrongrong</a></marquee>
<form action="https://www.cnblogs.com/rongrongrong">
姓名：<input type="text" name="" placeholder="请输入你的姓名" autofocus/>
密码：<input type="password" name="" placeholder="请输入密码" maxlength="5"/>
<!--单选框 radio-->
<br />
性别：<input type="radio" name="sex" value="male"/>男
<!--checked 预先选定复选框-->
<input type="radio" name="sex" value="female" checked/>女
<!--复选框 checkbox-->
爱好：<input type="checkbox" name="bobby" value="唱"/>唱
<input type="checkbox" name="bobby" value="跳"/>跳
<input type="checkbox" name="bobby" value="rap"/>rap
<input type="checkbox" name="bobby" value="篮球"/>篮球
<br />
确定：<input type="submit" value="确定" />
重置：<input type="reset" value="重置" />
普通按钮：<input type="button" value="普通按钮"/>
文件选择：<input type="file" name="" id=""/>
隐藏框：<input type="hidden" value="" />
多行文本输入框：<textarea rows="10" cols="20" wrap="wrap"></textarea>
<!--multiple 可以多选-->
下拉列表框：
<select name="city" size="3" multiple="multiple">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="济南">济南</option>
<option value="菏泽">菏泽</option>
</select>
</form>
</body>
</html>
第一次测验：
10.12(盒子模型)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style type="text/css">
p {
font: italic bold 24px/36px 楷体;
letter-spacing: 3px;
/*字体间隔*/
text-indent: 2em;
/*首行缩进*/
text-decoration: none;
text-align: center;
/*文本居中*/
background: greenyellow url() repeat center center scroll;
/*设置背景*/
}
ul {
list-style: none;
/*去掉列表前面小黑点*/
list-style-type: none;
/*同上*/
color: white;
margin: 20px;
}
li {
background-color: gray;
line-height: 30px;
margin-bottom: 5px;
}
.pp {
width: 200px;
height: 200px;
/*padding: 20px;*/
padding-top: 20px;
padding-bottom: 20px;
border: 5px solid coral;
margin: 20px;
background-color: gray;
}
body {
width: 250px;
height: 810px;
border: 1px solid gray;
}
h3 {
width: 250px;
height: 30px;
padding-top: 10px;
padding-bottom: 5px;
background-color: blue;
color: white;
}
/* *设置全局变量 */
* {
margin: 0;
padding: 0;
}
img {
margin: 0 10px;
/*只有一个10的话,上下左右都会有20px距离,0 10表示只有左右有距离*/
}
/*伪类选择器:hover*/
/*当鼠标停留在li时*/
li:hover{
background-color: goldenrod;
}
</style>
</head>
<body>
<!--
<p>我是一个段落</p>
<p class="pp">盒子模型</p>
-->
<h3><img src="jian.png"/>师资队伍 </h3>
<ul>
<li><img src="jian2.png" />
<a>教学名师</a>
</li>
<li><img src="jian2.png" />
<a>教学能手</a>
</li>
<li><img src="jian2.png" />
<a>学生导师</a>
</li>
<li><img src="jian2.png" />
<a>人才招聘</a>
</li>
</ul>
<img src="left_pic.jpg" alt="" width="230px"/>
</body>
</html>
10.13：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 180px;
height:120px;
background: gray;
}
div div{
background: pink;
width: 50px;
height: 30px;
float: left;
border: 5px solid gray;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
10.19(弹性设计)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: ;
}
header{
width: 350px;
margin: 10px auto;
}
ul li{
list-style-type: none;
float: left;
widows: 100;px;
height: 110px;
}
img{
width: 100px;
}
img:hover{
width: 200px;
height: 200px;
position: relative;
/*绝对定位 就在左上角*/
/*position: absolute;*/
top: -45px;
left: -45px;
/*图层往前一位 默认为0*/
z-index: 1;
}
</style>
</head>
<body>
<header>
<h1>鼠标经过图片显示大图</h1>
<ul>
<li>
<img src="image41-1.jpg" />
<img src="image41-2.jpg" />
<img src="image41-3.jpg" />
</li>
<li>
<img src="image41-4.jpg" />
<img src="image41-5.jpg" />
<img src="image41-6.jpg" />
</li>
</ul>
</header>
</body>
</html>
导航菜单的书写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
header{
width:100%;
background:cornflowerblue;
}
ul.firul{
width:1000px;
height:40px;
list-style:none;
color:white;
display:flex;
margin:0 auto;
line-height:35px;
}
.firul li{
padding:0 5px;
text-align:center;
}
.secul{
list-style:none;
background:cornflowerblue;
display:flex;
flex-direction:column;
visibility:hidden;
}
li:hover .secul{
visibility:visible;
}
</style>
</head>
<body>
<header>
<ul class="firul">
<li>综合首页</li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
<li>综合首页
<ul class="secul">
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
<li>循序渐进</li>
</ul></li>
</ul>
</header>
</body>
</html>
10.27：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转转转转圈</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background: skyblue;
margin-bottom: 20px;
transition: width 2s, height 2s, background 2s;
transition: transform 2s;
}
div:hover{
width:200px;
height: 100px;
transform: rotate(50000deg);
background: pink;
}
</style>
</head>
<body>
<!--过渡属性transition:属性名称，过渡时间，过度的速度-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div3"></div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes name{
from{
background: white;
top: 0px;
left: 0px;
}
50%{
background: pink;
top: 100px;
left: 100px;
}
to{
background: skyblue;
top: 200px;
left: 200px;
}
}
@-webkit-keyframes myanimation{
from{
background: white;
top: 0px;
left: 0px;
}
50%{
background: pink;
top: 100px;
left: 100px;
}
to{
background: skyblue;
top: 200px;
left: 200px;
}
}
div{
/*动画属性animation: keygrames动画名称 时间 速度 延迟 循环播放的次数 是否逆向播放;*/
position: relative;
background: pink;
width: 100px;
height: 50px;
animation: myanimation 5s infinite alternate;
}
</style>
</head>
<body>
<div id="">
我在运动
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: gray;
}
header h1{
color: white;
font-weight: bolder;
text-align: center;
text-shadow: 4px 5px 5px black;
}
header h3{
color: lightpink;
font-weight: bolder;
text-align: center;
}
img{
width: 250px;
height: 180px;
padding: 10px;
background: white;
box-shadow: 1px 2px 3px 4px;#333;
transition: transform 2s;
}
img[title="img1"]{
transform: rotate(-10deg);
}
img[title="img2"]{
transform: rotate(-5deg);
}
img[title="img3"]{
transform: rotate(10deg);
}
img[title="img4"]{
transform: rotate(-6deg);
}
img[title="img5"]{
transform: rotate(-15deg);
}
img[title="img6"]{
transform: rotate(15deg);
}
#pic{
width: 900px;
}
#pic ul li{
list-style: none;
float: left;
list-style-type: none;
margin-right: 10px;
}
img:hover{
transform: rotate(0deg);
transform: scale(1.5,1.5);
z-index: 1;
}
</style>
</head>
<body>
<header>
<h1>777777777</h1>
<h3>666</h3>
</header>
<div id="pic">
<ul>
<li><img src="prj_8_4_1.jpg" title="img1"></li>
<li><img src="prj_8_4_2.jpg" title="img2"></li>
<li><img src="prj_8_4_3.jpg" title="img3"></li>
<li><img src="prj_8_4_4.jpg" title="img4"></li>
<li><img src="prj_8_4_5.jpg" title="img5"></li>
<li><img src="prj_8_4_6.jpg" title="img6"></li>
</ul>
</div>
</body>
</html>
11.16：
javascript判断邮箱合法性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function emailclick() {
//获取邮箱值
var emailvalue = document.form1.email.value;
var length = emailvalue.length;
var index1 = emailvalue.indexOf("@");
var index2 = emailvalue.indexOf(".");
var index3 = emailvalue.lastIndexOf(".");
// @ . 必须存在
// 两个 . 下标不能相同
// @不能是弟弟一个字符, . 不能是最后一个字符串并且和@至少隔两个字符
if(index1 != -1 && index2 != -1 && index2 > index1 + 2 &&
index1 != 0 && index2 != length - 1) {
//判断有几个 .
if(index2 = index3) flag = true;
else flag = index3 > index2 + 2 ? true : false;
} else {
flag = false;
}
ans = ""
if(flag) {
console.log("合法")
ans += "合法";
} else {
console.log("不合法")
ans += "不合法";
}
alert(ans);
}
</script>
</head>
<body>
<form name="form1">
<input type="email" name="email" id="" />
<input type="submit" value="提交" onclick="emailclick()" />
</form>
</body>
</html>
11.23：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
</head>
<body>
<form>
用户名：<input type="text" name="" id="user" value="" /><br />
密码：<input type="password" name="" id="password" value="" /><br />
<input type="submit" value="验证" onclick="fun()"/>
</form>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function fun(){
var user = $("user").value;
var pwd = $("password").value;
if(user.length > 5 && pwd.length >5){
var cnt = 0;
for(var i = 0; i < pwd.length;i++){
if((pwd.charAt(i)>= 'A' && pwd.charAt(i) <= 'Z') ||(pwd.charAt(i) >= 'a' && pwd.charAt(i) <= 'z')){
cnt++;
}
}
if(cnt < 2) alert("字母数量不够");
else alert("合法");
}else{a
alert("用户名或密码长度不够");
}
}
</script>
</body>
</html>
12.7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">http://127.0.0.1:8020/HelloHBuilder/img/image41-1.jpg
#outdiv{
width: 500px;
height: 200px;
margin: 0 auto;
position: relative;
}
#innerdiv {
opacity: 0;
text-align: center;
width: 200px;
height: 200px;
position: absolute;
top: 20px;
left: 0px;
transition: all 2s;
}
img{
width: 200px;
height: 200px;
}
#innerdiv:hover{
opacity: 0.5;
transform: scale(1.2,1.2);
}
div{
}
</style>
</head>
<body>
<div id="outdiv">
<div id="innerdiv">
图像描述
</div>
<img src="img/image41-1.jpg" />
</div>
</body>
</html>
结束，附课本所有代码：
https://sctrack.sendcloud.net/track/click/eyJuZXRlYXNlIjogImZhbHNlIiwgIm1haWxsaXN0X2lkIjogMCwgInRhc2tfaWQiOiAiIiwgImVtYWlsX2lkIjogIjE2MzI3MzIzODIzNjRfNzUzNTlfMTI5NjMyXzMzODMuc2MtMTBfOV81MV8xMjItaW5ib3VuZDAkMjc3MzIxNTU0NUBxcS5jb20iLCAic2lnbiI6ICI4YzIyOWNmY2Q4YTlmOGNkOTMxODUyY2RjOGVkOTA1ZiIsICJ1c2VyX2hlYWRlcnMiOiB7fSwgImxhYmVsIjogMCwgInRyYWNrX2RvbWFpbiI6ICJzY3RyYWNrLnNlbmRjbG91ZC5uZXQiLCAicmVhbF90eXBlIjogIjEiLCAibGluayI6ICJodHRwcyUzQS8vd3d3LndxeXVucGFuLmNvbS9ib29rUXIvZmlsZS9kb3dubG9hZCUzRnJlc291cmNlSWQlM0Q1MDQyMDA2Mzg0IiwgIm91dF9pcCI6ICIxMDYuNzUuOTAuNiIsICJjb250ZW50X3R5cGUiOiAiMSIsICJ1c2VyX2lkIjogNzUzNTksICJvdmVyc2VhcyI6ICJmYWxzZSIsICJjYXRlZ29yeV9pZCI6IDEzNjMwNH0=.html
浙公网安备 33010602011771号