表单练习
1，div 给网页分层
2，link引入css外部样式
<link rel="stylesheet" type="text/css" href="input.css">
3，创建外部样式 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，运用表格排列表单 代码如下：
<body>
<form>
<table>
<tr>
<th></th>
<td><input type=" " name=" "></td>
</tr>
.
.
.
</table>
</form>
</body>
运行结果如下：
5.内联框架
用class给div名类名：
<div class="div1"></div>
5.1 搭建内联框架：
<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>
运行结果如下：
鼠标点击左边小图标，将在右边的内联框架中显示相应的图片！
网友评论