دو قسمت کردن صفحه به دو لایه بالا و پایین در HTML



توجه : در صورت بروز مشکل یا کار نکردن لینک دانلود اطلاع دهید تا اصلاح شود.

کاربران عزیز جهت حمایت از سایت مطالب را با دوستان خود به اشتراک بگذارید

با درخواست فایل مورد نیاز خود به غنی کردن آرشیو سایت کمک کنید

در HTML شما می توانید صفحه خود را به دو لایه پالا و پایین بشکل زیر تقسیم کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>لایه بالا و پایین</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 20px; }
	   #top { background: #eee; }
	   #bottom { background: #ddd; }
	
	</style>
	
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.2");
    </script><script type="text/javascript">
    	$(function(){
    	
    	   var $window = $(window);
    	   winHeight = $window.height();
    	   
    	   $("#top").height(winHeight/2);
    	   $("#bottom").height(winHeight/2);
    	   
    	   $(window).resize(function(){

    		 winHeight = $window.height();
    		 
    		 $("#top").height(winHeight/2);
    	     $("#bottom").height(winHeight/2);
    		 
           });
    	});
    </script>
</head>

<body>

    <div id="top">
        <p>لایه بالا</p>
        <p>ساخت نرم افزار ویندوز،وب سایت،اپلیکیشن اندروید</p>
    </div>

    <div id="bottom">
        <p>لایه پایین</p>
        <p>ساخت نرم افزار ویندوز،وب سایت،اپلیکیشن اندروید</p>
    </div>

</body>

</html>



سلام ، من مصطفی هستم ، فارغ التحصیل رشته مهندسی کامپیوتر-نرم افزار علاقه زیادی به برنامه نویسی و بخصوص PHP دارم ، بنده این وب سایت را به منظور دسترسی هموطنان عزیز به محتواهای مفید در موضوعات موجود در سایت راه اندازی کردم ، از دوستان میخواهم با نظرات خود دلگرمی برای بنده باشند و اگر فایلی نیاز دارند ، حتماً از طریق فرم درخواست ، درخواست خود را ارسال کنند.

ارسال نظر

*

Next Articleافزودن راهنمای ابزار (Tooltips) برای المان Acronyms در HTML