表單練習(xí)
1，div 給網(wǎng)頁(yè)分層
2，link引入css外部樣式
? ? ?<link rel="stylesheet" type="text/css" href="input.css">
3，創(chuàng)建外部樣式 input.css:
.div {
width: 1350px
}
.div1 {
background: url(../gouwu/bei.png);
text-align: center;
width: 1350px;
height: 110px
}
.div1 h1 {
font-size: 50px
}
.div1 p {
float: right;
font-size: 20px;
padding: 0 100px 0 0
}
.div2 {
background: url(../gouwu/hua.png);
float: left;
width: 230px;
height: 510px
}
.div2 ul {
font-size: 20px;
padding: 0 0 0 80px
}
.div3 {
float: left;
}
.div3 th {
text-align: right;
padding: 20px 0 0 200px
}
.div3 td {
padding: 20px 0 0 0
}
.input {
width: 300px;
height: 30px
}
.in {
width: 100px;
height: 15px
}
.put {
width: 150px;
height: 40px
}
4腋腮，運(yùn)用表格排列表單 代碼如下：
<body>
? <form>
? ? <table>
? ? ? <tr>
? ? ? ? <th></th>
? ? ? ? <td><input? type=" " name=" "></td>
? ? ? </tr>
? ? ? .
? ? ? .
? ? ? .
? ? </table>
? ?</form>
</body>
運(yùn)行結(jié)果如下：
5.內(nèi)聯(lián)框架
用class給div名類名：
<div class="div1"></div>
5.1 搭建內(nèi)聯(lián)框架：
<div>
<div class="div1">
<p><a href=" " target="iframe"><img src=" "></a></p>
? ?.
? ?.
? ?.
</div>
<div class="div2">
<iframe src=" " name="iframe"></iframe>
</div>
</div>
5.2 ?css樣式：
<style type="text/css>
div {
width: 1200px;
}
.div {
text-align: center;
width: 1200px;
height: 55px;
background: url(../gouwu/cao.png)
}
.div1 {
width: 260px;
float: left
}
.div1 img {
width: 200px;
height: 100px
}
.div2 {
float: left;
width: 940px
}
.div2 iframe {
border: 0;
width: 900px;
height:600px;
text-align: center
}
</style>
運(yùn)行結(jié)果如下：
鼠標(biāo)點(diǎn)擊左邊小圖標(biāo)，將在右邊的內(nèi)聯(lián)框架中顯示相應(yīng)的圖片壤蚜！
