好吧,最近好久没有总结了,上周刚刚考完基础部分,成绩还可以吧,不过也检测到自己哪里的不足了,内部类那部分的题有点儿迷糊,其他的掌握的还是比较好的。
今天又开始第二阶段的学习了,今天简单讲了讲HTML 和CSS ,虽然是做的后端的,不过这些前端的东西稍微了解一下也是不错的。而且在以后的练习中还是需要我们自己写一些前端的东西,来供后端操作的。
今天的节奏很快,差不多就是老师讲一下,然后就让我们按照他写的来练习。有些东西没理解。不过对我们来说比较重要的就是表格这方面。晚上我自己写了一个综合性的练习,差不多把今天所学的东西运用了一下,现在把代码放上来,让大家看一下,因为理解的不够透彻,所以可能代码写的很差,勿喷勿喷。
<!--EndFragment-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合练习</title><base>
<style type="text/css">
table{
border: 1px solid;
border-collapse: collapse
}
th,td{
border: 1px solid;
font-size: 25px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var butA = document.getElementById("A")
var butB = document.getElementById("B")
var butC = document.getElementById("C")
butA.onclick = function(){
alert("你的想法观念非常的普通,是个标准的罗曼蒂克浪漫主义拥护者,pp显然是那样的。");
};
butB.onclick = function(){
alert("你现在对童话般的美好事物以及浪漫情事仍抱有一些憧憬,很显然pp这个浪荡子给不了你这些。");
};
butC.onclick = function(){
alert("你挺爱幻想的,简直是个超现实主义者,你有一股非常强烈的欲望想要和pp逃离这里。");
};
};
</script>
</head>
<body>
<h2>第一项(表格)</h2>
<p style="font-size: 20px ; color : #f155ff" >先写一个表格!</p>
<table style="width: 900px ; height: 400px ">
<tr>
<th style="color: red ; font-size: 35px">姓名</th>
<th style="color: red ; font-size: 35px">性别</th>
<th style="color: red ; font-size: 35px">年龄</th>
<th style="color: red ; font-size: 35px">班级</th>
<th style="color: red ; font-size: 35px">爱好</th>
</tr>
<tr>
<td align="center" style="font-size: 25px">彭鹏</td>
<td style="color : #99ff11" align="center">未知</td>
<td align="center">26</td>
<td rowspan="4" align="center">javaEE</td>
<td align="center">耍剑</td>
</tr>
<tr>
<td align="center" style="font-size: 25px">小问</td>
<td rowspan="2" align="center">男</td>
<td align="center">21</td>
<td align="center">弹吉他</td>
</tr>
<tr>
<td align="center" style="font-size: 25px">大蔡</td>
<td align="center">26</td>
<td align="center">侃大山</td>
</tr>
<tr>
<td align="center" style="font-size: 25px">小王</td>
<td align="center">女</td>
<td align="center">22</td>
<td align="center">唱歌</td>
</tr>
</table>
<h2>第二项(超链接)</h2>
<a href="1.JPG" target="_blank">点击查看图片</a>
<h2>第三项(图片)</h2>
<p style=" font-size: 20px ; color : Green">下面是一组图片</p>
<h4>图片一</h4>
<img alt="第一幅图挂掉" src="2.jpg" style="width: 900px ; height: 500px">
<h4>图片二</h4>
<img alt="第二幅图挂掉" src="3.jpg" style="width: 900px ; height: 500px" >
<h4>图片三</h4>
<img alt="第三幅图挂掉" src="../1.jpg" style="width: 900px ; height: 500px">
<br/>
<h2>第四项(测性格)</h2>
<p style="font-size: 20px">如果在黑暗中出现了两点光点,这会是什么呢?</p><br/>
<p style="font-size: 15px ; color: red">A联想到汽车大灯或街灯</p><br/>
<p style="font-size: 15px ; color: blue">B联想到动物目光 </p><br/>
<p style="font-size: 15px ; color: green">C联想到UFO</p><br/>
<button id = "A">A</button>
<button id = "B">B</button>
<button id = "C">C</button>
<br/>
<h2>第五项(问卷调查)</h2>
<form action="../2.jpg">
<p style="font-size: 30px ; color: blue"><i>请认真填写,有机会赢得与妹子的约会哦!</i></p>
您的姓名: <input type="text" name= "name"/><br/>
您的年龄: <input type="text" name= "age"/><br/>
您的长度: <input type="password" name= "length"/><br/>
您的性别: <input type ="radio" name="gender" value="man"/ checked="checked">男
<input type ="radio" name="gender" value="woman"/>女<br/><br/>
您对这个网页的评价为:
<input type="radio" name ="evaluate" value="good"/>好
<input type="radio" name ="evaluate" value="verygood"/>很好
<input type="radio" name ="evaluate" value="perfect" checked="checked"/>完美
<br/><br/>
您喜欢的女孩儿类型(可多选):
<input type="checkbox" name = "love" value ="little"checked="checked" />萝莉
<input type="checkbox" name = "love" value = "beauty" checked="checked"/>美丽
<input type="checkbox" name = "love" value = "sexy" checked="checked"/>性感
<br/><br/>
请选择您的约会地点:
<select>
<option>餐厅</option>
<option>咖啡厅</option>
<option>电影院</option>
<option>酒吧</option>
<option>路边摊</option>
</select>
<br/><br/><br/>
<input type="reset"/>
<input type="submit" value="开启浪漫之旅"/>
</form>
</body>
</html>
总结一下自己写代码时的错误,主要就是:在表格那里,首先要在<title>和</head>之间写一个<table>{} </table>,在这里是定义表格的格式的(这是运用到css了吧?感觉跟老师讲的css的运用差不多,但又不一样),我刚开始定义时border : 1px 就完事儿了,其实少了个 solid,这个是实线,没有的话就不显示了,搞了半天。第二个问题,就是定义那个javaScript里的A、B、C三个按钮的提示信息时,忘了方法是 window.onload,一直写的window.load。不过还是不了解这个方法怎么来的······
<!--EndFragment-->