</pre><p>通过对 网页进行分块完成不同的样式设置,以下是代码:</p><pre class="html" name="code"><html>
<head>
<style>
#a{width:900px; padding-left:240px;}
#b{height:200px;}
#g{height:40px;}
#c{height:600px; width:900px;}
#d{float:left; width:100px; height:600px; background-color:lightblue;}
#e{float:right; width:800px;height:600px;}
#k{width:800px;height:60px; background-color:lightgreen;}
#i{width:800px;height:540px;background-color:pink;}
#f{width:900px;height:120px;background-color:#FF7;}
#w{float:right;width:300px;}
</style>
</head>
<body>
<div id="a">
<div id="b"><img src="tu1.jpg" height="200px" width="900px"/></div>
<div id="g"><a href="http://www.baidu.com"/>主页
<a href="http://www.rizhi.com"/>日志
<a href="http://www.xiangce.com"/>相册
<a href="http://www.liuyanban.com"/>留言板
<a href="http://www.shuoshuo.com"/>说说
<a href="http://www.gerendang.com"/>个人档
<a href="http://www.yinyue.com"/>音乐
<a href="http://www.shiguangzhou.com"/>时光轴
</div>
<div id="c">
<div id="d"></div>
<div id="e">
<div id="k"></div>
<div id="i"></div>
</div></div>
<div id="f">
<div id="w">
<form>
用户名:<input type="text" name="username" value="请输入用户名" style="height:30px;"></input><br>
<p style="padding-top=2px">密 码:<input type="password" name="password" style="height:30px;"></input></p>
<input type="submit" value="登录"> <a href="www.baidu.com">注册</a>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
网页层叠样式表(css+html)
最新推荐文章于 2024-03-12 20:10:01 发布