آموزش html
- پنجشنبه, ۱۶ آبان ۱۳۹۸، ۱۲:۵۶ ق.ظ
در این قسمت از آموزش های آر آر پروگرم شما با آموزش ها متنیhtml آشنا میشوید همانطور که میدانید html یک زبان نشانه گذاری است که برای طراحی صفحات وب از این زبان استفاده میشود پس برای یادگیری طراحی صفحات وب نیاز است که از این زبان برای برناه نویسی استفاده کنید و آموزش html را یاد بگیرید زبان html تشکیل شده از تعدادی تک است که وظیفه شکل دهی به صفحات وب را داراست و در کنار یادگیری css میتونید یک وب سایت زیبا و کارا برای خودتان طراحی کنید پس این را فراموش نکنید که پایه های یادگیری طراحی وب یادگیری html و css است و بدانید که html یک زبان نشانه گذاری متن است البته html با html5 تفاوت هایی دارد که میتوانید با یادگیری این دو کار های متفاوتی در حوزه طراحی وب انجام دهید . . برای یادگیری این زبان میتوایند از آموزش html که در وب سایت آی آر پروگرم موجود است کمک بگیرید.
ساخت تب در html و css
توی این مطلب از سری آموزش های متنی آی آر پرورگرم قراره با هم نحوه ساخت تب ها رو بررسی کنیم و یاد بگیریم که با استفاده از html و css چجوری میتونیم تب بسازیم. تب ها المان های بسیار پر کاربرد و خبی هستند که توی بسیاری از سایت ها مورد استفاده قرار میگیرند. توی این آموزش قراره روش ساخت یک تب افقی رو یاد بگیریم.مشابه تصویر زیر :
مطابق با تصویر بالا در مرحله اول نیاز داریم که کد های html این تب ها رو بنویسیم. کد های html این تب ها به صورت زیر نوشته میشن که با استفاده از تگ های input و label و div قسمت اصلی تب ها رو میسازیم.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML / CSS only tabs with slider animation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class='tabs'>
<input type='radio' id='r1' name='t' checked
><label for='r1'>Tab</label
><div class='content'>content</div
><input type='radio' id='r2' name='t'
><label for='r2'>Tib</label
><div class='content'>Article</div
><input type='radio' id='r3' name='t'
><label for='r3'>Tub</label
><div class='content'>Stuff</div
><div id='slider'></div>
</div>
<!-- "><div"s are required to avoid spaces between display: inline-block elements. https://css-tricks.com/fighting-the-space-between-inline-block-elements/ -->
</body>
</html>
بعد از نوشتن کد های بالا قسمت تب های ما به شکل زیر در میاد :
حالا موقع این رسیده که بیایم و این تب ها رو استایل بدیم و به اون شکلی که میخوایم به قولی خوشکلش کنیم.
برای کلاس های body و tab کد زیر رو در نظر گرفتیم :
body {
background-color: #333;
font-family: Arial;
}
.tabs {
box-shadow: 0px 2px 15px 2px;
position: absolute;
top: 51%;
left: 50%;
height: 50%;
min-width: 450px;
transform: translate(-50%, -50%);
}
برای باقی قسمت ها هم مثل کد های زیر عمل میکنیم :
label, #slider {
display: inline-block;
font-weight: bold;
text-align: center;
background-color: green;
color: #AAA;
width: 150px;
height: auto;
padding: 20px 0px;
}
label:hover {
color: white;
cursor: pointer;
}
.tabs [type=radio] {
display: none;
}
.content {
position: absolute;
top: 50px; right: 0; bottom: 0; left: 0;
background: white;
padding: 20px;
box-shadow: inset 0px 5px 5px -5px;
display: none;
}
#slider {
background-color: transparent;
position: absolute;
border-bottom: 3px solid blue;
margin: 7px 10px;
transition: transform 0.5s;
width: 130px;
}
[type=radio],#r1:checked ~ #slider {
transform: translate(-450px, 0px);
}
[type=radio],#r2:checked ~ #slider {
transform: translate(-300px, 0px);
}
[type=radio],#r3:checked ~ #slider {
transform: translate(-150px, 0px);
}
[type=radio]:checked + label {
color: white;
}
[type=radio]:checked + label + .content {
display: inline-block;
}
سلام
پست خوبی بود،اگه خواستی بیا بهم سر بزن اگر هم مایل بودی بیا تبادل لینک کنیم
موفق باشی