html界面

最新推荐文章于 2024-08-04 16:33:59 发布

qq_42327860

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量226

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_42327860/article/details/124275006

版权

笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

html界面

随窗口改变大小的界面

html界面

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>liyangwei</title>
	<!-- 为搜索引擎定义关键词 -->
	<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
	<meta name="description" content="免费 Web & 编程 教程">
	<meta name="author" content="Runoob">
	<meta http-equiv="refresh" content="30"><!-- 每30秒钟刷新当前页面 -->
	<!-- 链接样式表 -->
	<link rel="stylesheet" type="text/css" href="mystyle.css">
	<style type="text/css">
		html,body{
			background-color:green;
			width:100%;
			height:100%;
			margin:0;
		}
		.header{
			 margin:0;
		}
		.zero{
			background-color:red;
			width:100%;
			height:100%; 
			margin:0;
			padding:0;
			
		
    	}
		.one{
			background-color:#FFA500;
			text-align:center;
			width:100%;
			height:10%;
			margin:0;
			padding:0;
			
		}
		.two{
			background-color:#FFD700;
			min-height: 100px;
			float: left;
			overflow: auto;
			width:20%;
			height:80%;
			margin:0;
		}
		.three{
				background-color:#EEEEEE;
			float:left
			min-height: 100px;
			overflow: auto;
			width:80%;
			height:80%;
			margin:0;
		}
		.four{
			background-color:#FFA500;
			clear:both;
			text-align:center;
			width:100%;
			height:10%;
		}
	</style>
</head>
<body>
	<!-- 网页布局 -->
	<div id="container" class="zero">
		<div id="header" class="one">
			<h1 id="head" class="header">网页布局</h1>
		</div>
		<div id="menu" class="two">
			<b>菜单</b><br>
			HTML<br>
			CSS<br>
			JavaScript
			<nav>
				<a href="/Users/holmes/Desktop/html.html">HTML</a> <br>
				<a href="/css/">CSS</a> <br>
				<a href="/Users/holmes/my.js/">JavaScript</a> <br>
				<a href="/jquery/">jQuery</a><br>
			</nav>
		</div>
		<div id="content" class="three">
			<form>
				First name: <input id="first" type="text" name="firstname"><br>
				Last name: <input type="text" name="lastname">
			</form>
			<form>
				Password : <input type="password" name="pwd">
			</form>
			<form>
				<input type="radio" name="sex" value="male">Male<br>
				<input type="radio" name="sex" value="female">Female
			</form>
			
			<form name="input" action="html_form_action.php" method="get">
				Username: <input type="text" name="user">
			<input type="submit" value="Submit">
			</form>
			<form>
				<button type="button" onclick="myFunction()">输入first name</button>
			</form>	
		</div>
		<div id="footer" class="four">
			版权 © runoob.com<br>
			liyangwei
		</div>
	</div>
	
	<script>
		x=document.getElementById("first") // 找到元素
		function myFunction()
		{
			x.value="liyangwei"
		}
	</script>
</body>
</html>