首页 > 代码库 > CSS学习之首页简单布局
CSS学习之首页简单布局
作为一个PHPer，在前端方面javascript、jquery这些的日常工作还搞的定。可对于div+css这些东西可就头疼了，所以现在开始学习CSS
跟着燕十八的教程开始从最基础学起，首先练习一个简单首页的布局
1 <html> 2 <head> 3 <title>首页布局</title> 4 <style> 5 #container { 6 width: 1200px; 7 background-color: blue; 8 } 9 #header {10 width: 1200px;11 height: 100px;12 background: red;13 }14 #main {15 width: 1200px;16 height: 500px;17 background: black;18 }19 #four {20 width: 580px;21 height: 230px;22 background: green;23 float: left;24 margin: 10px;25 }26 #footer {27 width: 1200px;28 height: 100px;29 background: blue;30 }31 32 </style>33 </head>34 35 <body>36 <div id="container">37 <div id="header"> 38 </div>39 <div id="main">40 <div id="four"></div>41 <div id="four"></div>42 <div id="four"></div>43 <div id="four"></div>44 </div>45 <div id="footer"> 46 </div> 47 </div>48 </body>49 </html>
显示效果：
CSS学习之首页简单布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。