二维码名片制作

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

任务描述

本关任务:设置一个二维码名片页面的主体结构。

相关知识

为了完成本关任务,你需要掌握:1.定义表的设置,2.span标签。

定义列表

定义列表常用于对术语或名词进行解释和描述,与无序和有序列表不同,定义列表的列表项前没有任何项目符号。定义列表以<dl>...</dl> 构建列表容器,其中包含定义项目和解释体两部分,定义项目使用<dt>...</dt>作用,每个定义项目的解释体可以一个或多个<dd>...</dd>作用。 其语法格式如下:

 
  1. <dl>
  2. <dt>名词1</dt>
  3. <dd>名词1解释1</dd>
  4. <dd>名词1解释2</dd>
  5. ...
  6. <dt>名词2</dt>
  7. <dd>名词2解释1</dd>
  8. <dd>名词2解释2</dd>
  9. ...
  10. </dl>

用法示例:

 
  1. <dl>
  2. <dt>红色</dt>
  3. <dd>可见光谱中长波末端的颜色。</dd>
  4. <dd>是光的三原色和心理原色之一。</dd>
  5. <dd>表着吉祥、喜庆、热烈、奔放、激情、斗志、革命。</dd>
  6. <dd>红色的补色是青色。</dd>
  7. </dl>

运行效果如下:

定义表效果图

span标签

span标签是一个行内标记。常用于定义网页中某些特殊显示的文本。 行内标签不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。 <span></span>之间只能包含文本和各种行内标记。

编程任务

对右侧编辑器中的Begin - End区域的内容,补充标签和标签属性, 具体要求是: 1.在<body>...</body>中使用定义表标签(dl)来定义内容。 2.定义项目使用<dt>...</dt>作用,其间的内容为空。 3.定义的解释体由四部分组成: (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>&nbsp;<span class="poo2">广告公司</span></dd>
        <dd>晋级:网页设计师</dd>
        <dd>案例:41个</dd>
        <dd>经验:4年</dd>
        </dl>
    
    <!-- ********* End ********* -->
</body>
</html>

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

任务描述

本关任务:对二维码名片界面进行样式设计。

相关知识

为了完成本关任务,你需要掌握:1.盒模型样式设置,2.文本外观样式设置,3.背景图的样式设置,4.复合选择器的运用。

编程任务及效果

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

二维码效果图

具体要求

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

测试说明

补充代码后,请点击测评,平台会对你编写的样式代码进行测试,如果正确则完成闯关任务。 特别说明:考虑输入方便和检测程序设置的需要,样式属性的取值不加引号

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计师名片</title>
<!-- ********* Begin ********* -->
<style type=text/css>
  body,dl,dt,dd{ 
      
            padding:0; margin:0; border:0;
      
      }   
  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> 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值