html网页布局基础教程

小泽 2019-11-13 21:52 1条评论

[HTML 布局 - 使用<div><css> 元素]


20191113224312872.jpg

左边布局采用<div>直接布局

<css>直接布局


下方代码只是提供参考





<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>爱分享资源网基础教程</title> 

<style type="text/css">

.top{background-color:#090; font-family:黑体; font-size:30px; width:250px; height:30px; color:#FFF; text-align:center;}


.left{font-size:16px; color:#FFF; width:250px; height:200px;}


li{background:#03C; height:20px; width:250px; text-align:center;}



</style>

</head>

<body>

 <div class="top" align="center">爱分享资源网</div>

 

<div class="left" style="background:#000" align="left">

<div  style="background:#999; width:50px; height:50px;"></div>

<div style="background:#00C; width:100px; height:50px;"></div>

<div style="background:#360; width:80px;height:50px;"></div>

<div style="background:#CCC; width:100%;height:10px;"></div>

<div style="background:#360; width:130px;height:30px;"></div>

<div  style="background:#999; width:20px; height:10px;"></div>

</div>


<li>我是底部</li>


</body>

</html>


本文标签: html, 网页布局, css
0.0

说点什么吧
  • 全部评论(0