返回 2019-6-...... 登陆

2019-6-21 html总结

辰晨 2019-06-21 14:27:45 274
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>html总结</title>
	<link rel="shortcut icon" type="images/x-icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1560948568&di=b055f8411a9d8817529f5e8e7751bfa5&src=http://image20.it168.com/201312_800x800/1693/c1df91b20ffc5c3a.jpg">
	<style>
		a{text-decoration: none;color:#fff;}
		ul li{width:300px;height:36px;line-height: 36px;}
		ul li:before{content:url(daohang.png);line-height: 36px;margin:10px;}
		form{width:360px;height:240px;line-height: center;background:#FFF;margin:10px;}
		input{width:260px;height:48px;margin-top:20px;padding-left:8px;}
		button{width:260px;height:48px;margin-top:20px;background-color: #ef8900;border:none;color:#fff;font-size:16px;}
		table{width:800px;border:1px solid #fff;text-align: center;border-collapse:collapse;}
		tr td{width:80px;height:30px;border:1px solid #fff;}
	</style>
</head>
<body style="background-color: #282923;color:#fff;text-align: center;">
	<h1>HTML总结</h1>
	<hr>
	<h4>
		<ul style='list-style:none;text-align:left;'>
			<li><a href='' name="sum">知识总结</a></li>
			<li><a href='' name="case">案例</a></li>
		</ul>
	</h4>
	<div name="sum" style="width:100%;height:46px;background-color:#fff;color: #000;">
		<h3 style="line-height: 46px;">知识总结</h3>
	</div>
	<div>
		<pre style='text-align:left;color:#fff;line-height: 30px;'>
		[1]单标签就是只有一个标签,也就是一个空元素:meta、img、hr、br
		[2]双标签有开始标签和结束标签
		[3]块级元素:独占一行,对宽高的属性值生效,如果不给宽度,块级元素就默认浏览器的宽度,(即就是100%宽)。例如:div  p  ul  h1~h6 .....
		[4]行内元素:对宽高属性值不生效,完全靠内容撑开宽高,可以跟其他标签存在一行,例如:span  b  strong  em  a   img   input  .....
		[5]行内块元素:结合行内和块级元素的特点,不仅对宽高的属性值生效还可以跟多个   标签存在一行。例如:input  img
		[6]meta charset="utf-8",设置编码方式,不设置中文乱码,英文正常。
		[7]link rel="shortcut icon" type="image/x-icon"href="logo地址",link在页面中最常见的就是引入外部样式
		[8]text-indent:2em,首行缩进两字符。em斜体,i斜体 ,del删除线 ,br换行,pre预格式文本,保留文本空格换行等 ,h1--h6标题标签,font-size字体大小,line-hight行高
		   font-weight字体粗细,font-family字体样式,text-align文字位置
		[9]a超链接。text-decoration:none;删除下划线。text-decoration:underline;加下划线。a:hover鼠标经过状态。
		[10]有序列表,ol>li*n     无序列表,ui>li*n     list-style:none;去掉无序列表样式   list-style:url(图片地址);通过该方法,不能调整图片位置等
		   before  ul li:before{content:url(images/logo.png);margin-right:10px;}
		   after  ul li:after{content:url(images/logo.png);margin-right:10px;}
		[11]form表结构,属性:method=“get/post" action="URL地址'
		   input输入框,属性type="text/password" name="username/pwd" placeholder="请输入用户名/密码">
		   button登录按钮
		[12]table表结构,  border-collapse:collapse;边框线合并   tr>th表头   tr>td表格   colspan=""合并列   rowspan=""合并行

		注意:
		1.返回顶部不会,需要查资料学习
		2.网页框架结构需多练习
		3.before、after运用有限,需扩展练习
		4.加验证码?
		5.删除边框不会
		6.文字左右两边显示
		</pre>
	</div>
	<div name="case" style="width:100%;height:46px;background-color:#fff;color: #000;">
		<h3 style="line-height: 46px;">案例</h3>
	</div>
	<div style="padding-top: 20px;">
		<form method="get" action="">
			<input type="text" placeholder="请输入用户名">
			<input type="password" placeholder="请输入密码"><br>
			<button>登录</button>
		</form>
	</div>
	<table>
		<tr>
			<th colspan="10" style="height:40px;">
			<h1>个人简历</h1><br><span style="text-align: left;font-size:16px;">应聘职位:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="text-align:right;font-size:12px;">填表日期:————年————月————日</span>
		</th>
		</tr>
		<tr>
			<td rowspan="2">姓名</td>
			<td rowspan="2" colspan="2"></td>
			<td>性别</td>
			<td></td>
			<td colspan="2">文化</td>
			<td colspan="2"></td>
			<td rowspan="4">照片</td>
		</tr>
		<tr>
			<td>身高</td>
			<td></td>
			<td colspan="2">政治面貌</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td>籍贯</td>
			<td colspan="4"></td>
			<td colspan="2">出生年月</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td>户口所在地</td>
			<td colspan="4"></td>
			<td>婚否</td>
			<td></td>
			<td>民族</td>
			<td></td>
		</tr>
		<tr>
			<td>身份证号码</td>
			<td colspan="4"></td>
			<td colspan="2">现居住地址</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td>毕业院校</td>
			<td colspan="4"></td>
			<td colspan="2">毕业时间</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td>学习专业</td>
			<td colspan="4"></td>
			<td colspan="2">爱好特长</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td style="height:90px;">个人简历</td>
			<td colspan="9" style="height:90px;"></td>
		</tr>
		<tr>
			<td>就学时间</td>
			<td colspan="4">学校</td>
			<td>学年</td>
			<td>学历</td>
			<td colspan="2">专业</td>
			<td>担任职务</td>
		</tr>
		<tr>
			<td></td>
			<td colspan="4"></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td colspan="4"></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td colspan="4"></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td colspan="4"></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td>英语应用水平</td>
			<td colspan="5"></td>
			<td>职业期望</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td>计算机应用水平</td>
			<td colspan="5"></td>
			<td>住宿要求</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td rowspan="4">工作经历</td>
			<td colspan="2">时间</td>
			<td colspan="5">工作地点</td>
			<td colspan="2">职务</td>
		</tr>
		<tr>
			<td colspan="2"></td>
			<td colspan="5"></td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td colspan="2"></td>
			<td colspan="5"></td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td colspan="2"></td>
			<td colspan="5"></td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td>待遇要求</td>
			<td colspan="9"></td>
		</tr>
		<tr>
			<td rowspan="2">联系方式</td>
			<td>移动电话</td>
			<td colspan="3"></td>
			<td>固定电话</td>
			<td colspan="4"></td>
		</tr>
		<tr>
			<td>邮编</td>
			<td colspan="3"></td>
			<td>地址</td>
			<td colspan="4"></td>
		</tr>
	</table>
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网