educoder实训平台--移动端电商页面制作----团购悬浮框页面制作

educoder实训平台–移动端电商页面制作

第1关：移动端电商页面制作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动电商页面</title>
<style type="text/css">
/* ********* Begin ********* */
body{
      
       font-size:12px;}   
body,img{
      
      padding:0; margin:0; border:0;}  
.all{
      
      
	width:346px;
	height:578px;
	background:url(https://www.educoder.net/api/attachments/2073417) no-repeat   center;
	margin:20px auto;
	padding:90px 0 0 34px;
}
.content{
      
      
    width:277px;
    height:414px;
  overflow:scroll;                
/* ********* End ********* */
}
</style>
</head>
<body>
<div class="all">
    <div class="content">
        <img src="https://www.educoder.net/api/attachments/2072741" />
    </div>
</div>
</body>
</html>

团购悬浮框页面制作

第1关：团购悬浮框页面的结构设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
</head>
<body>
  <!-- ********* Begin ********* -->
	
<ul>
        <li>7月30日0:00开团</li>
        <li class="item">新品团</li>
        <li class="item">尝鲜团</li>
        <li class="item">秒杀团</li>
        <li class="item">清仓团</li>
        <li class="item">返回顶部</li>
    </ul>
    
  <!-- ********* End ********* -->
</body>
</html>

第2关：团购悬浮框页面的样式设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
<!-- ********* Begin ********* -->
<style>
  body,ul,li{
      
       
           padding:0;
           margin:0;
        list-style:none;
            }
        body{
      
       
         font-size: 18px;
       font-family:微软雅黑;
            }
          ul{
      
      
             width: 200px;
            height:270px;
            margin: 20px;
            border:3px solid #613e72;
           padding:10px;
            }
          li{
      
      
	         width:142px;
	        height:40px;
	   line-height:40px;
	    background: url(https://www.educoder.net/api/attachments/2046898)  no-repeat left center                          ;
	  padding-left:40px;
	        margin:0 auto 5px;
	         color:#613e72;
            }
       .item{
      
      
	    background:#613e72 url(https://www.educoder.net/api/attachments/2046946)    no-repeat 5px center       ;
	         color:#fff;
            }
       .back{
      
      background:url(https://www.educoder.net/api/attachments/2046953)        no-repeat left center               ;
            }
</style>
<!-- ********* End ********* -->
</head>
<body>
	<ul>
        <li>7月30日0:00开团</li>
        <li class="item">新品团</li>
        <li class="item">尝鲜团</li>
        <li class="item">秒杀团</li>
        <li class="item">清仓团</li>
        <li class="back">返回顶部</li>
    </ul>
</body>
</html>

educoder实训平台--移动端电商页面制作----团购悬浮框页面制作

educoder实训平台–移动端电商页面制作

第1关：移动端电商页面制作

团购悬浮框页面制作

第1关：团购悬浮框页面的结构设计

第2关：团购悬浮框页面的样式设计

猜你喜欢