9, Beautify tables, forms and hyperlinks

1. Beautify table: a table consists of one or more rows, and each row consists of one or more cells. Users can put web page elements in any cell and control the display position of web page elements to achieve the purpose of careful layout of web pages.
① Set border style: when a table is used in a web page, it has a table border by default to help users define the data in different cells. In CSS3, you can beautify the border style through the border collapse attribute. The separate attribute value is the default value, and the collapse attribute value represents a single border style.

{border-collapse:separate/collapse}

demonstration:

<!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">
    <style>
        .tabelist{
            border: 2px dashed rgb(13, 159, 196);
            font-family: Blackbody;
            border-collapse: collapse;
        }
        th{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <table class="tabelist">
        <caption>2020 Quarter 07-09</caption>
        <tr>
            <th> </th>
            <th>7 month</th>
            <th>8 month</th>
            <th>9 month</th>
        </tr>
        <tr>
            <td>Beijing</td>
            <td>800w</td>
            <td>900w</td>
            <td>600w</td>
        </tr>
        <tr>
            <td>Shanghai</td>
            <td>900w</td>
            <td>800w</td>
            <td>800w</td>
        </tr>
        <tr>
            <td>Guangzhou</td>
            <td>750w</td>
            <td>600w</td>
            <td>600w</td>
        </tr>
        <tr>
            <td>Shenyang</td>
            <td>500w</td>
            <td>600w</td>
            <td>600w</td>
        </tr>
        <tr>
            <td>Harbin</td>
            <td>450w</td>
            <td>500w</td>
            <td>550w</td>
        </tr>
        <tr>
            <td>Chengdu</td>
            <td>750w</td>
            <td>700w</td>
            <td>650w</td>
        </tr>
    </table>
</body>
</html>


② Set border thickness and color: CSS3 can set the border line thickness of the table as in Excel table. If you set the overall border thickness, you can directly use the border width property. To set the thickness of a border, use the border top width, border left width, border right width, and border bottom width attributes to set the thickness of the top, left, and bottom borders; Use background color to set the color of the entire table or part of the cell box.
demonstration:

<!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">
    <style>
        table{
            border: 2px solid orange;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
            border-top-width: 5px;
            border-left-width: 3px;
        }
        th{
            border: 1px solid black;
            background-color: orchid;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <table>
        <caption>2019 Quarter 9-12</caption>
        <tr>
            <th> </th>
            <th>9 month</th>
            <th>10 month</th>
            <th>11 month</th>
            <th>12 month</th>
        </tr>
        <tr>
            <td>Kunming</td>
            <td>1.2 Hundred million</td>
            <td>1.1 Hundred million</td>
            <td>0.9 Hundred million</td>
            <td>1.2 Hundred million</td>
        </tr>
        <tr>
            <td>Qingdao</td>
            <td>1.3 Hundred million</td>
            <td>1.1 Hundred million</td>
            <td>1.2 Hundred million</td>
            <td>1.1 Hundred million</td>
        </tr>
        <tr>
            <td>Xiamen</td>
            <td>1.2 Hundred million</td>
            <td>1.0 Hundred million</td>
            <td>1.1 Hundred million</td>
            <td>0.9 Hundred million</td>
        </tr>
    </table>
</body>
</html>


2. Beautify form: the main purpose of form is to transfer some information of client (user) to service, and process or store it. Through the form function, users can make some user registration, login, feedback and other contents, as well as some interactive contents such as questionnaire and online order submission.
① Set form background: in CSS3, you can use the background color attribute to set the background color of form elements.

input{background-color:color;}

② Set form button: besides beautifying the form with the background color attribute, you can also beautify the submit button with this attribute. A common beautification effect is to set the background color property to transparent.
demonstration:

<!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>
    <h3>Registration interface:</h3>
    <table style="border:1px dashed black">
        <form action="">
            <tr>
                <td style="width: 100px;">user name:</td>
                <td style="width: 300px;"><input type="text" name="" id="" placeholder="1-20 Characters" style="background-color: cornsilk;"></td>
            </tr>
            <tr>
                <td style="width: 100px;">password:</td>
                <td style="width: 300px;"><input type="password" placeholder="6-16 Characters"></td>
            </tr>
            <tr>
                <td style="width: 100px;">Email:</td>
                <td style="width: 300px;"><input type="email" placeholder="Enter a legal email address"></td>
            </tr>
            <tr>
                <td style="width: 100px;">remarks:</td>
                <td style="width: 300px;"><textarea name="" id="" cols="35" rows="5" placeholder="This item is optional" style="background-color: cornflowerblue;"></textarea></td>
            </tr>
            <tr>
                <td style="width: 100px;"><input type="submit" value="Submit" style="background-color: transparent;"></td>
            </tr>
        </form>
    </table>
</body>
</html>


③ Set menu effect: to highlight the menu effect, you need to use the font related properties in CSS3 to set the font display effect of the drop-down menu.
demonstration:

<!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>
    <form>
        Select book category:
        <select name="" id="">
            <option value="" style="background-color: cornflowerblue;">Science and technology</option>
            <option value="" style="background-color: tomato;">Life class</option>
            <option value="" style="background-color: aquamarine;">Economic management</option>
            <option value="" style="background-color: burlywood;">Education</option>
            <option value="" style="background-color: chocolate;">Literature</option>
        </select>
    </form>
</body>
</html>


3. Beautify Hyperlinks: in HTML5, you can use some properties of CSS3 to set the basic style, prompt information, display pictures and other effects of hyperlinks, so as to increase the aesthetics of web pages.
① Set hyperlink style: users can use the pseudo class in CSS3 to set the basic style of hyperlinks, including the style before being accessed, the style when the mouse pointer hovers, the style when the hyperlink address is accessed, etc.

Pseudo classexplain
a:lankStyle used to define a hyperlink that is not accessed
a:hoverDefines the style in which the mouse pointer hovers over a hyperlink
a:activeDefines the style when the hyperlink is activated
a:visitedDefines the style that the hyperlink has been accessed

demonstration:

<!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">
    <style>
        a:link{
            background-color: yellow;
        }
        a:hover{
            text-decoration: none;
            color: violet;
        }
        a:active{
            color: crimson;
            text-decoration: underline;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <a href="#"> this is a hyperlink</a>
</body>
</html>



② Setting hyperlink background and Description: generally, hyperlinks are displayed in the form of text or pictures. If you need special and beautiful hyperlinks, you need to use the background color property to set them. If you need to add descriptions to hyperlinks, you need to use the title property in the a tag to set the display content of hyperlinks.
demonstration:

<!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">
    <style>
        a{
            background-image: url(image.png);
            color: lightskyblue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <a href="#"title =" click here "> this is a hyperlink</a>
</body>
</html>


③ Set button hyperlink: when designing web pages, in order to increase the aesthetics and practicability of hyperlinks, you need to use border properties to set hyperlinks as button effects.
demonstration:

<!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">
    <style>
        a{
            background-color: #aeeeee;
            border-top: 1px solid #cd00cd;
            border-left: 1px solid #cd00cd;
            border-bottom: 1px solid #C2C2C2;
            border-right: 1px solid #C2C2C2;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <a href="#"> this is a hyperlink</a>
</body>
</html>


★ after class exercises:
① Make an online math test web page and show it in the form of online test questions.

<!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">
    <link rel="stylesheet" href="demo.css">
    <title>Document</title>
</head>
<body>
    <h3 style="text-align: center;">Univariate quadratic equation test questions</h3>
    <form action="">
        <table>
            <tr>
                <td colspan="2">1, Fill in the blanks(2 points per empty space,20 points in total)</td>
            </tr>
            <tr>
                <td colspan="2">1,equation(x-1)(2x+1)=2 The general form is<input type="text">,The coefficient of the quadratic term is:<input type="text"></td>
            </tr>
            <tr>
                <td colspan="2">2,About the equation is(m<sup>2</sup>)-1+x<sup>2</sup>+(m-1)x-2=0,So when m<input type="text">,The equation is a quadratic equation of one variable;When m<input type="text">Is a univariate linear equation</td>
            </tr>
            <tr>
                <td colspan="2">3,Equation 2 x<sup>2</sup>+3x=0 The root is<input type="text"></td>
            </tr>
            <tr>
                <td colspan="2">4,Ruo equation kx<sup>2</sup>-6x+1=0 There are two unequal real roots,be k Value range of<input type="text"></td>
            </tr>
            <tr>
                <td colspan="2">5,about x Equation 2 of x<sup>2</sup>+(m<sup>2</sup>-9)+m+1=0,When m=<input type="text">,Two count backwards to each other;When m=<input type="text">,Two numbers are opposite to each other</td>
            </tr>
            <tr>
                <td colspan="2">6,If we take the univariate quadratic equation x<sup>2</sup>-3x-1=0 Add 1 to each of the two as the two of the new univariate quadratic equation,So the new univariate quadratic equation is<input type="text"></td>
            </tr>
            <tr>
                <td colspan="2">7,equation x<sup>2</sup>+2x+a-1=0 There are two negative roots,a Value range<input type="text"></td>
            </tr>
            <tr>
                <td colspan="2">2, Solve the following equation(3 points for each question,12 points in total)</td>
            </tr>
            <tr>
                <td>(1)x<sup>2</sup>-5x-6=0</td>
                <td>(2)8x<sup>2</sup>+2x-3=0</td>
            </tr>
            <tr>
                <td><input type="text"></td><td><input type="text"></td>
            </tr>
            <tr>
                <td>(3)3x<sup>2</sup>-4x-1=0</td>
                <td>(4)4x<sup>2</sup>-8x+1=0</td>
            </tr>
            <tr>
                <td><input type="text"></td><td><input type="text"></td>
            </tr>
            <tr>
                <td colspan="2">3, Answer questions(10 points for each question,10 points in total)</td>
            </tr>
            <tr>
                <td colspan="2">The sales volume of a store in April was 500000 yuan,The total sales in the second quarter was 1.8 million yuan,If the monthly growth rate is the same in May and June,Monthly growth rate?</td>
            </tr>
            <tr>
                <td colspan="2"><input type="text" style="width: 650px;"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" style="margin-left: 190px;"><input type="reset" style="margin-left: 100px;"></td>
            </tr>
        </table>
    </form>
</body>
</html>
table{
    position: absolute;
    left: 450px;
    width: 650px;
}
td{
    border: 1px solid black;
    height: 20px;
}
input{
    width: 100px;
}


② Make a fruit page, make a page with the theme of fruit, introduce the fruit and correspond to its pictures, and beautify the whole layout as much as possible.

<!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">
    <link rel="stylesheet" href="demo.css">
    <title>Docement</title>
</head>
<body>
    <div class="all">
        <img src="fruit.png" alt="" width="300px" height="200px" style="border-right: 1px dashed orange;">
        <h1 class="title"><i>Delicious fruit</i></h1>
        <h3 class="title2"><i>Taste heaven</i></h3>
        <div class="input">
            <h4 style="position: absolute; left: 70px; top: -5px;">Welcome to visit,Please login or register!</h4>
            <form action="" class="frm">
                <i><b>user name:</b></i><br>
                <input type="text" placeholder="enter one user name"><br>
                <i><b>password:</b></i><br>
                <input type="password" placeholder="Input password"><br>
                <input type="reset" style="margin-top: 10px;">
                <button>register</button>
                <input type="submit" style="margin-top: 10px;" value="Sign in">
            </form>
        </div>
        <div class="leftpo">
            <h3>Navigation</h3>
            <ul class="content">
                <li style="margin-top: 20px;"><a href="#"> Home Page</a></li>
                <li class="lis"><a href="#"> Health</a></li>
                <li class="lis"><a href="#"> fruit</a></li>
                <li class="lis"><a href="#"> Community</a></li>
                <li class="lis"><a href="#"> about us</a></li>
            </ul>
            <h3>contact us</h3>
            <form action="" class="lftin">
                <i><b>nickname</b></i><br>
                <input type="text" placeholder="Enter a nickname"><br>
                <i><b>E-mail</b></i><br>
                <input type="email"placeholder="Enter email address"><br>
                <i><b>Leaving a message.</b></i><br>
                <textarea name="" id="" cols="25" rows="5" placeholder="Enter your message or question"></textarea>
            </form>
            <h3>Links</h3>
            <ul class="content">
                <li class="lis"><a href="#"> Xiao Ming's personal blog</a></li>
                <li class="lis"><a href="#"> Xiaohong's personal blog</a></li>
            </ul>
        </div>
        <div class=txtarea>
            <h2 style="margin-left: 30px;"><i>citrus</i></h2>
            <img src="orange.png" alt="" style="float: right; width: 200px; height: 150px; padding-left: 10px; padding-right: 10px;">
            <p class="txtpr">citrus(Citrus reticulata Blanco)It is a plant of Rutaceae and citrus. Like warm and humid climate, cold resistance is slightly stronger than grapefruit, lime and sweet orange. The citrus subfamily of Rutaceae is distributed at 16 n°-37°between. It is a tropical and subtropical evergreen fruit tree(Except trifoliate orange),There are three genera used for economic cultivation:Trifoliate orange, citrus and kumquat. Citrus is mainly cultivated in China and other countries in the world. It includes many kinds. The main cultivated varieties in Guangxi are sweet orange, wide peel citrus, grapefruit, kumquat, lemon and so on. Each species has many excellent varieties.</p>
            <p class="txtpr">The ancient book Yugong records that citrus produced in Guangxi, Jiangsu, Hubei, Jiangxi and Hunan in the Xia Dynasty 4000 years ago has been a tribute. In the Qin and Han Dynasties, the production of citrus was further developed. Historical records.Su zuzhuan(Sima Qian of the Western Han Dynasty)record:"Qi will lead to the sea of fish and salt,Chu will lead to the garden of orange and grapefruit",Explain Chu di(Now Hubei, Hunan and other places)Citrus and Qidi(Today, Shandong and other places)Pay equal attention to fish salt production,<It is also mentioned in the historical records"Shuhan Jiangling Qianshu orange,This man is like a thousand marquis". It can be seen that citrus production had a considerable scale at that time.</p>
            <p class="txtpr">Citrus fruit is juicy, delicious and delicious. It is rich in sugar, organic acids, minerals and vitamins. It has high nutritional value. Citrus is also an important raw material for medicine and food industry. In addition to fresh food, the pulp can be processed into cans, fruit juice, jam, etc; Peel can extract hesperidin, extract essence and pectin.</p>
            <p style="margin-left: 705px;"><a href="#"> < I > learn more < / I ></a></p>
            <h2 style="margin-left: 30px;"><i>Apple</i></h2>
            <img src="apple.png" alt="" style="float: left; width: 200px; height: 150px; padding-left: 10px; padding-right: 10px;">
            <p class="txtpr">Apple(Malus pumila Mill):It is a deciduous tree, usually up to 15 meters high, but the cultivated trees are generally only 3 meters high-5 The flowering period of apple trees is determined based on the local climate, but it is generally concentrated in 4-5 month. Apple is a cross pollinated plant, and most varieties can't bear fruit.</p>
            <p class="txtpr">Apple is native to eastern Turkey, and the main varieties come from Begonia(Hundreds of varieties). In China, it is commonly cultivated in Liaoning, Hebei, Shanxi, Shandong, Shaanxi, Gansu, Sichuan, Yunnan and Tibet.</p>
            <p class="txtpr">Apple can reduce blood lipid and blood pressure. Studies in Japan have shown that after eating two apples a day, subjects' blood triglyceride levels decreased by 21% after three weeks%,The high level of triglyceride is the culprit of vascular sclerosis. In addition, vitamins, fructose and magnesium in apples can also reduce their content; Excessive sodium is an important factor causing hypertension and stroke. Apples contain sufficient potassium, which can be combined with sodium in the body and discharged from the body, so as to reduce blood pressure.</p>
            <p style="margin-left: 705px;"><a href="#"> < I > learn more < / I ></a></p>
        </div>
    </div>
</body>
</html>
.all{
    width: 1100px;
    height: 900px;
    border: 1px dashed orange;
    background-image: url(allbackground.png);
    background-size: 100% 100%;
}
.title{
    color: orangered;
    float: right;
    padding-right: 470px;
    padding-top: 50px;
}
.title2{
    color: orangered;
    position: absolute;
    left: 550px;
    top: 100px;
}
.input{
    width: 305px;
    height: 200px;
    position: absolute;
    left: 800px;
    top: 10px;
}
.frm{
    position: absolute;
    left: 70px;
    top: 50px;
}
.leftpo{
    width: 300px;
    height: 690px;
}
.content{
    list-style-image: url(Right arrow.png);
    margin-left: 30px;
    font-size: 17px;
}
.lis{
    margin-top: 15px;
}
h3{
    margin-top: 40px; 
    margin-left: 20px;
}
.lftin{
    margin-left: 25px;
}
.txtarea{
    position: absolute;
    left: 310px;
    top: 210px;
    border-top: 1px solid orange;
    border-left: 1px dashed orange;
    width: 800px;
    height: 700px;
}
.txtpr{
    text-indent: 10mm;
    font-family: Blackbody;
}

Tags: html5 css

Posted on Sat, 11 Sep 2021 22:41:22 -0400 by ddubs