当前位置：网站首页>9、 Beautify tables, forms, and hyperlinks
9、 Beautify tables, forms, and hyperlinks
2022-06-26 10:54:00 【Wayne830】
1、 Beautification form : A table consisting of one or more rows , Each row consists of one or more cells . Users can place web page elements in any cell , Control the display position of web page elements , To achieve the purpose of carefully typesetting the web page .
① Set border style : When using tables on Web pages , By default, they all have table borders , To help users define data in different cells . stay CSS3 in , Can pass border-collapse Property beautify border style . among ,separate The attribute value is the default value ,collapse Attribute values represent 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: In black ; 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 the border thickness 、 Color :CSS3 Can be like in Excel Set the thickness of the border line of the table as in the table , If you set the thickness of the overall border , Use it directly border-width attribute . If you set a border thickness , Use border-top-width、border-left-width、border-right-width、border-bottom-width Property to set the thickness of the top, left, right, and bottom borders ; Use background-color Set the color of the whole 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 Billion </td>
<td>1.1 Billion </td>
<td>0.9 Billion </td>
<td>1.2 Billion </td>
</tr>
<tr>
<td> Qingdao </td>
<td>1.3 Billion </td>
<td>1.1 Billion </td>
<td>1.2 Billion </td>
<td>1.1 Billion </td>
</tr>
<tr>
<td> Xiamen </td>
<td>1.2 Billion </td>
<td>1.0 Billion </td>
<td>1.1 Billion </td>
<td>0.9 Billion </td>
</tr>
</table>
</body>
</html>
2、 Beautify the form : The main purpose of the form is to integrate the client ( user ) Some information is passed to the service , And processing or storage . Users can use form functions , To make some user registrations 、 Sign in 、 Feedback, etc , And you can also make some questionnaires 、 Online order submission and other interactive content .
① Set the form background : stay CSS3 in , have access to background-color Property to set the form element background color .
input{
background-color:color;}
② Set form button : Use background-color Attributes beautify the outside of the form , You can also use this property to beautify the submit button . The common beautification effect is to background-color Property is set to transparent( transparent color ).
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> The registration screen :</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 , Need to use CSS3 Medium font Related properties , 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 a Book Category :
<select name="" id="">
<option value="" style="background-color: cornflowerblue;"> Science and technology </option>
<option value="" style="background-color: tomato;"> lifestyle </option>
<option value="" style="background-color: aquamarine;"> Economic management </option>
<option value="" style="background-color: burlywood;"> Education </option>
<option value="" style="background-color: chocolate;"> section </option>
</select>
</form>
</body>
</html>
3、 Beautify hyperlinks : stay HTML5 in , Can use CSS3 Set the basic style of hyperlinks with some properties of 、 Prompt information 、 Display pictures and other effects , To increase the aesthetics of the web page .
① Set hyperlink style : Users can use CSS3 To set the basic style of hyperlinks , Include styles before they are accessed 、 Style when mouse pointer hovers , Hyperlink address, visited style, etc .
| pseudo-classes | explain |
|---|---|
| a:lank | Used to define styles where hyperlinks are not accessed |
| a:hover | Used to define the style when the mouse pointer hovers over a hyperlink |
| a:active | Used to define the style when the hyperlink is activated |
| a:visited | Used to define the style that hyperlinks have 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>
② Set the hyperlink background and description : In general , Hyperlinks are displayed in the form of text or pictures , If you need special and beautiful hyperlinks , Need to use background-color Property to set . If you need to add a description to the hyperlink , be a Use in Tags title Property to set the display content of the hyperlink .
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 hyperlinks : When designing a web page , To increase the aesthetics and practicality of hyperlinks , You need to use the border property to set the hyperlink to the button effect .
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>
* Practice after class :
① Make an online math test web page , Present 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;"> One variable quadratic equation test question </h3>
<form action="">
<table>
<tr>
<td colspan="2"> One 、 Completion ( Every empty 2 branch , common 20 branch )</td>
</tr>
<tr>
<td colspan="2">1、 equation (x-1)(2x+1)=2 The general form of transformation 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"> It is a univariate equation </td>
</tr>
<tr>
<td colspan="2">3、 equation 2x<sup>2</sup>+3x=0 The root of is <input type="text"></td>
</tr>
<tr>
<td colspan="2">4、 If the 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 The equation of 2x<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 a quadratic equation of one variable x<sup>2</sup>-3x-1=0 Add two to each 1 As two of the new quadratic equation of one variable , So the new quadratic equation of one variable 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"> Two 、 Solve the following equation ( Each question 3 branch , common 12 branch )</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、 ... and 、 Answer the question ( Each question 10 branch , common 10 branch )</td>
</tr>
<tr>
<td colspan="2"> A store 4 Monthly sales of 50 Ten thousand yuan , The total sales in the second quarter were 180 Ten thousand yuan , if 5、6 The monthly growth rate of the two months is the same , Find the 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 fruit as the theme , Introduce the fruit and match it with the picture , 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="#"> Fruits </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=" Type in your nickname "><br>
<i><b> email </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> link </h3>
<ul class="content">
<li class="lis"><a href="#"> Xiaoming'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's Rutaceae 、 Citrus plants . I like warm and humid climate , Cold resistance is better than that of pomelo 、 Limes 、 Sweet orange is a little stronger . The citrus subfamily of Rutaceae is distributed in the northern latitudes 16°-37° Between . It's tropical 、 Subtropical evergreen fruit trees ( Except citrus aurantium ), For economic cultivation, there are 3 genera : Poncirus 、 Citrus and kumquat . Citrus is mainly cultivated in China and other countries in the world . It includes many kinds , Sweet orange is mainly cultivated in Guangxi 、 Wide skinned citrus 、 Shaddock 、 Citrofortunella microcarpa Wijnands 、 Lemon, etc . There are many good varieties in each species .</p>
<p class="txtpr"> Ancient books 《 Yugong 》 record 4000 Years ago in the Xia Dynasty , Guangxi, China 、 jiangsu 、 hubei 、 jiangxi 、 Citrus produced in Hunan and other places , It has been a tribute . In the Qin and Han Dynasties , The production of Citrus has been further developed .《 Historical records . Su Zuozhuan 》( Written by Sima Qian of the Western Han Dynasty ) record :" Qi will lead to a sea of fish and salt , Chu will lead to the garden of orange and pomelo ", Explain Chu di ( Now Hubei 、 Hunan and other places ) Citrus and Qidi ( Now Shandong and other places ) Pay equal attention to the production of Fish salt ,《 Historical records 》 It also mentions " Shuhan Jiangling thousand tree orange , This man is like a thousand Marquis ". It can be seen that citrus production was already on a considerable scale .</p>
<p class="txtpr"> The citrus fruit is juicy and delicious , The flavor is delicious , Rich in sugar 、 Organic acids 、 Minerals and vitamins , High nutritional value . Citrus or Medicine , Important raw materials for the food industry . The flesh is fresh , Can be processed into cans 、 Fruit juice 、 Jam, etc ; Hesperidin can be extracted from peel , Extract essence and pectin .</p>
<p style="margin-left: 705px;"><a href="#"><i> Learn more about </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's a deciduous tree , Usually trees can be as high as 15 rice , But cultivated trees are generally only tall 3-5 Rice or so . The flowering period of apple trees depends on the climate of each region , But it is generally concentrated in 4-5 month . Apples are cross pollinating plants , Most varieties cannot bear fruit from their own flowers .</p>
<p class="txtpr"> Apples are native to eastern Turkey , The main species come from Begonia ( Hundreds of varieties ). In China, , liaoning 、 hebei 、 shanxi 、 Shandong 、 shaanxi 、 gansu 、 sichuan 、 yunnan 、 Common cultivation in Tibet .</p>
<p class="txtpr"> Apple has the effect of lowering blood fat and blood pressure . Studies in Japan have shown that , Eat two apples a day , After three weeks, the subjects' blood triglyceride levels decreased 21%, The high level of triglycerides is the culprit of vascular sclerosis . In addition, the vitamins in apples 、 Fructose 、 Magnesium can also reduce their content ; Excessive sodium is an important factor in high blood pressure and stroke . Apples contain plenty of potassium , It can be combined with sodium in the body and discharged out of the body , So it lowers blood pressure .</p>
<p style="margin-left: 705px;"><a href="#"><i> Learn more about </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: In black ;
}
边栏推荐
猜你喜欢
Write data to local file
MySQL第八次作业
MySQL第十二次作业-存储过程的应用
Based on Zeng Shen's explanation, the line segment tree is studied again one
代码规范 ＆ 详细解释 husky、prettier、eslint、lint-staged 的作用和使用
Query online users and forced withdrawal users based on oauth2
Nuxt. JS - learning notes
02-Redis数据结构之链表
ISO 26262之——2功能安全概念
Linux下安装Mysql【详细】
随机推荐
MySQL seventh job - update data
Huawei secoclient reports an error "accept return code timeout" [svn adapter v1.0 exclamation point]
Based on Zeng Shen's explanation, the line segment tree is studied again one
MySQL Chapter 5 Summary
consul微服务治理中心踩坑
哪些PHP开源作品值得关注
JWT certification agreement -- I opened a Yihong hospital
Progressive Web 应用程序PWA是应用程序开发的未来
MySQL 10th job - View
VS或Qt编译链接过程中出现“无法解析的外部符号”的原因：
Installer MySQL sous Linux [détails]
02-Redis数据结构之链表
SwiftUI 开发经验之为离线优先的应用程序设计数据层
mysql性能监控和sql语句
Work report (3)
Concise course of probability theory and statistics in engineering mathematics second edition review outline
Redis (IV) redis association table caching
Server single and two-way adjustable one key mutual trust script!
MySQL backup and restore command
Windows and Linux regularly backup MySQL database