In this video tutorial, I will show you make the web page with CSS method in Aptana Studio 3 and The professional, open source development tool for the open web. Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. We've got you covered!
Aptana Studio 3 programında bu dersimde CSS yöntemi ile görsel olarak göze hitap eden web tasarımı nasıl yapılır onun ilk kısmını gösterceğim. Bu yöntem hem pratik hemde çok kullanışlıdır. İstediğiniz yerde oynama imkanı vermektedir. Lütfen dikkatle takip edip sizlerde uygulayınız.
CSS etiketleri günümüzde de halen kullanılan kendi tasarımlarını yapmak isteyenlerin başvurduğu en pratik yöntemlerden birisidir. Verdiğim kısa yolları muhakkak kayıt ediniz ki tasarım yapacaksanız büyük kolaylık sağlasın size. Hadi videoya geçelim.
Index.html Kodları
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main Page</title>
<meta charset ="utf-8">
<link rel="stylesheet" href="stil.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
</head>
<body>
<nav>
<a href="#">HOME</a>
<a href="#">SERVICES</a>
<a href="#">WORKS</a>
<a href="#">ABOUT</a>
<a href="#">SUPPORT</a>
<a href="#">CONTACT</a>
</nav>
<div id="gor1" class="gorsel">
<div class="anasayfa anayazi"></div>
<div class="anasayfa anafiltre"></div>
</div>
<div id="say1" class="sayfa"></div>
<div id="gor2" class="gorsel"></div>
<div id="say2" class="sayfa"></div>
<div id="gor3" class="gorsel"></div>
<div id="say3" class="sayfa"></div>
</body>
</html>
Stil.css Kodları
*{
margin: 0px;
padding: 0px;
}
body, html{
height: 100%;
}
nav{
z-index: 2;
position: absolute;
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
nav a{
color: #fff;
font-family: 'Roboto Slab', serif;
font-size: 20px;
margin-left: 15px;
text-decoration: none;
padding: 12px 12px;
}
nav a:hover{
background-color: #000;
}
.gorsel{
height: 100%;
background-color: lightblue;
background-size: cover;
background-attachment: fixed;
}
.sayfa{
height: 50%;
background-color: lightgreen;
}
#gor1{
background-image: url("1.jpg");
}
#gor2{
background-image: url("2.jpeg");
}
#gor3{
background-image: url("3.jpg");
}
.anasayfa{
position: absolute;
float: left;
}
.anayazi{
height: 200px;
width: 100px;
background-color: red;
z-index: 1;
}
.anafiltre{
height: 100%;
width: 100%;
background-color: #000;
z-index: 0;
opacity: 0.42;
}
Bir sonraki aşamada görüşmek üzere…
Githup link: Aptana Studio 3
İndirme Link Sitesi: Aptana Studio 3
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for return
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit