Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.



 
AcasaAcasa  GalerieGalerie  CăutareCăutare  Ultimele imaginiUltimele imagini  ÎnregistrareÎnregistrare  ConectareConectare  

Distribuiţi | 
 

 A Different Top Navigation

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Administrator

Virus
Nume: Virus

A Different Top Navigation _
MesajSubiect: A Different Top Navigation   A Different Top Navigation I_icon_minitimeLun Iul 12, 2010 4:25 am

Există deja foarte multe tutoriale de pe acest site pentru învăţarea de bază de HTML & CSS, asa ca pentru acest tutorial va voi premisa ca stii deja de bază. Voi sări intra în detaliu, pentru această parte:
Pentru conţinutul paginii de reale, vom folosi doar o imagine a conţinutului pentru a ocoli pierdere de calitate, care merge împreună cu un text de web. Acest lucru face ca HTML destul de simplu:

Cod:
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>A Different Top Nav</title> 
</head> 
<body> 
<div id="sub-link-bar"> </div> 
<!-- End sub-link-bar --> 
<div id="wrap"> 
  <div id="main-handle"> 
    <div class="roundfg"> 
      <ul id="main-nav"> 
        <li><a class="main-link" href="http://net.tutsplus.com/">Home</a> 
            <ul class="sub-links"> 
                <li><a class="main-link" href="http://net.tutsplus.com/">Home</a></li> 
            </ul> 
        </li> 
        <li><a class="main-link" href="http://net.tutsplus.com/category/tutorials/">Tutorials</a> 
          <ul class="sub-links"> 
            <li><a href="http://net.tutsplus.com/category/tutorials/design-tutorials/" title="View all posts filed under Design">Design</a> </li> 
            <li><a href="http://net.tutsplus.com/category/tutorials/html-css-techniques/" title="View all posts filed under HTML & CSS">HTML & CSS</a> </li> 
            <li><a href="http://net.tutsplus.com/category/tutorials/other/" title="View all posts filed under Other">Other</a> </li> 
            <li><a href="http://net.tutsplus.com/category/tutorials/php/" title="View all posts filed under PHP">PHP</a> </li> 
            <li><a href="http://net.tutsplus.com/category/tutorials/ruby/" title="View all posts filed under Ruby">Ruby</a> </li> 
            <li><a href="http://net.tutsplus.com/category/tutorials/site-builds/" title="View all posts filed under Site Builds">Site Builds</a> </li> 
            <li><a href="http://net.tutsplus.com/category/tutorials/tools-and-tips/" title="View all posts filed under Tools & Tips">Tools & Tips</a> </li> 
            <li class="cat-item cat-item-35"><a href="http://net.tutsplus.com/category/tutorials/wordpress/" title="View all posts filed under WordPress">WordPress</a> </li> 
          </ul> 
        </li> 
        <li><a class="main-link" href="http://net.tutsplus.com/category/articles/">Articles</a> 
          <ul class="sub-links"> 
            <li ><a href="http://net.tutsplus.com/category/articles/general/" title="View all posts filed under General">General</a> </li> 
            <li><a href="http://net.tutsplus.com/category/articles/interviews/" title="View all posts filed under Interviews">Interviews</a> </li> 
            <li><a href="http://net.tutsplus.com/category/articles/news/" title="View all posts filed under News">News</a> </li> 
            <li><a href="http://net.tutsplus.com/category/articles/web-roundups/" title="View all posts filed under Web Roundups">Web Roundups</a> </li> 
          </ul> 
        </li> 
        <li><a class="main-link" href="http://net.tutsplus.com/category/freebies/">Freebies</a> 
          <ul class="sub-links"> 
            <li><a href="http://net.tutsplus.com/category/freebies/books/" title="View all posts filed under Books">Books</a> </li> 
            <li><a href="http://net.tutsplus.com/category/freebies/icons-freebies/" title="View all posts filed under Icons">Icons</a> </li> 
            <li><a href="http://net.tutsplus.com/category/freebies/lightboxes/" title="View all posts filed under Lightboxes">Lightboxes</a> </li> 
            <li><a href="http://net.tutsplus.com/category/freebies/others/" title="View all posts filed under Others">Others</a> </li> 
            <li><a href="http://net.tutsplus.com/category/freebies/plugins/" title="View all posts filed under Plugins">Plugins</a> </li> 
            <li><a href="http://net.tutsplus.com/category/freebies/themes/" title="View all posts filed under Themes">Themes</a> </li> 
            <li><a href="http://net.tutsplus.com/category/freebies/tooltips/" title="View all posts filed under Tooltips">Tooltips</a> </li> 
          </ul> 
        </li> 
        <li><a class="main-link" href="http://net.tutsplus.com/category/videos/">Videos</a> 
            <ul class="sub-links"> 
            <li><a href="http://net.tutsplus.com/category/videos/screencasts/" title="Screencasts">Screencasts</a> </li> 
            </ul> 
        </li> 
        <li><a class="main-link" href="http://net.tutsplus.com/about">About</a> 
            <ul class="sub-links"> 
                <li><a href="http://net.tutsplus.com/about/" title="About">About</a></li> 
                <li><a href="http://net.tutsplus.com/about/join-plus/" title="Join Plus">Join Plus</a></li> 
                <li><a href="http://net.tutsplus.com/about/rss-feeds/" title="RSS Feeds">RSS Feeds</a></li> 
                <li><a href="http://net.tutsplus.com/about/submissions/" title="Submit a Freebie">Submit a Freebie</a></li> 
                <li><a href="http://net.tutsplus.com/about/terms/" title="Terms">Terms</a></li> 
                <li><a href="http://net.tutsplus.com/about/write-a-tutorial/" title="Write a Tutorial">Write a Tutorial</a></li> 
            </ul> 
        </li> 
        <li><a class="close" title="Click to Collapse" href="#">X</a></li> 
      </ul> 
    </div> 
    <!-- End roundfg --> 
    <b class="round"> <b class="round5"></b> <b class="round4"></b> <b class="round3"></b> <b class="round2"><b></b></b> <b class="round1"><b></b></b></b> </div> 
  <!-- End main-handle--> 
 </div> 
<!-- End wrap --> 
</body> 
</html>

CSS este deja prea simplu . Deoarece acest tutorial nu se concentreze pe HTML sau CSS, dacă aveţi o întrebare specifică despre asta, puteţi să-mi picătură o linie în comentariile de mai jos.

Cod:
html, body { 
    background: #2d2620; 
    text-align: center; 
    margin: 0px; 
    height: 100%; 
    width: 100%; 

#wrap { 
    margin-left: auto; 
    margin-right: auto; 
    width: 900px; 
    position: relative; 
    background: url(body.png) center no-repeat; 
    min-height: 600px; 

#body-image { 
    margin-top: 60px; 

#main-nav { 
    margin: 0px 0px 0px 2px; 
    text-align: left; 
    min-height: 25px; 
    padding-top: 10px; 
    padding-left: 0px; 

#main-handle { 
    width: 605px; 
    float: rightright; 
    margin-top: -1px; 

#main-nav li { 
    display: inline; 
    list-style: none; 

#main-nav li a { 
    margin-right: 5px; 
    font-size: 15px; 
    text-decoration: none; 
    color: #f2f2f2; 
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    padding: 10px; 
    outline: 0; 
    position: relative; 
    top: -2px; 

#main-nav li a:hover, #main-nav li a.active { 
    background: #514539; 

#sub-link-bar { 
    background: #514539; 
    min-height: 10px; 
    border-bottom: #645546 1px solid; 

.sub-links { 
    display: none; 
    position: absolute; 
    width: 100%; 
    top: -30px; 
    text-align: left; 
    left: 0px; 

#main-nav li .sub-links li a:hover{ 
    background: #2d2620; 

#main-nav li a.close{ 
    display: none; 
    position: absolute; 

#main-nav li a.close:hover{ 
    background: #900; 
}

Colturi rotunjite
Pentru acest exemplu, am dori, de asemenea, să facă colţurile din partea inferioară rotunjite. Există multe soluţii diferite pentru acest Dilema, inclusiv folosind imagini, Javascript, CSS ususally sau o combinaţie a celor menţionate anterior. Pentru acest exemplu, aş dori pentru a atinge colţuri doar folosind CSS. Deşi oferă CSS3 ne o soluţie uşor, nu este încă browserul cruce compatibile. Deci, pentru acest exemplu, vom utiliza un serviciu online numit Spiffy Corners. Spiffy Coltari generează tot codul pentru noi. Este destul de mişto. Am intrare raza colţuri, numele clasei dorit, şi în fundal, şi informaţiile generate de culoare-l face restul.

Cod:
<style type="text/css"> 
.round{display:block} 
.round *{ 
  display:block; 
  height:1px; 
  overflow:hidden; 
  font-size:.01em; 
  background:#645546} 
.round1{ 
  margin-left:3px; 
  margin-right:3px; 
  padding-left:1px; 
  padding-right:1px; 
  border-left:1px solid #443a30; 
  border-right:1px solid #443a30; 
  background:#56493c} 
.round2{ 
  margin-left:1px; 
  margin-right:1px; 
  padding-right:1px; 
  padding-left:1px; 
  border-left:1px solid #322a23; 
  border-right:1px solid #322a23; 
  background:#594c3e} 
.round3{ 
  margin-left:1px; 
  margin-right:1px; 
  border-left:1px solid #594c3e; 
  border-right:1px solid #594c3e;} 
.round4{ 
  border-left:1px solid #443a30; 
  border-right:1px solid #443a30} 
.round5{ 
  border-left:1px solid #56493c; 
  border-right:1px solid #56493c} 
.roundfg{ 
  background:#645546} 
</style> 
Get the Code: HTML 
<div> 
  <b class="round"> 
  <b class="round1"><b></b></b> 
  <b class="round2"><b></b></b> 
  <b class="round3"></b> 
  <b class="round4"></b> 
  <b class="round5"></b></b> 
 
  <div class="roundfg"> 
    <!-- content goes here --> 
  </div> 
 
  <b class="round"> 
  <b class="round5"></b> 
  <b class="round4"></b> 
  <b class="round3"></b> 
  <b class="round2"><b></b></b> 
  <b class="round1"><b></b></b></b> 
</div>


Ultima editare efectuata de catre Virus in Vin Iul 16, 2010 3:51 am, editata de 1 ori
Administrator

Music.
Nume: Music.

A Different Top Navigation _
MesajSubiect: Re: A Different Top Navigation   A Different Top Navigation I_icon_minitimeLun Iul 12, 2010 4:13 pm

Foarte folositor Smile
 

A Different Top Navigation

Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Sectiune de suport :: Tutoriale forumuri-
Forumgratuit.ro | ©phpBB | Forum gratuit de suport | Semnaleaza un abuz | Discuții recente