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

任务描述
本关任务：用overflow属性实现移动端电商界面。

相关知识
为了完成本关任务，你需要掌握：

1.盒模型
2.overflow属性
选择器{overflow:属性值;}
,

编程要求
根据提示，在右侧编辑器补充

设置all盒模型中的宽度为346px，高度为578px；
设置all盒模型中的上下外边距为 20px ，左右自动（auto），居中显示；
设置all盒模型中的内边距分别为90px 0 0 34px；
设置content盒模型的宽度为277px，高度为414px；
设置content盒模型的溢出内容会被修剪，且浏览器会始终显示滚动条的属性值代码。
显示效果图如下：

测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。

越努力越幸运，祝你成功！

代码示例

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

EduCoder-Web程序设计基础-html5—移动端电商页面制作-（第1关：移动端电商页面制作）相关推荐

Educoder -- Web程序设计基础2021秋 --实训作业全总结
博主会持续更新的呦! web程序设计基础R实验报告 2021年 1.Web前端开发概述 edu–Web程序设计基础2021秋–[Web前端开发概述][HTML5基础] 2. HTML5 基础 [web ...
educoder web程序设计基础知识点期末总结
网页表格基本概念为了完成本关任务,你需要掌握:1.表格的结构,2.表格的基本标签,3.表格标签的基本属性. 表格的结构在基本表格结构中,表格标题.项目表头和数据资料构成了表格基本结构三个要素. ...
Educoder -- Web程序设计基础2021秋--简历表页面的制作
文章目录第1关: 简历表页面的结构设计 1. 编程要求 2. 代码展示第2关: 简历表页面的样式设计 1. 编程要求 2. 代码展示第1关: 简历表页面的结构设计 1. 编程要求根据任务描述的 ...
Web程序设计基础2021 表格标签—表格高级样式的设置 educoder实训
第1关:表格高级样式设置相关概念任务描述本关任务:完成一组表格高级样式设置的概念题. 相关知识为了完成本关任务,你需要掌握:1.外边框线样式的设置,2.内部边框线的设置,3.单元格的合并. 外边 ...
web程序设计基础R实验报告 2021年 ---太原理工大学
每个实验中给出的练习代码不在此处进行运行,有问题的小可爱欢迎和博主交流呀! Educoder – Web程序设计基础2021秋 --实训作业全总结文章目录实验一: HTML基础 1. 实验内容 2 ...
Web程序设计基础期末大作业——模仿QQ飞车手游S联赛官网编写的网页
QQ飞车手游是我非常喜欢的游戏,也是我现在为数不多的常在玩的游戏,刚好我Web程序设计基础的大作业是要做一套网站,我就借此机会模仿飞车S联赛官网的页面自己做了一个网页,又加了一些自己的元素,由于我做这 ...
《Java Web程序设计基础教程》简介
本书是关于Java Web开发的基础教程,共分15章.第1章介绍如何构建Java Web应用:第2.3章介绍如何解决Java Web应用的输入和输出问题:第4-6章对登录功能进行了3次重构,这也是Ja ...
web程序设计基础——edu实训平台选择判断复习（1）
目录 Web前端开发概述 HTML5基础页面元素和属性构建web表单音频和视频 CSS3语法 JavaScript概述 JavaScript语言基础 Web前端开发概述 Web前端开发相关的概念 ...
Web程序设计基础——edu实训平台代码（1）
目录 Web前端开发概述 Web前端开发相关的技术 HTML5基础 HTML5-文档头部 HTML5-文本控制类标签 HTML5-图像的运用表格标签-表格基本结构 HTML5-超链接的 ...

EduCoder-Web程序设计基础-html5—移动端电商页面制作-（第1关：移动端电商页面制作）

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

代码示例

EduCoder-Web程序设计基础-html5—移动端电商页面制作-（第1关：移动端电商页面制作）相关推荐

最新文章

热门文章