html
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form表单</title>
<link rel="stylesheet" type="text/css" href="./form.css" />
</head>
<body>
<div id="form">
<h3>表单学习</h3>
<form style="padding-top:20px;" action="demoget.php" method="get">
<p><span>用户名：</span><input type="text" name="username" /></p><br />
<p><span>密码：</span><input type="password" name="password" /></p><br />
<p><span>性别：</span><input type="radio" name="sex" value=1 checked="checked" />男
<input type="radio" name="sex" value=0 />女</p><br />
<p><span>爱好：</span>
<input type="checkbox" name="intrest" value="basketball" />篮球
<input type="checkbox" name="intrest" value="football" />足球
<input type="checkbox" name="intrest" value="volleyball" />排球
</p><br />
<p><span>学历：</span>
<select name="education">
<option selected="selected">请选择</option>
<option value="院士">院士</option>
<option value="博士后">博士后</option>
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="大专">大专</option>
</select></p><br />
<p><span>备注：</span><textarea name="text_area"></textarea></p><br />
<input style="margin-left:111px; width:60px;height:25px;" type="submit" name="sub" value="提交" />
</form>
</div>
</body>
</html>
盒子模型
margin
padding
可以将上面的图片看成一个盒子
红色箭头：
margin: 上右下左
margin-top
margin-right
margin-bottom
margin-left
网页布局可以看成是一块一块组合起来的，那么两个盒子直接间距就是通过这个margin控制的
padding:上右下左
padding-top
padding-right
padding-bottom
padding-left
在盒子里面肯定是有内容的，红色框的线宽度虽然只有2mm这个就是控制盒子跟盒子内部文本距离的
相对定位、绝对定位
盒子参照物是什么这个很重要；
要想将盒子放在页面正中间，那么一定要先给盒子指定一个具体的参照物；
行内元素、块级别元素
div p ul li...都是块级别的元素
span 行内元素
CSS样式的两种方式，第一种就是放在html文件的<head></head>中间
<style type="text/css">
</style>
第二种就是引入.css 文件
<link rel="stylesheet" type="text/css" href="" />
常用的属性跟值
* {
margin: 0;
padding: 0;
}
width: 850px;
宽度
height: 90px;
line-height: 90px;
当高度跟行高后面的值一样的时候，这个时候显示的文本会垂直居中；
background:#fff;
背景颜色
color:red;
字体颜色
font-size:14px;
字体大小
ul{
list-style-type:none;
}
去除列表标签前面的点
text-indent:10px;
text-align:right;
text-align:center;
text-align:left;
盒子里面的文本到底是居中还是居右
display:block;
行内元素转成块元素
display:inline;
块元素转成行内元素
float:right;
float:left;
浮动
为什么要有浮动？
要是你想让两个div(块级别元素)放在一行，那么就必须要浮动，块级别的元素默认是霸占一行的，不管它的width是否有整个页面宽
clear:both;
清除浮动
border-top
border-right
border-bottom
border-left
盒子四边的宽度控制，也是能设置是实现还是虚线还有颜色的border-bottom:1px solid red;
text-decoration:none;
超链接下划线去掉
text-decoration:underline;
超链接下划线加上
找元素(html文件就是一个树，你要找到树的那个枝，就需要一步步定位到枝，通过选择器)
这个比较关键
id选择器
class选择器
元素选择器
eg:
#newslist ul li a {
color:#666;
text-decoration:none;
}
就是找到id选择器是：newslist 下面的ul ul下面的li li下面的a标签，这样一级级找
没有好的办法只能慢慢试，熟练之后就知道怎么找了；
下面是一个例子：
新建一个后缀是.html的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<style type="text/css">
* {
/*
目的就是去掉所有标签的自身的margin padding默认值
不这么干由于浏览器对各种标签的margin padding默认值不一样调起来相当头疼
*/
margin: 0;
padding: 0;
}
#main {
width: 850px;
/*宽度*/
height: 500px;
/*高度*/
margin: 0 auto;
/*表示的意思是：margin-top:0 margin-bottom:0 左右两边自动*/
border: 1px solid red;
/*给盒子边框 1表示的是边框的宽度，solid是实线，deshed是虚线，后面是边框颜色*/
position: relative;
}
#main div.show {
width: 500px;
height: 300px;
border: 1px solid blue;
position: absolute;
top: 50px;
left: 200px;
}
</style>
</head>
<body>
<div id="main">
<div class="show">
class:show要是想相对定位的话，那么先要给class:show设置一个参照物；
<br /> 设置参照物需要在参照物盒子样式里面加上：position: relative;
<br /> 准备绝对定位的盒子自己样式里面需要加上：position: absolute;
<br />
<br /> 在自己样式里面利用top left bottom right设置要放到什么位置即可
</div>
</div>
</body>
</html>
