二维码名片制作

文章目录

二维码名片制作
- 第1关：二维码名片页面的结构设计
- - 相关知识
  - - 定义列表
    - span标签
  - 编程任务
  - 通关代码
- 第2关：二维码名片页面的样式设计
- - 相关知识
  - 编程任务及效果
  - - 具体要求
  - 通关代码

第1关：二维码名片页面的结构设计

编程任务

对右侧编辑器中的Begin - End区域的内容，补充标签和标签属性，具体要求是：

在<body>...</body>中使用定义表标签（dl）来定义内容。
定义项目使用<dt>...</dt>作用，其间的内容为空。
定义的解释体由四部分组成：
1. 第一部分使用<dd>...</dd>标签作用文字“李刚广告公司”，其中文字“李刚”使用span标签作用，设置类名为“poo1”，文字“广告公司”使用span标签作用，设置类名为“poo2”
2. 第二部分使用<dd>...</dd>标签作用文字“晋级：网页设计师”
3. 第三部分使用<dd>...</dd>标签作用文字“案例：41个”
4. 第四部分使用<dd>...</dd>标签作用文字“经验：4年”

通关代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计师名片</title>
</head>
<body><!-- ********* Begin ********* --><dl><dt></dt><dd><span class="poo1">李刚</span>  <span class="poo2">广告公司</span></dd><dd>晋级：网页设计师</dd><dd>案例：41个</dd><dd>经验：4年</dd></dl><!-- ********* End ********* -->
</body>
</html>

第2关：二维码名片页面的样式设计

编程任务及效果

对右侧编辑器中的Begin - End区域的文字内容补充样式规则，以实现下面的页面效果。

具体要求

使用群组选择器，对<body>、<dl>、<dt>、<dd>标签中的内容进行样式设置。将外边距和内边距值设置为0，并将边框线宽设置为0
对<dl>标签进行样式设置：（1）内容区宽度设置为170px，高度设置为270px (2)内边距设置为10px,外边距设置为10px (3)边框线宽设置为10px，线样式设置为单实线，边框线颜色设置为#f1e9e9
对<dt>标签进行样式设置：（1）内容区宽度设置为170px，高度设置为162px (2)背景图设置不平铺，背景图的水平定位值设置为-17px,垂直方向定位值设置为center (3)底部外边距设置为5px
对<dd>标签进行样式设置：（1）内容区宽度设置为170px，高度设置为26px (2)文本行高设置为26px,文本颜色设置为#999 (3)左内边距设置为5px
对类名为poo1的元素进行样式设置。（1）使文本字体粗细设置为bold （2）使文字大小设置为16px
对类名为poo2的元素进行样式设置。使文字大小设置为12px

通关代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计师名片</title>
<!-- ********* Begin ********* -->
<style type=text/css>body,dl,dt,dd{ margin: 0;padding: 0;border: 0px;}   dl{width: 170px;height: 270px;border: 10px solid #f1e9e9;padding: 10px;margin: 10px;}dt{width: 170px;height: 162px;background:url(https://www.educoder.net/api/attachments/2032559) no-repeat -17px center; margin-bottom: 5px;}dd{width: 170px;height: 26px;line-height: 26px;color: #999;padding-left: 5px;}
.poo1{font-weight: bold;font-size: 16px;}
.poo2{font-size: 12px;}
</style>
<!-- ********* End ********* -->
</head>
<body><dl><dt></dt><dd><span class="poo1">李刚</span>&nbsp;<span class="poo2">广告公司</span></dd><dd>晋级：网页设计师</dd><dd>案例：41个</dd><dd>经验：4年</dd></dl>
</body>
</html>

Educoder 二维码名片制作相关推荐

educode实训平台---二维码名片制作
educode实训平台-二维码名片制作第1关:二维码名片页面的结构设计 <!doctype html> <html lang="en"> <head ...
二维码名片制作：MECARD 和 vCard
二维码名片制作:MECARD 和 vCard 的格式定义 MECARD 基本定义字段定义示例 vCard vCard 数据格式的标识符 vCard基础格式定义 vCard数据行格式预定义类型的用 ...
EduCoder-Web程序设计基础-html5—二维码名片制作-(第1关：二维码名片页面的结构设计)(第2关：二维码名片页面的样式设计)
目录第1关:二维码名片页面的结构设计代码示例第2关:二维码名片页面的样式设计代码示例第1关:二维码名片页面的结构设计任务描述本关任务:设置一个二维码名片页面的主体结构. 相关知识为了完 ...
web前端-综合应用案例-二维码名片的制作-educoder
第1关:二维码名片页面的结构设计 <!doctype html> <html lang="en"> <head> <meta charse ...
Educoder_Web_二维码名片的制作
目录第一关二维码名片页面的结构设计第二关二维码名片页面的样式设计第一关二维码名片页面的结构设计 <!doctype html> <html lang="en&q ...
二维码名片怎么制作？这几种方法都能够生成二维码
怎么制作二维码名片呢?制作二维码名片是一种方便快捷的方式,可以使我们更加轻松地分享联系方式和提高专业形象.通过制作二维码名片,可以将所有联系方式(例如手机号码.电子邮件地址和社交媒体账户)集中在一个二 ...
二维码怎么制作？手把手教你制作生成
二维码怎么制作?现如今二维码无处不在,我们在外买东西支付,或者二维码名片等等.二维码作为我们日常工作和学习中重要的沟通桥梁,我们除了保存页面自带的二维码之外,还需要学会自己制作二维码.这里小编就来教大 ...
PHP二维码在线制作生成系统源码无需数据库带logo图标
简介: PHP二维码在线制作生成系统源码无需数据库带logo图标网盘下载地址: http://kekewl.net/Myae89V9DX00 图片:
二维码相关---java生成二维码名片,并且自动保存到手机通讯录中...
二维码相关---java生成二维码名片,并且自动保存到手机通讯录中... 技术qq交流群:JavaDream:251572072 1.首先介绍一个api. Zxing是Google提供的关于条码 ...
微信二维码名片生成示例【转】
二维码的对于现在已经很流行了,主要是因为其大数据量和容错能力.出于爱好,学了下google的zxing对二维码的处理. 首先生成一张二维码的话,只要输入文本就OK了. 下面是加密的代码 1 2 3 4 ...

Educoder 二维码名片制作

二维码名片制作

文章目录

第1关：二维码名片页面的结构设计

相关知识

定义列表

span标签

编程任务

通关代码

第2关：二维码名片页面的样式设计

相关知识

编程任务及效果

具体要求

通关代码

Educoder 二维码名片制作相关推荐

最新文章

热门文章