Level 1: structural design of QR code business card page
Relevant knowledge
In order to complete this level task, you need to master: 1 Define table settings, 2 Span label.
Definition list
Definition lists are often used to explain and describe terms or nouns. Unlike unordered and ordered lists, the list items of a definition list do not have any bullets in front of them. Define list to < DL ></ DL > build a list container, which contains two parts: definition item and interpretation body. The definition item uses < DT ></ DT > function, the interpreter of each definition item can be one or more < DD ></ DD > function. The syntax format is as follows:
- <dl>
- < DT > noun 1 < / dt >
- < DD > noun 1 interpretation 1 < / DD >
- < DD > noun 1 interpretation 2 < / DD >
- ...
- < DT > noun 2 < / dt >
- < DD > noun 2 interpretation 1 < / DD >
- < DD > noun 2 interpretation 2 < / DD >
- ...
- </dl>
Usage example:
- <dl>
- < DT > Red < / dt >
- < DD > the color of the end of the long wave in the visible spectrum</ dd>
- < DD > is one of the three primary colors of light and psychological primary colors</ dd>
- < DD > represents auspiciousness, festivity, enthusiasm, boldness, passion, fighting spirit and revolution</ dd>
- < DD > the complementary color of red is cyan</ dd>
- </dl>
The operation effect is as follows:
span label
The span tag is an inline tag. It is often used to define some special displayed text in web pages. In line labels do not occupy an independent area, and only rely on their own font size and image size to support the structure. Generally, width, height, alignment and other attributes cannot be set< Span > and < / span > can only contain text and various inline tags.
Programming tasks
For the contents of the Begin - End area in the editor on the right, add labels and label attributes. The specific requirements are as follows: 1 In < body ></ The definition table label (dl) is used in body > to define the content. 2. The definition item uses < DT >... < / dt > function, and the content between them is empty. 3. The definition interpreter consists of four parts: (1) the first part uses < DD ></ DD > the label function text "Li Gang advertising company", in which the text "Li Gang" uses the span label function, set the class name to "poo1", and the text "advertising company" uses the span label function, Set the class name as "poo2" (2) the second part uses < DD >... < / DD > label action text "promotion: web designer" (3) the third part uses < DD >... < / DD > label action text "cases: 41" (4) the fourth part uses < DD >... < / DD > label action text "experience: 4 years"
Test description
After supplementing the code, please click evaluation. The platform will test the code you write. If it is correct, you will complete the task of breaking through the customs.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Designer business card</title>
</head>
<body>
<!-- ********* Begin ********* -->
<dl>
<dt></dt>
<dd><span class="poo1">Li Gang</span> <span class="poo2">advertising agency</span></dd>
<dd>Promotion: Web Designer</dd>
<dd>Cases: 41</dd>
<dd>Experience: 4 years</dd>
</dl>
<!-- ********* End ********* -->
</body>
</html>Level 2: style design of QR code business card page
Task description
Related task: design the style of QR code business card interface.
Relevant knowledge
In order to complete this level task, you need to master: 1 Box model style settings, 2 Text appearance style settings, 3 Style setting of background drawing, 4 Application of compound selector.
Programming tasks and effects
Supplement style rules for the text content in the Begin - End area in the right editor to achieve the following page effect.
specific requirement
1. Use the group selector to style the contents in < body >, < DL >, < DT >, < DD > labels. Set the outer margin and inner margin values to 0 and the border lineweight to 0.2 Style the < DL > label: (1) the width of the content area is set to 170px and the height is set to 270px; (2) the inner margin is set to 10px and the outer margin is set to 10px; (3) the border line width is set to 10px, the line style is set to single solid line, and the border line color is set to #f1e9e9 3 Style the < DT > label: (1) the width of the content area is set to 170px and the height is set to 162px (2) the background image is not tiled, the horizontal positioning value of the background image is set to - 17px, the vertical positioning value is set to center (3) the outer margin of the bottom is set to 5px 4 Style the < DD > label: (1) set the width of the content area to 170px and the height to 26px; (2) set the text line height to 26px and the text color to #999; (3) set the left inner margin to 5px 5 Style the element named poo1. (1) Set the text font thickness to bold (2) set the text size to 16px 3. Set the style of the element named poo2. Set the text size to 12px
Test description
After supplementing the code, please click evaluation. The platform will test the style code you wrote. If it is correct, you will complete the task of breaking through the customs. Special note: considering the convenience of input and the needs of detection program setting, the value of style attribute is not quoted
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Designer business card</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">Li Gang</span> <span class="poo2">advertising agency</span></dd>
<dd>Promotion: Web Designer</dd>
<dd>Cases: 41</dd>
<dd>Experience: 4 years</dd>
</dl>
</body>
</html>