Learning html for the first time -- the second stage

If there is any error or better method, please comment and modify, thank you!

This time I mainly learned how to make html table and how to touch CSS style to polish the table.

CSS is called cascading style sheets. It is mainly used to define the display style of HTML content in the browser. CSS provides a style description for HTML markup language, defines the display mode of its elements, and it can be used to modify a small style to update all related page elements. Let's talk about the CSS style I used.

<style type="text/css">
            body{font-family:"microsoft yahei";}
            img{width:516px;height:100px}
            td{background:dodgerblue;}
            div{text-align:left;}
            .ad{
                font-weight:bold;
                width: 299px;
                border-width:1px;
                border-style:solid;
                border-color:gainsboro;
                }
            .bd{
                font-weight:bold;
                width:130px;
                height: 70px;
                border-width:1px;
                border-style:solid;
                border-color:gainsboro;
                }
        </style>

The css style needs to be defined in the < body > label before it can be used. ". ad", "BD" are called class selectors, which are composed of dot "." and selectors (such as ad, bd). There are many specific css styles that control the appearance of html when inside curly braces, among which font weight: bold is used for font bold; "background:" color ";"; width: * * * px, height: * * * px is used for setting the table length and width, while border related styles are used for personalization of border style. Of course, there are too many css styles, and others will not be covered.

Don't say much. Now post my code and running results.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Simple campus page</title>
		<style type="text/css">
			body{font-family:"microsoft yahei";}
			img{width:516px;height:100px}
			td{background:dodgerblue;}
			div{text-align:left;}
			.ad{
				font-weight:bold;
				width: 299px;
				border-width:1px;
				border-style:solid;
				border-color:gainsboro;
				}
			.bd{
				font-weight:bold;
				width:130px;
				height: 70px;
				border-width:1px;
				border-style:solid;
				border-color:gainsboro;
				}
		</style>
	</head>
	<body>
		<img src="41.jpg" alt="Picture not found">
		<br>
		<table class="ta">
			<tbody>
				<tr>
					<td class="ad" style="background:lightgreen;width:100px;height: 50px;">My campus</td>
					<td class="ad" style="background:lightgreen;width:100px;height: 50px;">campus life</td>
					<td class="ad" style="background:lightgreen">My homeland</td>
				</tr>
			</tbody>
		</table>
		<table class="ta">
			<tbody>
				<tr>
					<td class="bd">Computing Center</td>
					<td class="bd" rowspan="4" style="width:375px;height:70px">
						<form method="post" action="index.html">
							<label>User name:</label>&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="text" name="User name">
							<br><br>
							<label>
								<span style="letter-spacing:15px;">Password:</span>
							</label>
							<input type="password" name="Password">
							<br><br>
							<div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="submit" value="Determine" name="submitBtn">
								&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="reset" value="Reset" name="resetBtn">
							</div>
						</form>
					</td>
				</tr>
				<tr>
					<td class="bd">Capital circle College</td>
				</tr>
				<tr>
					<td class="bd">School of information</td>
				</tr>
				<tr>
					<td class="bd">College of motion Science</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

 

 

Posted on Sat, 11 Jan 2020 12:14:32 -0500 by christillis