HTML和CSS一些内容

好吧,最近好久没有总结了,上周刚刚考完基础部分,成绩还可以吧,不过也检测到自己哪里的不足了,内部类那部分的题有点儿迷糊,其他的掌握的还是比较好的。

今天又开始第二阶段的学习了,今天简单讲了讲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-->

猜你喜欢

转载自zxb9181213.iteye.com/blog/2267295