Educoder -- Web程序设计基础2021秋-- CSS3页面布局

最新推荐文章于 2024-03-28 22:48:12 发布

牛小小小婷～

最新推荐文章于 2024-03-28 22:48:12 发布

阅读量750

点赞数 2

分类专栏： educoder # web 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/hannah2233/article/details/122099615

版权

web 同时被 2 个专栏收录

14 篇文章 8 订阅

订阅专栏

educoder

4 篇文章 0 订阅

订阅专栏

文章目录

一、网页布局页面的制作
移动端电商页面制作
- - 第1关：移动端电商页面制作
  - - 代码展示

一、网页布局页面的制作

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

移动端电商页面制作

第1关：移动端电商页面制作

代码展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动电商页面</title>
<style type="text/css">
/* ********* Begin ********* */
body{ font-size:12px;}   
body,img{padding:0; margin:0; border:0;}  
.all{
	width: 346px;
	height: 578px;
	background:url(https://www.educoder.net/api/attachments/2073417) no-repeat;
	margin: 20px auto;
	padding: 90px 0 0 34px;
}
.content{
    width: 277px;
    height: 414px;
    overflow: scroll;
/* ********* End ********* */
}
</style>
</head>
<body>
<div class="all">
    <div class="content">
        <img src="https://www.educoder.net/api/attachments/2072741" />
    </div>
</div>
</body>
</html>

牛小小小婷～

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Educoder -- Web程序设计基础2021秋-- CSS3页面布局

文章目录一、网页布局页面的制作第1关：网页布局的结构设计代码展示第2关：网页布局的样式设计代码展示移动端电商页面制作第1关：移动端电商页面制作代码展示一、网页布局页面的制作第1关：网页布局的结构设计代码展示 <!doctype html><html><head><meta charset="utf-8"><title>网页布局</title></head><body><!-- ****
复制链接

扫一扫

专栏目录