s10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<fieldset>
<legend>登陆</legend>
<label for="username">用户名:</label>
<input id="username" type="text" name="user" value="alex">
<br>
<label for="Password">密码:</label>
<input id="Password"type="text" name="password">
<br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
s11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#i1{
background-color:#095bcc;
height: 58px;
}<!--id选择器-->
#i2{
background-color:#095bcc;
height: 58px;
}
#i3{
background-color:#095bcc;
height: 58px;
}
.c1{
background-color:#895ccc;
height: 18px;
}<!--class选择器-->
*/
/*div{*/
/*background-color:black;*/
/*color:white;*/
/*}<!--div标签选择器对所有的div标签都有效都会设置此样式-->*/
/*<css注释: /* */
/*span div {*/
/*background-color: blue;*/
/*color: #FFFFFF;*/
/*}*/
/*<!--*/
/*层级选择器用空格 span下的div标签有效-- >*/
/*#i4,#i5,#i6{*/
/*background-color: maroon;*/
/*color: black;*/
/*}<!--组合选择器用逗号-->*/
/*.i4,.i5,.i6{*/
/*background-color: lawngreen;*/
/*color: red;*/
/*}<!--组合选择器-->*/
.c2[n="jack"]{width: 100px;height: 100px }<!--属性选择器对选择到的标签再通过属性再进行一次筛选-->
<!--最常用的是class选择器，其次是标签选择器 id选择器可以不用-->
</style>
</head>
<body>
<div id="i1">a</div><!--id选择器-->
<div id="i2">b</div>
<div id="i3">c</div>
<div class="c1">ffff</div><!--syle属性背景颜色高度-->
<span class="c1">11<div>22</div></span><!--class选择器-->
<div class="c1">3</div>
<div id="i4">2233</div><!--id选择器-->
<div id="i5">dgdg</div>
<div id="i6">kkdlg</div>
<div class="i4">aaaaaaaaaaa</div>
<div class="i5"> bbbbbbbb</div>
<div class="i6">cccccccccc</div>
<input class="c2" n="jack" type="text">
<input class="c2" type="password">
</body>
</html>
s12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 52px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
</body>
</html>
<!--标签上 style优先，然后是编写顺序，下面的优先-->
commons.css
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 52px;
color: black;
}
<!--stylesheet css文件可被引用-->
s13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tile</title>
<link rel="stylesheet" href="commons.css"><!--引用css文件-->
</head>
<body>
<div class="c1 c2" style="color: pink">ajsddiia</div>>
</body>
</html>
s14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;"><!--边框像素为1像素实体的红色-->
<!--<div style="border-left:1px dotted red ;">dotted 虚线-->
ddfd
</div>
<div style="height: 48px;width:80% ;
color: red;
border:1px solid red;
font-size: 22px;
text-align: center;
line-height: 48px;
font-weight:bold;
">ddddddddddd</div>
<!--<width宽度可以设置占的屏幕显示百分比，但height不能设置占的百分比>-->
<!--<height: 48px;width:80% div高度和宽度>-->
<!--<color: red;div里字体颜色>-->
<!--<border:1px solid red;div加边框边框线粗1像素实体的边框线为红色>-->
<!--<font-size: 22px;div里字体大小>-->
<!--text-align: center;字体左右居中-->
<!--<line-height: 48px;等于height的像素高度 ;字体上下居中>-->
<!--<font-weight:bold;字体粗细>-->
</body>
</html>
s15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 20%;background-color: black;float: left">2</div>
</body>
</html>
<!--float让标签飘起来块级标签也可以堆叠起来-->
s16.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;display: inline">assf</div>
<span style="background-color: red;display: block">ffff</span>
<span style="background-color: blue;height: 50px;width: 70px">Alex</span>
<a href="http://www.baidu.com" style="background-color: blue">Eric</a>
<span style="display: inline-block;background-color: blue;height: 50px;width: 70px">CCC</span>
</body>
</html>
<!--display: inline 块级标签变行内-->
<!--display: block 行内标签变块级-->
<!--display: inline-block 具有行内标签的特性(有多少占多少)，又可以设置高度宽度边距-->
<!--display:none 让标签消失-->
<!--行内标签无法设置高度宽度边距-->
<!--块级标签可以设置高度宽度边距-->
s17.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin:0 ">
<div style="border:1px solid red;height: 70px">
<div style="background-color: green;height: 50px;margin-top:0px "></div>
</div>
</body>
</html>
<!--<margin 外边距可以移到外面的边距>-->
<!--<body style="margin: 0 auto;" margin使用例子去掉上面边距>-->
s18.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 ;">
<div style="border: 1px solid red;height: 70px;">
<div style="background-color: green;height: 50px ;padding-top: 0px">asdfd</div>
</div>
</body>
</html>
<!--padding内边距里面 div填充颜色-->
<!--<body style="margin:0 auto;" margin使用例子去掉上面边距>-->
s19_作业.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header {
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;"><!--style="margin: 0 auto 去掉上面那个缝隙-->
<div class="pg-header">
<div style="width: 860px;margin: 0 auto"><!--div里style放margin:0 auto div会居中-->
<div style="float: left">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div>
<div style="width: 860px;margin: 0 auto;">
<div style="float: left;">
log
</div>
<div style="float: right">
<div style="height: 50px;width: 100px;background-color: #888888"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="background-color: red">
<div style="width: 860px;margin: 0 auto;">
asdad
</div>
<div style="clear: both"></div>
</div>
<div style="width: 300px;border: 1px solid red;"><!--div放的时候左边优先-->
<!--<div style="width: 300px;border: 1px solid red;"不设置高度，是为了让里面的div的高度占本div的高度百分之百>-->
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="clear: both;"></div><!--<div style="clear: both;"相当于div里面的div浮起来了，div又把里面的div拉起来了，重新显示父类div表格>-->
</div>
</body>
</html>
<!--margin: 0 auto 0表示距离上下边距是0 auto表示当前div左右自动居中-->