تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت ::: الدرس الثالث :::
كيف تصمم موقع متكامل
تطبيق مشاريع HTML CSS | هذه الدورة هي ورشة عمل لتصميم موقع متكامل معتمدين فيه على ماتعلمناه في الدورات السابقة HTML5 و CSS3
( الكود بعد الفيديو )
(الصور بعد الكود )
( الكود بعد الفيديو )
(الصور بعد الكود )
 |
| تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت ::: الدرس الثالث ::: كيف تصمم موقع متكامل |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DeveWebe Site</title>
<style>
#wrapper
{
height:1080px;
width: 960px;
margin-left:auto;
margin-right:auto;
}
#header
{
height:250px;
width:960px;
}
#nav
{
height:50px;
width:960px;
}
ul
{
list-style-type:none;
margin:0px;
padding:5px 65px 5px 25px;
}
li
{
display:inline;
float:right;
margin:5px;
padding: 5px 25px 5px 25px;
}
.link
{
opacity:0.4;
}
.link:hover
{
opacity:1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="img/header.jpg" height="250" width="960" style="border-radius:25px;" />
</div>
<div id="nav">
<ul>
<li><a href=""><img class="link" src="img/main_button.jpg" height="50" width="80" /></a> </li>
<li><a href=""><img class="link" src="img/sub_button.jpg" height="50" width="80" /></a> </li>
<li><a href="http://www.devewebe.com/"><img class="link" src="img/site_button.jpg" height="50" width="80" /></a> </li>
<li><a href="http://www.youtube.com/user/TheDeveloperGeeks"><img class="link" src="img/tube_button.jpg" height="50" width="80"/></a> </li>
<li><a href="https://www.facebook.com/the.developer.geeks"><img class="link" src="img/face_button.jpg" height="50" width="80" /></a> </li>
<li><a href="https://twitter.com/DeveWebe"><img class="link" src="img/twitter_button.jpg" height="50" width="80"/></a> </li>
</ul>
</div>
<div id="content">
<div id="main">
<h4> هنا النص والصور</h4>
</div>
<div id="side">
<h4> هنا الاخبار والاعلانات </h4>
</div>
</div>
<div id="footer">
<h4> جميع الحقوق محفوظة </h4>
</div>
</div>
</body>
</html>
