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

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

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

مراحل انجام کار

در قدم اول وارد پنل کاربری ساخت اپلیکیشن  با آدرس http://make.appsaz.ir شوید.

در صفحه باز شده کد زیر را وارد کنید.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
color: white;
}

.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}

.left {
left: 0;
background-color: #4b4b4b;
}

.right {
right: 0;
background-color: orange;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>

<div class="split left">
<div class="centered">
<img src="https://appsaz.ir/wp-content/uploads/2017/02/appsazlogo.png" alt="Avatar woman">
<h2>نیمه اول</h2>
<p>متن نیمه اول!</p><br/>
<p>اپ ساز، مرکز ساخت اپلیکیشن‌های موبایل</p>

</div>
</div>

<div class="split right">
<div class="centered">
<img src="https://appsaz.ir/wp-content/uploads/2017/02/appsazlogo.png" alt="Avatar man">
<h2>نیمه دوم</h2>
<p>متن نیمه دوم!</p>
<p>اپ ساز، برترین وبسایت بخش سایت‌ساز و اپلیکیشن‌ساز</p>

</div>
</div>

</body></html>

خروجی نهایی

اگر این مطلب رو دوست داشتید، می تونید با دوستاتون به اشتراک بگذارید:
مهرناز بهرام‌زاده
مهرناز بهرام‌زاده
عضو تیم اپ ساز و فعال در زمینه ی تولید محتوای وبلاگ و شبکه های اجتماعی، ترجمه، برنامه نویسی و ساخت اپلیکیشن‌های موبایل می باشد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *