记北京实训一周

    原来当初没有发出去的保存到了草稿箱。。。

 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 上午讲解了个人主页,在个人主页中调换页面,给了一个模板,在此基础上,设置了我自己的个人主页,


找到相应的位置,修改相应的值,变成自己的个人主页


发布了192 篇原创文章 · 获赞 27 · 访问量 10万+

猜你喜欢

转载自blog.csdn.net/lovely_girl1126/article/details/73655555
今日推荐