一：田字格练习
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>田字格练习</title>
<meta charset="utf8">
<style>
#top{
width: 40px;
height: 40px;
/*float: left;*/
/*这是整体居中！*/
margin: 0 auto;
}
#a{
width: 20px;
height: 20px;
background-color: #ff0000;
float: left;
}
#b{
width: 20px;
height: 20px;
background-color: #00ff00;
float: left;
}
#c{
width: 20px;
height: 20px;
background-color: #0000ff;
float: left;
}
#d{
width: 20px;
height: 20px;
background-color: #cc0011;
float: left;
}
.clean{
width: 0px;
height: 0px;
clear: both;
}
</style>
</head>
<body>
<div id ="top">
<div id="a"></div>
<!-- <div class="clean"></div> -->
<div id="b"></div>
<div class="clean"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
<!-- margin: 0 auto; -->
</html>
图形所示
二：田字格再练习
编码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title> 田字格练习</title>
<style >
#top{
width: 400px;
height: 400px;
margin: 0 auto;
}
.a{
width: 200px;
height: 200px;
float: left;
background-color: #ff0000;
}
#first{
/*width: 200px;
height: 200px;*/
background-color: #ff0000;
/*float: left;*/
}
#second{
/*width: 200px;
height: 200px;*/
background-color: #00ff00;
/*float: left;*/
}
#thrth{
/*width: 200px;
height: 200px;*/
background-color: #0000ff;
/*float: left;*/
}
#forth{
/*width: 200px;
height: 200px;*/
background-color: #cc00dd;
/*float: left;*/
}
/*.clean{
clear: both;
}*/
</style>
</head>
<body>
<div id="top">
<div class="a" id="first"></div>
<div class="a" id="second"></div>
<div class="a" id="thrth"></div>
<div class="a" id="forth"></div>
<!-- <div id="first"></div>
<div id="second"></div>
<div class="clean"></div>
<div id="thrth"></div>
<div id="forth"></div>
<div class="a" id="first"></div> -->
</div>
</body>
</html>
如图所示
比较这两个程序，效果是一样的，但后者程序简单易懂，可多加练习。
三：画个圆
编码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>画个圆</title>
<style>
#top{
width: 100px;
height: 100px;
/*background-color: #ff0000;*/
margin: 0 auto;
}
.f{
width: 50px;
height: 50px;
border-radius: 25px;
float: left;
}
#a{
background-color: #ff0000;
}
#b{
background-color: #00ff00;
}
#c{
background-color: #0000ff;
}
#d{
background-color: #aabbcc;
}
</style>
</head>
<body>
<div id="top">
<div class="f" id="a"></div>
<div class="f" id="b"></div>
<div class="f" id="c"></div>
<div class="f" id="d"></div>
</div>
</body>
</html>
如图所示
一定要注意格式，刚才出现错误，查了好几次才查出来。
四：H标签P标签的使用
<!DOCTYPE html>
<html>
<head>
<title>中国新闻报</title>
<meta charset="utf8">
<style>
#first{
width: 500px;
height: 200px;
/*这是DIV的外边框，四个边框的顺序为从上开始顺时针转且对称*/
margin:0px 40px ;
}
#qw{
/*这是字体的大小*/
font-size: 50px;
/*这是字体的颜色*/
color: #ff0000;
}
#qe{
color: #abcdef;
}
#aa{
color: #CCDDEE;
}
p{
/*这是首行缩进2个空格*/
text-indent: 30px;
}
</style>
</head>
<body>
<!-- 这是标题标签从H1到H6 -->
<div id="first">
<!-- H标签为首标签从H1到H6一次递减字体默认黑色加粗 -->
<h2 id="qw">必知！火狐即将发生的四大变化</h2>
P标签为段落标签
BR为强制换行标签且为单标签
<p id="aa">11月7日，党和国家领导人习近平、刘云山等在北京人民大会堂会见中华全国新闻工作者协会第九届理事会全体代表和中国新闻奖、长江韬奋奖获奖者代表。新华社记者 李学仁 摄 </p>
<p>在第十七个中国记者节到来之际，中华全国新闻工作者协会第九届理事会第一次会议暨中国新闻奖、长江韬奋奖颁奖会7日在京举行。中共中央总书记、国家主席、中央军委主席习近平亲切会见理事会全体代表和获奖者代表，并发表重要讲话。他强调，做好党的新闻舆论工作，营造良好舆论环境，是治国理政、定国安邦的大事。党中央高度重视新闻舆论工作，对做好党的新闻舆论工作提出了明确要求，大家要抓好落实，把中央主要媒体和各级媒体越办越好，为党和人民作出更大贡献，做党和人民信赖的新闻工作者。</p>
<h6 id="qe">1.具体摘要</h6>
<p>在第十七个中国记者节到来之际，中华全国新闻工作者协会第九届理事会第一次会议暨中国新闻奖、长江韬奋奖颁奖会7日在京举行。中共中央总书记、国家主席、中央军委主席习近平亲切会见理事会全体代表和获奖者代表，并发表重要讲话。他强调，做好党的新闻舆论工作，营造良好舆论环境，是治国理政、定国安邦的大事。党中央高度重视新闻舆论工作，对做好党的新闻舆论工作提出了明确要求，大家要抓好落实，把中央主要媒体和各级媒体越办越好，为党和人民作出更大贡献，做党和人民信赖的新闻工作者。</p>
</div>
</body>
</html>
如图所示
注意外边框的使用margin
五：总结
写程序注意包含与被包含的关系，不要弄乱弄混。所以在平时写程序时注意书写格式要清晰明了便于查漏补缺，再有就是注意格式和一些特殊的符号，不要记混，更要熟练运用。凡事从基础做起，慢慢向外扩展，温故而知新。