网页层叠样式表（css+html）

最新推荐文章于 2024-03-31 22:20:49 发布

qq_34291336

最新推荐文章于 2024-03-31 22:20:49 发布

阅读量787

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_34291336/article/details/50897844

版权

html+css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

</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>