1. The purpose of the experiment
Mastering forms and controls ;
Master CSS styles.
2. Experimental procedure and design description
Experiment 1 :
Familiar with the usage of span , mainly set labels for verbs and names, set the same class name for verbs, set the same class name for nouns, and set the style.
Experiment 2 :
It is mainly the typesetting of the text, which is implemented from top to bottom. The title has the same format, the text has the same format, the parts with the same format use the same style, set triple spacing, add a box at the outermost layer, and the experiment is completed.
Experiment 3 :
According to the experimental requirements, the text on the left is right-aligned. In order to click the text on the left, it will automatically focus on the back text box, and the label label is used. Since the label label is not a block label, in order to set the width and right alignment, it is forced to be converted to a block label. When the cursor is in the text box, the background of the text box is pink, which is realized by hover . When it is arranged in the same line, the following prompt text will be automatically transferred to the next line. Use, float to the left to realize that they are on the same line. Implement the drop-down box through the select tag, the background image through the background , and then set the line spacing, the experiment is basically completed.
3. Experimental results and conclusions:
Experiment 1
Experiment 2
Experiment 3
The Form table is set with action="", method="GET", and the input result will be displayed in the URL bar.
Appendix: Program source program (paste the source code of the web page here)
Experiment 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title> English vocabulary </title>
<style type="text/css">
.blue {
color:blue;
}
.green {
color:green;
}
</style>
</head>
<body>
<p>
<span>
<span class="blue">Chinese President Xi Jinping Tuesday </span> <span class="green"> idvowed </span> to continue to <span class="green">serve</span> the <span class="blue">people </span> at the <span class="blue">closing meeting</span> of the 13th <span class="blue">National People's Congress (NPC) annual session</span>.
</span>
</p>
</body>
</html>
Experiment 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Untitled document </title>
<style type="text/css">
#style{
width:510px;
border:solid 1px;
padding: 10px;
margin:0px auto;
}
#next{
color: gray;
text-align: center;
}
.word{
text-indent:2em;
}
h1 {
font-family:" Bold ";
line-height: 3;
}
</style>
</head>
<body>
<div id="styl">
<div align="center">
<img src="img/moon.jpg" width="510px" height="286"/>
</div>
<h1 align="center"> Water tune song head When will the moon be there </h1>
<p align="center">[宋] 苏轼</p>
<p id="next">
<em> Bingchen Mid-Autumn Festival, drink Dadan happily, get drunk, and write this article. And pregnant with the child by. </em>
</p>
<div>
<p class="word">
<b>
When the moon is there, ask the sky for wine. I don't know what year it is in the palace of heaven.
I want to ride the wind back home. I am afraid that Qionglou Yuyu, the heights are too cold, dance to figure out the shadow, how it seems to be in the world.
</b>
</p>
<p class="word">
<b>
Turn Zhuge, low Qi household, according to no sleep. There should be no hatred, what is the long way to go?
People have joys and sorrows, and the moon is cloudy and sunny. This is difficult to complete. Nung, moon and new moon.
</b>
</p>
</div>
<hr/>
<div align="center">
<img src="img/next2.jpg"/>
</div>
<h1 align="center"> Niannujiao·Chibi nostalgia </h1>
<p align="center">[宋] 苏轼</p>
<p class="word">
<b>
The great river goes east, the waves are exhausted, and the romantic figures of the ages. To the west of the fortress, the way of humanity is,
Three Kingdoms Zhou Lang Chibi. The rocks pierced through the air, the waves crashed on the shore, and thousands of piles of snow were rolled up. Picturesque, a moment how many hero.
</b>
</p>
<p class="word">
<b>
Thinking back to Gongjin's time, Xiao Qiao was married for the first time, and she was majestic. feather fan towel,
While chatting and laughing, the turrets vanished into ashes. My motherland is wandering, I should laugh at me with affection, and I was born early. Life is like a dream, and a statue is still in the river.
</b>
</p>
</div>
</body>
</html>
Experiment 3 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exp2_3</title>
<style type="text/css">
body {
font-size: 14px;
}
.div {
width: 500px;
margin: 0px auto;
border: 1px solid;
padding-left: 45px;
padding-top: 10px;
}
.color {
color: red;
}
.gray {
color: gray;
}
#b2 {
background: antiquewhite;
border: solid gray 1px;
height: 40px;
width: 180px;
margin-left: 7px;
}
#write1,
#write2,
#write3,
#write4 {
height: 30px;
}
input[type=text]:hover {
background: pink;
}
input[type=tel]:hover {
background: pink;
}
input.kt {
margin-left: 150px;
margin-bottom: 20px;
width: 157px;
height: 54px;
background-image: url(../img/new_btn.png);
background-position: -410px -0px;
}
input[type=submit]:hover {
background-image: url(../img/new_btn.png);
background-position: -566px -0px;
cursor: pointer;
}
.s1 {
text-align: right;
display: inline‐block;
width: 100px;
line‐height: 30px
}
#l1 {
display: inline-block;
width: 150px;
text-align: right;
float: left;
position: relative;
top: 10px;
height: 30px;
}
#l2 {
position: relative;
top: 8px;
}
.r1,.r2,.r3,.r4,.r5,.r6 {
height: 50px;
}
.r3,.r4,.r5,.r6 {
clear: both;
}
#boy,
#girl {
position: relative;
top: 9px;
}
.frame1,
.frame2 {
border: solid 1px;
float: left;
position: relative;
top: 4px;
color: gray;
width: 90px;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="div">
<form method="get" action="#">
<div class="r1">
<label for="write1" id="l1">
<span class="s1">
<span class="color">*</span>
<span> My mobile number :</span>
</span>
</label>
<input type="tel" id="write1" name="phone" placeholder="输入手机" pattern="^1[3‐9]\d{9}" required="required" autofocus="autofocus"/>
<input type="button" id="b1" value=" Get verification code for free " />
</div>
<p class="gray" style="padding-left: 150px;position:relative;top:-5px;"> After completing the registration, your mobile phone number will be your Weibo login number. </p>
<div class="r2" style="display: inline-block;">
<div style="float:left" ;>
<label for="write2" id="l1">
<span class="s1">
<span class="color" >*</span>
<span> Create password :</span>
</span>
</label>
<input type="text" id="write2" name="password"/>
</div>
<div style="float:left;position:relative; top:-15px;">
<p id="b2"> For the security of your account, please use a different password from other networks. </p>
</div>
</div>
<div class="r3">
<label for="write3" id="l1">
<span class="s1">
<span class="color">*</span>
<span> Nickname :</span>
</span>
</label>
<input type="text" id="write3" placeholder="输入昵称" required="required" name="name"/>
</div>
<div class="r4">
<label id="l1">
<span class="s1">
<span class="color">*</span>
<span> Gender :</span>
</span>
</label>
<input type="radio" id="boy" value="男" name="sex" checked="checked"/>
<label for="boy" id="l2">男</label>
<input type="radio" id="girl" value="女" name="sex" />
<label for="girl" id="l2">女</label>
</div>
<div class="r5">
<label id="l1">
<span class="s1">
<span class="color">*</span>
<span> Location :</span>
</span>
</label>
<div class="frame1">
<select id="city">
<option value=" Beijing "> Beijing </option>
<option value=" Shanghai "> Shanghai </option>
<option value=" Guangzhou "> Guangzhou </option>
<option value=" Shenzhen "> Shenzhen </option>
</select>
</div>
<div class="frame2" style="margin-left: 5px;">
<select id="region">
<option value=" Haidian District "> Haidian District </option>
<option value=" Dongcheng District "> Dongcheng District </option>
<option value=" Haizhu District "> Haizhu District </option>
<option value=" Yuexiu District "> Yuexiu District </option>
<option value=" Futian District "> Futian District </option>
<option value=" Huangpu District "> Huangpu District </option>
</select>
</div>
</div>
<div class="r6">
<label for="write4" id="l1">
<span class="s1">
<span class="color">*</span>
<span> Mobile verification code :</span>
</span>
</label>
<input type="text" id="write4" name="kaitong" style="width: 60px;" />
</div>
<input type="submit" class="kt" value="" />
</form>
</div>
</body>
</html>