educoder实训平台----网页布局页面的制作

白夜的月亮

于 2021-12-17 21:38:54 发布

阅读量2k

点赞数

分类专栏： educoder平台实训html-web实训文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_59076472/article/details/122005509

版权

educoder平台实训html-web实训专栏收录该内容

30 篇文章 14 订阅

订阅专栏

educoder实训平台----网页布局页面的制作

第1关：网页布局的结构设计

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局</title>
</head>
<body>
<!-- ********* Begin ********* -->
  
  
   <div id="top"></div>
  <div id="nav"></div>
  <div id="banner"></div>
  <div id="content">
    <div class="content_left"></div>
    <div class="content_middle"></div>
    <div class="content_right"></div>
  </div>
  <div id="footer"></div>
  
  
  
  
  
  
<!-- ********* End ********* -->
</body>
</html>

第2关：网页布局的样式设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局</title>
<!-- ********* Begin ********* -->
<style type="text/css">
body{margin:0; padding:0;}

div{
	width:980px;                                               /*设置所有模块的宽度为980px、居中显示*/
	margin:0 auto;
}
#top{height:40px; background:url(https://www.educoder.net/api/attachments/2141326)}       
#nav{height:60px; background:url(https://www.educoder.net/api/attachments/2141327)}
#banner{height:200px; background:url(https://www.educoder.net/api/attachments/2141342)}
#content{height:300px; }

.content_left{                             /*左侧部分左浮动*/
	width:200px;
	height:300px;
	background-color:#CCC;
    float:left;
	margin:0;
	background:url(https://www.educoder.net/api/attachments/2141349)
}

.content_middle{                           /*中间部分左浮动*/
	width:570px;
	height:300px;
	background-color:#CCC;
	float:left;
	margin:0 0 0 5px;
	background:url(https://www.educoder.net/api/attachments/2141352)
}

.content_right{                           /*右侧部分右浮动*/
	width:200px;
	background-color:#CCC;
	float:right;
	height:300px;
	margin:0;
	background:url(https://www.educoder.net/api/attachments/2141351)
}

#footer{
	height:90px; 
	background:url(https://www.educoder.net/api/attachments/2141353)
}
</style>
<!-- ********* End ********* -->
</head>
<body>
  <div id="top"></div>
  <div id="nav"></div>
  <div id="banner"></div>
  <div id="content">
    <div class="content_left"></div>
    <div class="content_middle"></div>
    <div class="content_right"></div>
  </div>
  <div id="footer"></div>
</body>
</html>

白夜的月亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
educoder实训平台----网页布局页面的制作

educoder实训平台----网页布局页面的制作第1关：网页布局的结构设计 <!doctype html><html><head><meta charset="utf-8"><title>网页布局</title></head><body> <div id="top"></div&
复制链接

扫一扫