当前位置：网站首页>Educoder group purchase suspension box page production

Educoder group purchase suspension box page production

2022-06-30 04:07:00 【Elvin Yuwen】

The first 1 Turn off ： Structural design of group purchase suspension box page

100

Mission requirements
Refer to the answer
Comment on

Task description

Our mission ： Set the main structure of a group purchase suspension box page .

In order to complete this mission , You need to master ： The structure of an unordered list .

Programming tasks and effects

On the right side of the editor Begin - End The content of the area , Supplementary labels and label attributes , The specific requirement is ： 1. stay <body>...</body> Use an unordered list label in （ul） Filling list items . 2. The six lines of text correspond to six list items . 3. For the first time 2 List items to 6 A list item label li Add a class named item Properties of .

Test instructions

After adding the code , Please click assessment , The platform will test your code , If it's right, complete the mission .

The harder you work, the luckier you are , wish you success ！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> E-commerce group purchase suspension frame </title>
</head>
<body>
  <!-- ********* Begin ********* -->
	<ul>
      <li>7 month 30 Japan 0:00 Open a ball </li>
      
      <li class="item"> New group </li>
      <li class="item"> Try fresh dumplings </li>
      <li class="item"> Second kill regiment </li>
      <li class="item"> Clearance mission </li>
      <li class="item"> Return to the top </li>
	</ul> 
  <!-- ********* End ********* -->
</body>
</html>

The first 2 Turn off ： Style design of group purchase suspension box page

100

Mission requirements
Refer to the answer
Comment on

Task description

Our mission ： Design the style of group purchase suspension box page .

Related knowledge

In order to complete this mission , You need to master ：1. List style settings ,2. Setting of text appearance style ,3. Background style settings .

Programming tasks and effects

On the right side of the editor Begin - End The text content of the area is supplemented with style rules , To achieve the following page effect .

Effect drawing of group purchase suspension frame

specific requirement

1. Use a combination selector to pair <body> label 、<ul> label and <li> Style the contents of the label , Set its outer margin value to 0、 The inner margin value is set to 0、 Set the list bullet style to none.

2. On the label body Make style settings . （1） Set the text font size to 18px. （2） The text font is set to Microsoft YaHei . 3. On the label ul Make style settings .

（1） Set the width of its content area to 200px、 The height is set to 270px, The outer margin is set to 20ox, The inner margin is set to 10px.

（2） Use border Property to comprehensively set the border line , Make the line width 3px、 Single solid line 、 Color value for #613e72.

4. On the label li Make style settings . （1） Set the width of its content area to 142px、 The height is set to 40px. （2） Set the text line height to 40px. （3） Use background Background image of comprehensive attribute setting , The tiling method is set to non tiling , Set left alignment for horizontal image positioning , The vertical image positioning is set to center . （4） Set the left inner margin value to 40px. （5） Use three parameters to comprehensively set the outer margin , Make the upper and outer margins 0, Left and right are set to auto, The lower outer margin is 5px. （6） The text color value is set to #613e72.

5. The class name is item Style the elements of . （1） Use background Background image of comprehensive attribute setting , The tiling method is set to non tiling , Horizontal image positioning settings 5px, The vertical image positioning is set to center . （2） Set the text color value to #fff.

6. The class name is back Style the elements of the background image , The tiling method is set to non tiling , Set left alignment for horizontal image positioning , The vertical image positioning is set to center .

Test instructions

After adding the code , Please click assessment , The platform will test the style code you write , If it's right, complete the mission . In particular ： Consider the convenience of input and the need of detecting program settings , Value of style attribute Without quotes

The harder you work, the luckier you are , wish you success ！

explain ： The code can run , subject 3. On the label ul Make style settings . （1） Set the width of its content area to 200px、 The height is set to 270px, The outer margin is set to 20ox, The inner margin is set to 10px.

The outer margin is set to 20ox Writing mistakes , Should be 20px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> E-commerce group purchase suspension frame </title>
<!-- ********* Begin ********* -->
<style>
  body,ul,li{ 
           padding:0;
           margin:0;
        list-style:none;
            }
        body{ 
         font-size:18px; 
       font-family: Microsoft YaHei ;
            }
          ul{
             width:200px;
             height:270px;
             margin:20px;
             padding:10px;
             border:3px solid #613e72;
            }
          li{
	        width:142px;
	        height:40px;
	   line-height:40px;
	    background:url(https://www.educoder.net/api/attachments/2046898) no-repeat padding-left center;
	  padding-left:40px;
	         margin:0 auto 5px auto;
	         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 padding-left center                   ;
            }
</style>
<!-- ********* End ********* -->
</head>
<body>
	<ul>
        <li>7 month 30 Japan 0:00 Open a ball </li>
        <li class="item"> New group </li>
        <li class="item"> Try fresh dumplings </li>
        <li class="item"> Second kill regiment </li>
        <li class="item"> Clearance mission </li>
        <li class="back"> Return to the top </li>
    </ul>
</body>
</html>

原网站

版权声明
本文为[Elvin Yuwen]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160628079319.html