您的当前位置：首页正文

二维码名片制作

来源：六九路网

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

任务描述

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

编程任务

对右侧编辑器中的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关：二维码名片页面的样式设计

任务描述

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

编程任务及效果

对右侧编辑器中的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>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

二维码名片制作

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

任务描述

相关知识

编程任务

测试说明

任务描述

相关知识

编程任务及效果

测试说明