Edu 二维码名片制作

是小鹿呀
118 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

相关知识

定义列表

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

<dl>  
    <dt>名词1</dt> 
    <dd>名词1解释1</dd>  
    <dd>名词1解释2</dd>   
    ...   
    <dt>名词2</dt>
    <dd>名词2解释1</dd>   
    <dd>名词2解释2</dd> 
    ...
</dl>

用法示例：

<dl>  
    <dt>红色</dt> 
    <dd>可见光谱中长波末端的颜色。</dd> 
    <dd>是光的三原色和心理原色之一。</dd> 
    <dd>表着吉祥、喜庆、热烈、奔放、激情、斗志、革命。</dd>   
    <dd>红色的补色是青色。</dd>
</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>  <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
  6. 对类名为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>
avatar
文章
阅读
粉丝