1. Create a list as shown in the figure
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type='1' start='1'>
<li>Which fruit do you prefer</li>
<ol type='A' start='A'>
<li>strawberry</li>
<li>Banana</li>
<li>Apple</li>
<li>watermelon</li>
</ol>
<li>Where do you usually go for leisure ()</li>
<ol type='A' start='A'>
<li>outskirts</li>
<li>market</li>
<li>park</li>
<li>bar</li>
</ol>
<li>What kind of people do you think are easy to attract you ()</li>
<ol type='A' start='A'>
<li>A talented person</li>
<li>People who depend on you</li>
<li>kind people</li>
<li>Elegant person</li>
</ol>
<li>If you can be an animal, what kind of animal do you want to be ()</li>
<ol type='A' start='A'>
<li>cat</li>
<li>dog</li>
<li>monkey</li>
<li>Bird</li>
</ol>
<li>What is your favorite life</li>
<ol type='A' start='A'>
<li>Facing the sea, flowers bloom in spring</li>
<li>Picking chrysanthemums under the eastern fence, you can see the Nanshan Mountain leisurely</li>
<li>air conditioner wifi Watermelon, fish and shrimp at night</li>
<li>Professional talent</li>
</ol>
<li>Your favorite movie type ()</li>
<ol type='A' start='A'>
<li>Action drama</li>
<li>comedy</li>
<li>love</li>
<li>Everything is average. There is no favorite</li>
</ol>
</ol>
</body>
</html>
The results are as follows:
After adding CSS styles to it, you can restore the page. The CSS code is shown in the figure below
<style>
.box {
width: 500px;
height: 620px;
background-color: cyan;
}
</style>
The results are as follows:
The strategy adopted here is: label nesting method. First, all problems are represented by an ordered list, and the specific options of each problem are nested inside the problem through an unordered list. When setting CSS style, in order to realize that some pages have color, a box is added to wrap all the lists, and then the effect is realized by adding background color and width height attributes to the box. Finally, in order to be beautiful, the top and bottom inner margins are added to the box.
2. Create a table and implement the page shown in the figure below.
The HTML implementation code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td rowspan="5" class='ora'>student</td>
<td colspan="6" class='blue'>Student information sheet</td>
</tr>
<tr class='red'>
<td>Serial number</td>
<td>full name</td>
<td>Gender</td>
<td>Age</td>
<td>Telephone</td>
<td>address</td>
</tr>
<tr class='grey'>
<td>1</td>
<td>Zhang San</td>
<td>male</td>
<td>23</td>
<td>110</td>
<td>Yan pagoda</td>
</tr>
<tr class='grey'>
<td>1</td>
<td>Zhang San</td>
<td>male</td>
<td>23</td>
<td>110</td>
<td>Yan pagoda</td>
</tr>
<tr class='grey'>
<td>1</td>
<td>Zhang San</td>
<td>male</td>
<td>23</td>
<td>110</td>
<td>Yan pagoda</td>
</tr>
</table>
</body>
</html>
The CSS implementation code is:
<style>
table{
border: 1px solid black;
text-align: center;
}
td {
width: 100px;
height: 30px;
border: 1px solid black;
}
.ora {
background-color: orange;
}
.blue {
color: red;
background-color: aqua;
}
.red {
background-color: rgb(207, 59, 59);
}
.grey {
background-color: dimgrey;
}
</style>
The final implementation page is:
The list label used here. It mainly focuses on the understanding of cross row and cross column of the table. In the specific implementation process, the structure is written in advance, the specific layout is carried out, and then the effect of each area is realized by adding a class selector to the label. At the beginning, I added a gray attribute to the whole table, and then added colors to other specific areas to cover the colors of other parts, However, after adding gray attributes to the whole list, the whole page can achieve the effect, but the border spacing also becomes gray. I add attributes to each line element again, and finally the page can be realized.
3. The following page is implemented through the form
The implementation code of HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table>
<tr>
<td colspan='2'>
binding MSN/QQ Account number (found) MSN/QQ Friends on play together, or when they join the relationship, they will notify you as soon as possible)
</td>
</tr>
<tr>
<td width='150'><label>account type:</label></td>
<td>
<select>
<option value="">MSN</option>
<option value="">QQ</option>
</select>
</td>
</tr>
<tr>
<td>MSN account number:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>MSN password:</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan='2'> <hr></td>
</tr>
<tr>
<td colspan='2'>Create your Yahoo Mail</td>
</tr>
<tr>
<td>Select your Yahoo mailbox:</td>
<td><input type="text"><select name="" id=""><option value="">yahoo.cn</option></select></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>Enter the password again:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>Real name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td><label for="">Gender:</label></td>
<td>
<input type="radio" name='sex' id='s1' checked/><label for="s1">male</label>
<input type="radio" name='sex' id='s2'/><label for="s2">female</label>
</td>
</tr>
<tr>
<td><label>City of residence:</label></td>
<td>
<select name="" id="">
<option value="">--Please select--</option>
<option value="">Shaanxi Province</option>
<option value="">Shanxi Province</option>
<option value="">Beijing</option>
</select>
<select>
<option value="">--Please select a city--</option>
<option value="">Xi'an City</option>
<option value="">shangluo </option>
<option value="">Xianyang City</option>
<option value="">Weinan City</option>
</select>
</td>
</tr>
<tr>
<td>Privacy settings:</td>
<td>
<select name="" id="">
<option value="">I want to play with acquaintances and their friends</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'> <hr></td>
</tr>
<tr>
<td colspan='2'>Password protection information (the following information is used to retrieve the password and deal with other account problems. Please fill in it carefully and keep it in mind)</td>
</tr>
<tr>
<td><label>Password protection questions:</label></td>
<td>
<select name="" id="">
<option value="">-Please select a question-</option>
</select>
</td>
</tr>
<tr>
<td><label>answer:</label></td>
<td><input type="input"></td>
</tr>
<tr>
<td>birthday:</td>
<td><input type="date"> <label for=""><input type="checkbox" checked>Confidential age</label></td>
</tr>
<tr>
<td><label>Alternate mailbox:</label></td>
<td><input type="input"></td>
</tr>
<tr>
<td colspan='2'> <hr></td>
</tr>
<tr>
<td colspan='2'>Registration inspection</td>
</tr>
<tr>
<td>Enter check code:</td>
<td><input type="input"></td>
</tr>
</table>
</form>
</body>
</html>
Here, the knowledge of table and form is comprehensively used. The form field is laid out through table. In the specific implementation process, many input form controls and cross row and cross column processing of table are used.