educode实训平台---二维码名片制作

educode实训平台—二维码名片制作

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

<!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关：二维码名片页面的样式设计

<!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: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>

educode实训平台---二维码名片制作

educode实训平台—二维码名片制作

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

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

猜你喜欢