綜合練習一
效果圖：
HTML
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="css/baoming.css" />
</head>
<body>
<p id="header">參會人信息(報名時間:即日起--2018年6月12日)</p>
<div id="wrapper">
<div class="item">
<span class="star">*</span>姓名：
</div>
<div class="item">
<input type="text" />
</div>
<div class="item">
<input type="radio" name="sex"/>男 <input type="radio" name="sex" />女
</div>
<div class="item">
<span class="star">*</span>手機：
</div>
<div class="item">
<input type="text" />
</div>
<div class="item">
<span class="star">*</span>單位：
</div>
<div class="item">
<input type="text" />
</div>
<div class="item">
<span class="star">*</span>郵箱：
</div>
<div class="item">
<input type="text" />
</div>
<div class="item">
<div class="item">
<span class="star">*</span>參會議程：
</div>
<!--
class="item1 item2 item3..."
樣式的疊加
-->
<div class="item small">
<input type="checkbox" checked/> 6月13日主論壇
</div>
<div class="item small">
新工科產業學院交流會暨人才培養高峰論壇
</div>
</div>
</div>
<button id="btn_save" type="button">保存</button>
</body>
</html>
~~~
CSS
~~~
body
{
background-color: #F1F1F1;
margin-top:0px;
margin-left: 0px;
margin-right: 0px;
}
div
{
color:#ACACAC;
font-weight: bold;
}
#header
{
background-color: #6E9AD7;
height:50px;
margin-top:0px;
color:white;
text-align: center;
line-height:50px;
}
#wrapper
{
border-top:2px solid #E7E7E7;
margin-top:34px;
padding-top: 24px;
padding-left: 24px;
padding-right: 24px;
}
.item
{
margin-bottom: 10px;
}
.star
{
color:#9EC0C3;
margin-right:5px;
}
/*屬性選擇器*/
input[type="text"]
{
width:100%;
height:34px;
border-radius: 5px;
}
.small
{
font-size: 14px;
}
#btn_save
{
width:100%;
height:40px;
background-color: #2B6ECB;
border:none;
color:white;
font-size:18px;
}
~~~
