`
zxb9181213
  • 浏览: 3413 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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-->
分享到:
评论

相关推荐

    学习Html和Css的一些小项目.zip

    学习Html和Css的一些小项目学习Html和Css的一些小项目学习Html和Css的一些小项目 学习Html和Css的一些小项目学习Html和Css的一些小项目学习Html和Css的一些小项目 学习Html和Css的一些小项目学习Html和Css的一些小...

    主要是HTML和CSS的一些学习笔记和练习.zip

    主要是HTML和CSS的一些学习笔记和练习主要是HTML和CSS的一些学习笔记和练习 主要是HTML和CSS的一些学习笔记和练习主要是HTML和CSS的一些学习笔记和练习 主要是HTML和CSS的一些学习笔记和练习主要是HTML和CSS的一些...

    html和css的一些练习

    html和css的一些练习

    HTML和CSS学习.zip

    HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...

    html和 css 学习.zip

    html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习...

    学习 HTML 和 CSS.zip

    学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 ...

    html和css基础

    html和css基础

    HTML和CSS HTML&CSS

    HTML&CSS HTML&CSS

    HTML+CSS 完成登录页面UI.zip

    HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录...

    HTML+JS+CSS做的一些页面小游戏源码合集.zip

    HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...

    html和css阶段学习.zip

    html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css...

    H5 html 和CSS 学习.zip

    H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS ...

    html和css笔记

    html和css笔记 基础内容 自己做的比较

    学习HTML和css,主要是css.zip

    学习HTML和css,主要是css学习HTML和css,主要是css学习HTML和css,主要是css 学习HTML和css,主要是css学习HTML和css,主要是css学习HTML和css,主要是css 学习HTML和css,主要是css学习HTML和css,主要是css学习...

    HTML和CSS的一些帮助文档

    我通常用的HTML和CSS的一些帮助文档,希望对大家有用

    学习html和css的代码.zip

    学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习...

    HTML和CSS的学习代码.zip

    HTML和CSS的学习代码HTML和CSS的学习代码HTML和CSS的学习代码 HTML和CSS的学习代码HTML和CSS的学习代码HTML和CSS的学习代码 HTML和CSS的学习代码HTML和CSS的学习代码HTML和CSS的学习代码 HTML和CSS的学习代码HTML和...

    学习html和css的练习.zip

    学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...

    学习HTML和CSS的笔记.zip

    学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...

    纯HTML5和CSS3实现高仿小米商城源码.zip

    高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3...

Global site tag (gtag.js) - Google Analytics