Web前端开发技术（第3版）实训5 项目16 DIV+CSS页面布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web前端开发技术（第3版）实训5 项目16 DIV+CSS页面布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实验课本61页

根据要求修改注释和链接的css文件就可以实现三种页面的呈现

更改具体内容和颜色代码就可以实现课本上的页面。

主代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link href="layout_1.css" rel="stylesheet" type="text/css"/>
   </head>
   <body >
       <div id="container">
           <div id="header">这是划水区</div>
   <div id="nav">这是摸鱼区</div> 
    
           <div id="maincontent">
           <div id="main">这是滑滑梯区</div> 
           <div id="side">这是休息区</div> 
    
    
    
           </div>
           <div class="clearfloat"></div> 
       <div id="footer">这是版权信息区</div> 
       </div>
   </body>
</html>

layout_1.css

*{margin: 0 auto;margin-left: 0 auto;margin-right: 0 auto;font-weight: bold;font-size: 28px;line-height: 1.5em;}
#container{width: 900px;border-top: 0px;border-left: 0 auto;}
#header{height: 70px;background-color: #d5e3d1;margin-bottom: 8px;}
#nav{height: 40px;background-color: #eaeef1;margin-bottom: 8px;}
#maincontent{border-bottom: 8px;}
#main{float: left; width: 664px;height: 400px;background-color: #d4dde1;}
#side{float: right; width: 228px;height: 400px;background-color: #b2bfc3;}
.clearfloat{clear: both;}
#footer{height: 70px;background-color: #bdcbd2;border-top-width: 8px;border-top-style:solid ;border-top-color: white}

运行实现图 web实训5,前端,css,html

文章来源地址https://www.toymoban.com/news/detail-739429.html

layout_2.css

*{font-weight: bolder;font-size: 28px;margin: 0;}
#container{margin: 0 auto;width: 900px;}
#header{height: 100px;background: #6cf;margin-bottom: 5px;}
#maincontent{margin-bottom: 5px;}
#sidebar{float: left;width: 200px;height: 500px;background: #9ff;}
#content{float:right;width: 695px;height: 500px;background: #cfe;}

web实训5,前端,css,html

layout_3.css

*{padding: 0px;margin: 0 auto;font-weight: bolder;font-size: 24px;}
#container{width: 100%;}
#header{height: 100px;background: #76a4b3;margin-bottom: 5px;}
#menu{height: 30px;background: #d7e8f8;margin-bottom: 5px;}
#maincontent{margin-bottom: 5px;height: 350px;}
#sidebar{float: left;height: 350px;background: #205064;}
#content{margin-left: 205px;height: 350px;background: #eca7a7;}
#footer{height: 60px;background: #76a4b3;}
.clearfloat{clear: both;}

web实训5,前端,css,html