移动端电商页面制作

文章目录

移动端电商页面制作
- 第1关：移动端电商页面制作
- - 相关知识
  - - 1.盒模型
    - 2.overflow属性
  - 编程要求
  - 通关代码

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

编程要求

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

设置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 移动端电商页面制作相关推荐

educoder太原理工web程序设计——移动端电商页面制作
第1关:移动端电商页面制作任务描述本关任务:用overflow属性实现移动端电商界面. <!doctype html> <html> <head> <me ...
EduCoder-Web程序设计基础-html5—移动端电商页面制作-（第1关：移动端电商页面制作）
第1关:移动端电商页面制作任务描述本关任务:用overflow属性实现移动端电商界面. 相关知识为了完成本关任务,你需要掌握: 1.盒模型 2.overflow属性选择器{overflow:属 ...
Educoder_Web_移动端电商页面制作
目录第一关移动端电商页面制作第一关移动端电商页面制作 <!doctype html> <html> <head> <meta charset=&quo ...
PSD分层可临摹模板|无线端电商页面UI设计几个常见的错误
电商和移动电商都在崛起,因为便携设备让我们生活越来越方便. 入门的设计师往往会忽略的几个常见问题: 购物车没有显示任何数字:确保在用户添加商品后,购物车能立即显示出商品的数量. 编辑购物清单很难 :一 ...
移动端电商首页制作-京东
文章目录前言一.技术选型二.搭建相关文件夹结构三.设置视口标签以及引入初始化样式四.常用初始化样式五.二倍精灵图做法六.图片格式 1.DGP图片压缩技术 2.webp图片格式七.代码展 ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
PSD分层模板|解析垂直化内容电商页面设计
从首页第一视觉停留开始首屏是第一视觉第一块信息展示区域,适合设计成时尚和引领当下热点潮流或者产品摄影图等视觉冲击力较强的图片,和符合用户知觉的文案,吸引用户的注意力. 时尚美女夏季护肤产品促销电商页 ...
优秀PSD电商促销BANNER模板|垂直化内容电商页面设计，需要注意哪些问题？
电商产品设计历经集市时代的比拼价格,到脑部内容意见领袖引导阶段,再到个性推荐! 垂直化内容移动端设计不需要迎合所有人口味,但是一定要给针对性的用户一个明确的暗示,"嘿,Girl,我是不同的 ...
Axure电商后台业务管理系统原型模板+app电商原型交互+移动端电商通用PRD文档+全局交互用例说明+Axure高保真电商社交prd文档
作品介绍:Axure电商后台业务管理系统原型模板+app电商原型交互+移动端电商通用PRD文档+全局交互用例说明+Axure高保真电商社交prd文档原型交互演示及下载地址https://www.pm ...

Educoder 移动端电商页面制作

移动端电商页面制作

文章目录

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

相关知识

1.盒模型

2.overflow属性

编程要求

通关代码

Educoder 移动端电商页面制作相关推荐

最新文章

热门文章