آموزش طراحی وب سایت جلسه هشتم – طراحی یک تمپلیت
Post on 15-Jan-2016
48 Views
Preview:
DESCRIPTION
TRANSCRIPT
آموزش طراحی وب سایتجلسه هشتم – طراحی یک تمپلیت
تدریس طراحی وببرای اطالعات بیشتر تماس بگیرید
تاو09125773990شماره تماس:
09371410986 : پست الکترونیک
TargetLearning@gmail.com
Web Design TrainingTemplate Designing
Part 08Author :Babak Tavatav
CSS float PropertyThe float property sets where an image or a text will appear in another element.Note: If there is too little space on a line for the floating element, it will jump
down on the next line, and continue until a line has enough space.Note: Content, background, and borders of inline elements should go in front of
the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.
Possible ValuesValueDescriptionleft : The image or text moves to the left in the parent elementright : The image or text moves to the right in the parent elementNone : (Default) The image or the text will be displayed just where it occurs in the
text
<html><head><style type="text/css">img {float:right;}</style></head>
<body><p>In the paragraph below, we have added an image
with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p><img src="logocss.gif" width="95" height="84" />This is some text. This is some text. This is some text.This is some text. This is some text. This is some text...</p></body></html>
.thumbnail {float:left;width:110px;height:90px;margin:5px;}
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"><img class="thumbnail" src="klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
CSS Clear PropertyImage and text elements that appear in another element are calledfloating elements.The clear property sets the sides of an element where other floatingelements are not allowed.
ValueDescription• Left : No floating elements allowed on the left side• Right: No floating elements allowed on the right side• Both: No floating elements allowed on either the left or the right
side• None : Default. Allows floating elements on both sides
.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> <title></title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div> <div id="wrapper"> <div id="header"> <div id="Header-Menu">آمدید ثبت - <"#"=a href> ! خوش سایت به ورود;a>  />نامکاال سبد ها ;nbsp; | &درباره سواالت ;nbsp; | &آگهیما ;nbsp; | &متداول با ما ;nbsp; | &همکاری با تماس
<br /> </div> <div id="Header-Logo"></div> <%-- <div id="Header-Welcome" > آمدید ثبت - <"#"=a href> ! خوش سایت به ورود<%--<a></div/>نام
</div>
<div id="main"> <div id="navi"> <div id="navi-left"></div> <div id="navi-center"><div id="navi-right"></div></div> </div> <div id="row03"> <div id="slideshow"> </div> <div id="mainmenu">
<div id="menu-header"></div> <div id="menu-content"></div>
</div>
<div id="row04"> <div id="row04-left" > <div id="t1"></div> <div id="t2"></div> <div id="t3"></div> </div> <div id="row04-right"> <div id="adv01"></div> <div id="adv02"></div> <div id="adv03"></div> </div> </div> </div> </div> </div>
<div id="clearer"></div> </div> <div id="footer"> سبد به سایت این حقوق تمامی
است مربوط <div/> کاال</div> </div></body></html>
.css
body{
margin-right: 3%;margin-left: 3%;
}
#wrapper {
width:900px; margin:0 auto;}
#Header-Logo{
width: 275px;
float: right;padding: 10px;background-image: url( Images/Logo.jpg );height: 70px;background-repeat: no-repeat;
}
* { margin:0; padding:0; border:0;}
#header{
background-color: #eee;background-image: url(image/bg_menu.jpg);height: 80px;padding-bottom: 10px;padding-left: 10px;background-repeat: no-repeat;
}
#Header-Menu{
width: 580px;float: left;padding: 0px 0px 0px 0px;font-family:tahoma; font-size:11px;
}
#main{
background-repeat: repeat-y;background-color: #FFFFFF;width: 887px;
}
#navi-left{
width: 194px;float: left;
color: #fff;background-image: url( 'Images/bar_sabad.jpg' );background-repeat: no-repeat;height: 60px;
}
#navi-center{
margin-left: 194px;margin-right:572px;
background-image: url( 'Images/bar_supprt.jpg' );background-repeat: no-repeat;width: 698px;height: 60px;
}
#navi-right{
width: 580px;height: 60px;float: right;background-image: url( 'Images/bar_bg.jpg' )
}
/*----------Menu & Slideshow --------------*/ #row03{
clear: both;padding-top: 10px;width: 887px;
}
#slideshow{
width:670px; float: left;background-image: url( 'Images/Store_Slice_19.jpg' );
color:#fff; height: 271px; }
#mainmenu{
width: 200px;margin-left:670px;
}
#menu-header{
background-image: url( 'Images/menu_top.jpg' );
background-repeat: no-repeat;width: 215px;height: 37px;
}
#menu-content{
background-image: url( 'Images/menu_bg.jpg' );
height: 234px;width: 215px;
}
/*----------Row 04 --------------*/ #row04"{
clear: both;width: 847px;}
#row04-left{ width:240px; float: left;
}
#t1{
background-image: url( 'Images/tabliq1.jpg' );
width: 240px;height: 152px;background-repeat: no-repeat;
}
#t2{
background-image: url( 'Images/tabliq2.jpg' );
width: 240px;height: 153px;background-repeat: no-repeat;
}
#t3{
background-image: url( 'Images/tabliq3.jpg' );width: 240px;height: 201px;background-repeat: no-repeat;
}#row04-right{
width: 660px;margin-left:240px;}
#adv01{
background-image: url( 'Images/Store_Slice_38.jpg' );width: 650px;height: 194px;
}#adv02{
background-image: url( 'Images/Store_Slice_38.jpg' );width: 650px;height: 194px;
}
#adv03{
background-image: url( 'Images/Store_Slice_38.jpg' );width: 650px;height: 194px;
}
# clearer { clear:both;}
#footer{
padding: 10px;font-size: 11px;text-align: center;
}
The End
top related