网页布局

最新推荐文章于 2023-02-10 10:30:29 发布

twh6666

最新推荐文章于 2023-02-10 10:30:29 发布

阅读量277

点赞数 1

分类专栏： study 文章标签： html

本文链接：https://blog.csdn.net/twh6666/article/details/79803212

版权

study 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

经过这两三个星期的学习，大概掌握了前端网页的基础知识，当然，只是个皮毛。将学到的相关的一些知识组合起来，形成基础的网页布局，下面是效果图。最大的感悟是写代码的时候单独实现某个功能可能挺简单，但是组合在一起就不那么容易了，比如div的嵌套，标签的溢出等等。慢慢来吧，一步一个脚印。只要在学习，你就在前进！

<!DOCTYPE html>
<html>
	<head>
		<style>
			.pg_nav{
				height:100px;
				background-color:#cce6ff;
			}
			.nav_left{
				height:100px;
				width:400px;
				background-color:#b3ffe6;
				font-size:40px;
				line-height:80px;
				text-align:center;
				float:left;
				display:block;
			}
			.nav_right{
				overflow:auto;
				background-color:black;
				list-style-type:none;
				margin:0;
				padding:0;
			}
			li{
				float:right;
				margin:0;
				list-style-type:none;
			}
			li a{
				display:block;
				text-decoration:none;
				font-size:30px;
				text-align:center;
				line-height:60px;
				padding:10px;
			}
			li a:hover{
				background-color:#00bfff;
			}
			 
			.pg_body .pg_menu{
				background-color:#e6ffff;
				top:100px;
				width:400px;
				left:0;
				bottom:0;
				position:absolute;
			}
			.menu_item{
				height:400px;
				width:400px;
			}
			.item .header{
				height:60px;
				background:#99ff99;
				color:blue;
				line-height:60px;
				font-size:30px;
			}
			.content{
				font-size:30px;
			}
			.hide{
				display:none;
			}
			.pg_body .pg_content{
				background-color:#dddddd;
				top:100px;
				left:400px;
				right:0;
				bottom:0;
				position:absolute;
				overflow:auto;
				min-width:580px;
			}

		</style>
	</head>
	<body style="margin:0">
		<div class="pg_nav">
			<!---logo--->
			<div class="nav_left">
				logo
			</div>
			<!---nav--->
			<div>
				<ul calss="nav_right">
					<li><a href="*">导航1</a></li>
					<li><a href="*">导航2</a></li>
					<li><a href="*">导航3</a></li>
					<li><a href="*">导航4</a></li>
					<li><a href="*">导航5</a></li>
			</div>
				</ul>>
		</div>
		
		
		<div class="pg_body">
			<div class="pg_menu">
				<div class="menu_item">
					<div class="item">
		            <div id='i1' class="header" οnclick="ChangeMenu('i1');">菜单1</div>
		            <div class="content">
		                <div>内容1</div>
		                <div>内容1</div>
		                <div>内容1</div>
		            </div>
		        </div>
		        <div class="item">
		            <div id='i2' class="header" οnclick="ChangeMenu('i2');">菜单2</div>
		            <div class="content hide">
		                <div>内容2</div>
		                <div>内容2</div>
		                <div>内容2</div>
		            </div>
		        </div>
		        <div class="item">
		            <div id='i3' class="header" οnclick="ChangeMenu('i3');">菜单3</div>
		            <div class="content hide">
		                <div>内容3</div>
		                <div>内容3</div>
		                <div>内容3</div>
		            </div>
		        </div>
		        <div class="item">
		            <div id='i4' class="header" οnclick="ChangeMenu('i4');">菜单4</div>
		            <div class="content hide">
		                <div>内容4</div>
		                <div>内容4</div>
		                <div>内容4</div>
		            </div>
		        </div>
				</div>
			</div>
			<div class="pg_content">
				<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
				<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
			</div>
		</div>
	
	
    <script>
        function ChangeMenu(nid){
            var current_header = document.getElementById(nid);

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }

            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
    
    
	</body>
</html>