原来当初没有发出去的保存到了草稿箱。。。
6.19实训第一天,讲了各个专业,java,ui,项目经理,本宝宝选择了java。下午cep,职业发展课程,尴尬
6.20,一整天cep,职业礼仪啥的
6.21,简单的html
贴上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网易邮箱登录</title>
</head>
<body>
<table border="0" width="65%" height="600px" align="center">
<tr>
<td height="20%">
<table border="0" height="100%" width="100%">
<tr>
<td width="50%"><img src="img/163logo.gif"></td>
<td width="50%" align="right">免费邮 企业邮 VIP邮箱 帮助 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="70%">
<table border="0px" height="100%" width="100%">
<tr>
<td width="50%">
<table border="0px" height="100%" width="100%">
<tr>
<td><img src="img/imap.jpg"></td>
</tr>
<tr>
<td>
.163/126/yeah三大免费邮箱均默认开放<br/>
.全面支持iPhone/iPad及Android等系统<br/>
.客户端、手机与网页,实现发送、阅读邮件立即同步普通登录手机号登录<br/>
</td>
</tr>
</table>
</td>
<td width="50%" >
<table border="0px" height="100%" width="100%">
<tr>
<td >
<img src="img/loginIcon.gif" align="top"><b>普通登录</b>
<br/>
</td>
</tr>
<tr>
<td align="center">
用户名:<input type="text" />@163.com<br/>
</td>
</tr>
<tr>
<td align="center">
密 码:<input type="password" /><br/>
</td>
</tr>
<tr>
<td align="center">
版本
<select name="version">
<option value="1" selected="selected">默认</option>
<option value="2" >1.1</option>
<option value="3" >1.2</option>
</select>
<br />
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox"/>自动登录
<input type="checkbox"/>SSL
<br />
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="提交"/>
<input type="submit" value="注册"/>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10%">
<table border="0px" height="100%" width="100%" bgcolor="darkkhaki">
<tr>
<td><img src="img/netease_logo.gif"></td>
<td align="center"> 关于网易 免费邮 官方博客 客户服务 隐私政策 | 网易公司版权所有 @ 1997-2011</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
还有一个小小的阿里巴巴哦
代码:
<html>
<head>
<meta charset="utf-8">
<title>阿里巴巴会员注册</title>
</head>
<body>
<table border="0px" height="100%" width="100%" align="center">
<tr>
<td height="10%" width="100%">
<img src="img/header.jpg" width="100%"/>
</td>
</tr>
<tr>
<td height="60%">
<table border="0px" width="100%" height="100%">
<tr>
<td width="20%">
<table border="0px",width="100%" height="100%" align="right">
<tr>
<td align="right" height="13%">电子邮箱</td>
</tr>
<tr>
<td align="right" height="13%">会员登录名</td>
</tr>
<tr>
<td align="right" height="13%">密码</td>
</tr>
<tr>
<td align="right" height="13%">再次输入密码</td>
</tr>
<tr>
<td align="right" height="13%">会员身份</td>
</tr>
<tr>
<td align="right" height="13%">验证码</td>
</tr>
</table>
</td>
<td width="80%">
<table border="0px" width="100%" height="100%" align="middle">
<tr>
<td height="16%">
<input type="text" />
</td>
</tr>
<tr>
<td height="17%">
<input type="text" />
</td>
</tr>
<tr>
<td height="17%">
<input type="password"></td>
</tr>
<tr>
<td height="17%">
<input type="password" />
</td>
</tr>
<tr>
<td height="17%">
<input name="se" type="radio" checked="checked" height="100%"/>买家
<input name="se" type="radio" height="100%" />卖家
<input name="se" type="radio" height="100%" />两者都是
</td>
</tr>
<tr>
<td height="17%">
<table width="60%" height="100%" align="middle">
<tr>
<td width="10%">
<input type="text" size="10"/>
</td>
<td width="30%" align="center" height="100%">
<img src="img/verycode.gif" height="30"/>
</td>
<td width="60%" height="100%">
<a href="http://www.baidu.com"\>看不清楚?换一张</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20%">
<table border="0px" width="100%" height="100%">
<tr>
<td width="20%">
</td>
<td width="80%">
<table border="0px" width="100%" height="100%">
<tr>
<td height="10%">
<input type="submit" value="同意以下服务条款并注册" style="background: orangered; color: white;"/>
</td>
</tr>
<tr>
<td height="30%">
<textarea cols="60" rows="5">欢迎阅读阿里巴巴公司(阿里巴巴)服务条款协议(下称"本协议"),您应当在使用服务之前认真阅读本协议全部内容,且对本协议中加粗字体显示的内容,阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站(所涉域名为:Alibaba.com.cn、alibaba.cn、1688.com,下同),所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
</textarea><br />
</td>
</tr>
</table>
</td >
</tr>
</table>
</td>
</tr>
<tr>
<td height="10%">
<img src="img/footer.jpg" width="100%"/>
</td>
</tr>
</table>
</body>
</html>
个人觉得比较冗长,可能还有更好的,欢迎指正。
6.22 开启了css之旅,不得不说,这确实是一个很不错的美化网页的,看起来更美观一些
做的图片墙,图片的特效,给项目添加音乐
css
标签选择器
类选择器:在标签后面标注类
ID选择器:#
div是块级元素,它不论大小默认占一行
span是行内元素,它占它自身大小的位置
margin 外边距
padding 内边距 上右下左
如何导入CSS层叠样式表
行内样式(写在标签内部,使用style属性)
内部样式(使用style标签修饰)
外部样式表(link)(将CSS样式写入单独的文件.css)大多数写在外部
照片墙:
1.导入照片
2.父容器囊括照片
3.修改照片的padding属性,背景颜色设置成白色
(产生照片的效果)
4.position:absolute(绝对定位)
--可以利用left属性可以手动调整照片位置
5.使照片倾斜
6.设置照片阴影效果
动画效果:transition:all 1s ease-in;
放大+照片角度还原
transform: rotate(0deg) scale(1.3);
box-shadow: 20px 20px 20px rgba(50,50,50,0.8);
z-index: 1;
transition:all 1s ease-out;
html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>picture</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<EMBED SRC="a.mp3" loop=false width=0 height=0>
<div>
<img src="img/3.jpg" class="pic1"/>
<img src="img/5.jpg" class="pic2"/>
<img src="img/6.jpeg" class="pic3" />
<img src="img/7.jpeg" class="pic4"/>
<img src="img/8.jpeg" class="pic5"/>
<img src="img/9.jpg" class="pic6"/>
</div>
</body>
</html>
css代码:
*{
background-color: pink;
}
img{
width:300px;
height:250px;
padding: 20px;
background-color: white;
position:absolute;
box-shadow: 10px 10px 10px rgba(50,50,50,0.8);
border-radius: 20px;
}
img:hover{
transform: rotate(0deg) scale(1.3);
box-shadow: 20px 20px 20px rgba(50,50,50,0.8);
z-index: 1;
transition:all 1s ease-out;
}
div{
width:80%;
height:450px;
}
.pic1{
transform: rotate(10deg);
top:40px;
left:250px;
}
.pic2{
transform: rotate(-20deg);
top:40px;
left:450px;
}
.pic3{
transform: rotate(-38deg);
top:400px;
left:700px;
}
.pic4{
transform: rotate(30deg);
left:200px;
top:400px;
}
.pic5{
transform: rotate(28deg);
left:900px;
top:120px;
}
.pic6{
transform: rotate(30deg);
}
给图片设置了阴影,还有旋转,放大特效。利用hbuilder生成了自己的app,
在huilder中点击生成可发行的软件,就可以生成,在手机端可以运行。
6.23 上午讲解了个人主页,在个人主页中调换页面,给了一个模板,在此基础上,设置了我自己的个人主页,
找到相应的位置,修改相应的值,变成自己的个人主页