项目作者： dadaiwei
项目描述 ：
前端起步的7个exercises,从html、css起步，让你逐渐入门。
高级语言： HTML
项目地址: git://github.com/dadaiwei/Exercises.git
task3 [链接](http://dadaiwei.github.io/Exercises/task3/)
------------
#### 布局 ####
**div盒子模型 **
Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像
**三栏布局**
html结构
css
.body
{
width:1200px;
height:447px;
background-color: #eee;
border:1px solid #999;
padding:20px;
font-family: SimHei;
font-size:15px;
margin:20px auto;
position:relative;
}
.body .left
{
width:200px;
height:120px;
background-color:#ffffff;
float:left;
}
.body .right
{
width:80px;
height:390px;
background-color: #ffffff;
float:right;
padding:20px;
}
.body .center
{
height:320px;
width:auto;
background-color: #ffffff;
margin-left:260px;
margin-right:180px;
border:1px solid gray;
padding: 20px;
}
task4 [链接](http://dadaiwei.github.io/Exercises/task4/)
------------
使用border-radius在矩形中实现两个四分之一圆
html结构
css
.square
{
width:400px;
height:200px;
background-color: #ccc;
position: absolute;
left:50%;
top:50%;
margin-left: -200px;
margin-top: -100px;
overflow: hidden;
}
.square .circle1
{
width:100px;
height:100px;
background-color: #fc0;
border-radius: 0 0 50px 0;
position: absolute;
left:-50px;
top:-50px;
}
.square .circle2
{
width:100px;
height:100px;
background-color: #fc0;
border-radius: 50px 0 0 0;
position: absolute;
right:-50px;
bottom:-50px;
}
task5 [链接](http://dadaiwei.github.io/Exercises/task5/)
-------------
**两栏布局**
task6 [链接](http://dadaiwei.github.io/Exercises/task6/)
----------
**报纸页，模拟报纸的布局**
**第一部分**
**第二部分**
task7 [链接](http://dadaiwei.github.io/Exercises/task7/)
----------
**新世界**
**第一部分**
**第二部分**
**第三部分**
**第四部分**
**第五部分**
前端小练习
前端起步的7个task,帮助你从html、css起步，接下来将分别介绍这7个task。
喜欢的小伙伴请点颗star，谢谢
task1 链接
task1包含的html基本元素有header、article、asider、section、figure、footer、h1、h2、ul、li、p、img、br元素，接下来将逐一讲解各个元素用法及含义。
其中header、acticle、section、asider、footer属于html5，它们一起构成新的网页结构。
HTML5网页结构
代码结构如下：
<!DOCTYPE html>
//字符编码
//表示页面中的一个内容区块或者整个页面的标题
//表示页面中的导航链接部分
…//表示页面中的一块与上下文不相关的独立内容，比如一篇文章中的文章
//表示页面中的一块内容区块，比如页面的页眉，页脚等，也可以和(h1,h2,…)等一起使用，标示出文档的结构
//表示artical元素的内容之外的，和内容相关的辅助信息
//表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等
task2 链接
figcaption—定义figure元素的标题
<figure> <figcaption> 好看的图片 </figcaption> <img src="images/2.jpg" alt="图片"></figure>
ol—有序列表
<ol type="1"> <li>排名1</li> <li>排名2</li> <li>排名3</li> </ol>
ul—无序列表
<ul> <li> 列表项目一 </li> <li> 列表项目二 </li> <li> 列表项目三 </li> </ul>
table—表格
thead—表格 tbody-表格主体 tfooter-表格尾部 tr-表格行 th-表头单元格 td-表格主体单元格
<table border="1"> <thead> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> </thead> <tbody> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总计 <span>1000</span></td> </tr> </tfoot> </table>
label—为 input 元素定义标注
input—输入框，支持多种type类型，如下：
button：定义可点击按钮
checkbox：定义复选框
file：定义输入字段和 “浏览”按钮，供文件上传
hidden：定义隐藏的输入字段
image：定义图像形式的提交按钮
password：定义密码字段。该字段中的字符被掩码
radio：定义单选按钮
reset：定义重置按钮。重置按钮会清除表单中的所有数据
submit：定义提交按钮。提交按钮会把表单数据发送到服务器
text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
select—下拉列表，option-下拉列表可选项
textarea—多行的文本输入控件
button—按钮
<form> <div class="form1"> <div class="form11"> <label for="email" class="formstyle">请输入邮箱地址</label> <label for="password1" class="formstyle">请输入密码</label> <label for="password2" class="formstyle">请重复输入密码</label> <label class="formstyle">性别</label> <label for="city">城市</label> <label>爱好</label> <label for="description">个人描述</label> </div> <div class="form12"> <input type="text" name="email" id="email" value="这是一个文本输入框"> <p>邮箱地址请按要求格式输入</p> <input type="password" name="password" id="password1" value="1234567" > <input type="password" name="password" id="password2" value="1234567" > <p class="formstyle">密码请为6-16位数字</p> <input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女 <select id="city" name="city"> <option value="beijing" >北京</option> <option value="shanghai">上海</option> <option value="nankjing">南京</option> </select> <input type="checkbox" name="sport" value="sport">运动 <input type="checkbox" name="art" value="art">艺术 <input type="checkbox" name="science" value="science">科学 <textarea id="description"> 这是一个多行输入框，输入您的个人描述
