Mr.J--简单页面制作

作为一个初学html+css的人，自己做一个小的页面是非常有必要的。以一个小的登录页面为例：

<!DOCTYPE html>
<html>
	<link rel="stylesheet" href="css/FirstTest.css" />
	<head>
		<meta charset="UTF-8">
		<title>FirstTest</title>
	</head>
	<body>
		<h1> 506登录系统 </h1>
		<div class="divcss5"></div>
		<div class="divcss6">
		<div class="divcss4">
            <form action="" method="post">
        <tr>
            <td><label for="txtname"style="font-weight:bold;">账号：</label></td>
            <td><input type="text" id="txtname" name="login_username" placeholder="请输入您的用户名！"/></td>
        </tr>
        <br /><br />
        <tr>
            <td><label for="txtpswd" style="font-weight:bold;">密码：</label></td>
            <td><input type="password" id="txtpswd" name="login_pswd" placeholder="请输入您的用户密码！"/>
            <a href="index.html"> 忘记密码</a></td>
        </tr>
        <tr>
            <td colspan=2>
            <br /> <br />
                &ensp;&ensp;<button type="submit" class="submit_button">登录</button>
                &ensp;&ensp;<a href="注册.html";>去注册</a></td>
            </td>
        </tr>
    </table>
            </form>
           </div>
           </div>
		</div> 
	</body> 
</html>

上面是html部分，设置字体样式用CSS 虽然对于设置字体优先级：行内样式>内部样式>外部样式(后两者是就近原则)（CSS 三种引入方式）

	body{
		position: absolute;
		z-index: -1;
		background: url(../img/背景.jpg);
	}
	h1{
		/*设置字体颜色*/
		color: aqua;
		/* 设置字体阴影*/
 		text-shadow:saddlebrown 5px 5px 10px;
 		/* 设置在页面中的位置 */
 		position:relative;
		left:1250px;
		top:180px;	
		/* 设置字体样式 */
		font-family:"Ink Free";
		font-size: 30px;
	}
	
	.divcss4{
		position:absolute;
		z-index: 2;
		right:0px;
		top:20px;	
	}
	.divcss5{
		z-index:1; 
		background:silver;
		opacity: 0.35;
		position: absolute;
		left:1160px;
		top:250px;
		width: 400px;
		height: 220px;} 
	.divcss6{
		z-index: 5;
		position:absolute;
		left:1480px;
		top:230px;
	}
	a{
		font-size:12px;
	}
	button{
		width: 150px;
		height: 27px;
		color: cornflowerblue;
		font-size: 18px;
		
	}
	input{
		width: 250px;
		height:30px;
	}

里面的背景图由自己选择，页面效果：

Mr.J--简单页面制作

猜你喜欢