घर लेआउट (HTML / सीएसएस) गोल कोनों के साथ एक छवि बनाना
गोल कोनों के साथ एक छवि बनाना

उदाहरण के एक नंबर - एक गोल, छवि प्रारूप gif के रूप में उपयोग.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.ppp0{ position:relative;}
.ppp1{ background: url(1.gif) no-repeat  ; position:absolute; top:0px; display:block; width:100%; height:100%; }
.ppp2{ background:url(2.gif) no-repeat right top; position:absolute; top:0px; display:block; width:100%; height:100%;   left:0px;}
.ppp3{ background:url(3.gif) no-repeat left bottom; position:absolute; top:0px; display:block; width:100%; height:100%;  left:0px;}
.ppp4{ background:url(4.gif) no-repeat right bottom; position:absolute; top:0px; display:block; width:100%; height:100%;  left:0px;}
</style>
</head>
<body>
<b>Было</b>
  <div style="background: url('/k1.jpg') no-repeat; display:block; width:425px; height:310px;" class="ppp0"></div>
<b>Стало</b>
     <div style="background: url('/k1.jpg') no-repeat; display:block; width:425px; height:310px;" class="ppp0">
     <div class="ppp1"></div><div class="ppp2"></div><div class="ppp3"></div><div class="ppp4"></div>
     </div>      
</body>
</html>

यहाँ.

उदाहरण 2 नंबर - एक गोल, छवि प्रारूप png का उपयोग करें.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript" src="css_browser_selector.js"></script>
<!--[if IE 6]> 
    <script type="text/javascript" src="jquer.js"></script>
    <script type="text/javascript" src="corner.js"></script>
      <script>
      $(document).ready(function(){
        $(".ppp0").corner();
      });
      </script>
<![endif]-->
<style>
.ppp0{ position:relative;}
.ppp1{ background: url(1.png) no-repeat; position:absolute; top:0px; display:block; width:100%; height:100%; }
.ppp2{ background:url(2.png) no-repeat right top; position:absolute; top:0px; display:block; width:100%;  height:100%; left:0px;}
.ppp3{ background:url(3.png) no-repeat left bottom; position:absolute; top:0px; display:block; width:100%; height:100%;  left:0px;}
.ppp4{ background:url(4.png) no-repeat right bottom; position:absolute; top:0px; display:block; width:100%; height:100%;  left:0px;}
 
.ie6 .ppp1{ background: none ;}
.ie6 .ppp2{ background: none;}
.ie6 .ppp3{ background: none;}
.ie6 .ppp4{ background: none;}
</style>
</head>
<body>
<b>Было</b>
  <div style="background: url('/k1.jpg') no-repeat; display:block; width:425px; height:310px;" class="ppp0"></div>
<b>Стало</b>
     <div style="background: url('/k1.jpg') no-repeat; display:block; width:425px; height:310px;" class="ppp0">
     <div class="ppp1"></div><div class="ppp2"></div><div class="ppp3"></div><div class="ppp4"></div>
     </div>      
</body>
</html>

दृश्य एक उदाहरण के कार्यान्वयन किया जा सकता हैयहाँ.

उदाहरण 3 नंबर - एक पृष्ठभूमि छवि बनाने के लिए. छवि का आकार कोई फर्क नहीं पड़ता.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript" src="scripts/css_browser_selector.js"></script>
</head>
<style>
body{ background:#f2f2f7;}
.catalog{ margin: 20px 0 0 0; width:1000px; margin: 0 auto; display:block}
.c4{ float:left; width:190px; margin: 15px 50px 25px 0;}
.ddd0{ position:relative;}
.ddd1{ width:6px; height:6px; background: url(./images/v1.gif) no-repeat  ; position:absolute; top:0px; display:block;}
.ddd2{ height:11px; background:url(./images/v2.gif) no-repeat right top; position:absolute; top:0px; display:block; width:100%;  left:6px;z-index:21;}
.ddd3{ background:url(./images/v7.gif) no-repeat left bottom; position:absolute; top:8px; display:block; width:100%; height:100%;  left:0px; z-index:22;}
.ddd4{ background:url(./images/v4.gif) no-repeat right bottom; position:absolute; top:8px; display:block; width:100%; height:100%;  left:6px; z-index:22;}
.ddd5{ background:url(./images/v3.gif)  repeat-y right top; position:absolute; top:0px; display:block; width:100%;height:100%; left:6px; z-index:20;}
.ddd6{ background:url(./images/v6.gif) repeat-x right bottom; position:absolute; top:8px; display:block; width:100%; height:100%;  left:6px; z-index:20;}
</style>
<body>  
        <div class="catalog">
        	<div class="c4">                  
                <div style="background: url('/images/c3.jpg') no-repeat; display:block; width:179px; height:235px;" class="ddd0">
                <div class="ddd1"></div><div class="ddd2"></div><div class="ddd3"></div><div class="ddd4"></div><div class="ddd5"></div><div class="ddd6"></div>
                </div>
            </div>
        	<div class="c4"> 
                <div style="background: url('/images/z1.jpg') no-repeat; display:block; width:178px; height:235px;" class="ddd0">
                <div class="ddd1"></div><div class="ddd2"></div><div class="ddd3"></div><div class="ddd4"></div><div class="ddd5"></div><div class="ddd6"></div>
                </div>
            </div>
           <div class="c4">
                <div style="background: url('/images/z2.jpg') no-repeat; display:block; width:179px; height:235px;" class="ddd0">
                <div class="ddd1"></div><div class="ddd2"></div><div class="ddd3"></div><div class="ddd4"></div><div class="ddd5"></div><div class="ddd6"></div>
                </div>
            </div>
        	<div class="c4">
                <div style="background: url('/images/c3.jpg') no-repeat; display:block; width:179px; height:235px;" class="ddd0">
                <div class="ddd1"></div><div class="ddd2"></div><div class="ddd3"></div><div class="ddd4"></div><div class="ddd5"></div><div class="ddd6"></div>
                </div>
            </div>
        </div>
</body>
</html>

दृश्य एक उदाहरण के कार्यान्वयन किया जा सकता हैयहाँ.

उदाहरण 4 नंबर - क्षेत्रों इनपुट के घुमाव पैदा करते हैं.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript" src="scripts/css_browser_selector.js"></script>
</head>
<style>
.lol{ border-top: 1px solid #000 ; border-left:none; width:100%; height:22px; border-bottom: 1px solid #000 ; border-right:none; padding:0px; margin:0px; }
.seach{display:block; padding: 10px 20px 0px 10px ; position:relative; }
.ie .seach{display:block;  position:relative; width:100%; }
 
.cor0{ position:relative; height:22px; width:4px; display:block;}
.ie .cor0{ position:relative; height:23px; width:4px; display:block; padding: 1px 0 0 0;}
 
.cor{ background:url(./images/ppp1.jpg) no-repeat; display:block; height:100%; width:100%; position:absolute; left:0px; top:0px;z-index:1;}
.cor1{ background:url(./images/ppp3.jpg) no-repeat bottom; display:block; height:100%; width:100%; position:absolute; left:0px; top:0px;z-index:1;}
.cor2{ background:url(./images/ppp6.jpg) repeat-y ; display:block; height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:0;}
 
.cod{ background:url(./images/ppp2.jpg) no-repeat; display:block; height:100%; width:100%; position:absolute; left:0px; top:0px;z-index:1;}
.cod1{ background:url(./images/ppp4.jpg) no-repeat bottom; display:block; height:100%; width:100%; position:absolute; left:0px; top:0px;z-index:1;}
.cod2{ background:url(./images/ppp5.jpg) repeat-y ; display:block; height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:0;}
</style>
<body>
<div id="wrap">
    <form>
    <div class="seach">
             <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr valign="top">
                <td width="4"><div class="cor0"><div class="cor"></div><div class="cor1"></div><div class="cor2"></div></div></td>
                <td width="100%"><input type="text" class="lol"></td>
                <td width="4"><div class="cor0"><div class="cod"></div><div class="cod1"></div><div class="cod2"></div></div></td>
              </tr>
            </table>   
    </div>
    <div class="seach">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr valign="top">
                <td width="4"><div class="cor0"><div class="cor"></div><div class="cor1"></div><div class="cor2"></div></div></td>
                <td width="100%"><input type="text" class="lol"></td>
                <td width="4"><div class="cor0"><div class="cod"></div><div class="cod1"></div><div class="cod2"></div></div></td>
              </tr>
            </table>   
   </div>
	</form>
</body>
</html>

दृश्य एक उदाहरण के कार्यान्वयन किया जा सकता हैयहाँ.

अच्छा Ajax पोल

आंकड़े

विज्ञापन
© 2009 ageent.ru.