Πολύ μικρό κόλπο: πολυσυλλεκτικότητα των CSS κλάσεων

Δευτέρα, 10 Νοεμβρίου 2008

Οι περισσότεροι εμπειρογνώμονες ήδη τον γνωρίζουν, αλλά που μου ζητήθηκε από το οποίο είναι η διαφορά μεταξύ class id ο κωδικός αναγνώρισης του CSS φύλλα στυλ. Μια επισκόπηση των κάποιες διαφορές και προειδοποιήσεις μπορείτε να το βρείτε σε τάξεις και ID, CSS, ωστόσο, ένα χρήσιμο χαρακτηριστικό που διακρίνει class id είναι η ικανότητα χρήσης πολλαπλών στρωμάτων. Για παράδειγμα, μπορείτε να ορίσετε:

Απλό Κείμενο
CSS:
  1. border :2px solid #000 } . BordoNero (σύνορα: 2PX στερεών # 000)
  2. color :#f00 } . ColoreRosso (χρώμα: # F00)
  3. border :2px solid #f00 } . BordoRosso (σύνορα: 2PX στερεών # F00)

και να γράφουν σε HTML:

Απλό Κείμενο
HTML:
  1. > Bordo nero con caratteri rossi </div> <div κατηγορίας = "bordoNero coloreRosso"> Border μαύρο με κόκκινα γράμματα </ div>
  2. > Bordo rosso con caratteri rossi </div> <div κατηγορίας = "bordoRosso coloreRosso"> Border κόκκινο με κόκκινα γράμματα </ div>

class id στο πλαίσιο αυτό μπορεί να περιέχει διάφορους ορισμούς σε κάθε σειρά!

Σχετικές Post

το το στυλ φύλλο
Καταχωρήθηκε σε CSS, Internet Ανάπτυξης | 2 Comments "

jQuery: γύρος ακμές στις εικόνες για επικάλυψη

Πέμπτη, 30 Οκτωβρίου 2008

Λόγω του διαφορετικού απόδοση μεταξύ διαφορετικό πρόγραμμα περιήγησης, που σίγουρα βλ. Microsoft Internet Explorer στο μυαλό, πρέπει πάντα να ισχύει για λύση artifizi αποτελέσματα που τώρα θα πρέπει να αποτελεί πρότυπο. Η πολυ-συζητήθηκε στρογγυλεμένες γωνίες είναι ένα κλασικό παράδειγμα της "καταστροφής" που παράγεται από την πλήρη αδυναμία να επιτύχουν ένα πρότυπο σοβαρά για σελιδοποίηση HTML / CSS. Υπάρχουν πολλές λύσεις δικτύωσης που σας επιτρέπουν να έχει "συνέπειες" (απαλλαγή των επιπτώσεων dall'HTML παρουσιάσει ως στρογγυλεμένες άκρες, σκιά ενέργειες, σκέψεις, κτλ ...) με έμπλαστρα στα φύλλα του στυλ, ειδικά τεχνάσματα που χρησιμοποιούν div μπολιασμένα , Javascript βιβλιοθήκες, χρήση του canvas κτλ ...
Για καθαρά εκπαιδευτικούς θα εξηγήσει περαιτέρω τεχνικούς (cross-browser), να εφαρμόσει στην στρογγυλεμένες γωνίες των εικόνων:

Demos και πηγές

Συνέχιση ανάγνωσης ... "

Σχετικές Post

Ετικέτες: browser, ηχητικά HTML, Διαδίκτυο, Microsoft, PNG, Safari, Web,
Καταχωρήθηκε σε CSS, Design & Γραφικά, Internet, Javascript, Ανάπτυξης, Tutorials, jQuery | Δεν σχόλιο "

WordPress: βήμα προς βήμα τον τρόπο δημιουργίας ενός login

Παρασκευή 24 Οκτωβρίου, 2008

Σε αυτό το tutorial θα δούμε πώς να δημιουργήσετε μια προσωπική σύνδεσής διαδικασία, χρησιμοποιώντας Αίας λειτουργικότητα μέσω jQuery. Υπάρχουν διάφοροι τρόποι για να προσαρμόσετε τη σύνδεσή του WordPress, για παράδειγμα μέσω της χρήσης των αρπαγών add_action() φίλτρα add_action() add_filter() Χρησιμοποιούμε ένα πιο χαμηλό επίπεδο, παρόλο που εξακολουθούμε να διεπαφές με τον πυρήνα WordPress. Επίσης πρέπει να φροντίζετε για την επικύρωση ενός χρήστη μέσω της διπλής email / password.

Γιατί να δημιουργήσει μια σύνδεση;

  • Σε ορισμένες περιπτώσεις μπορούν να επιστρέψουν uitle έχουν την πιο έλεγχο στην σελίδα σύνδεσης, να προτείνει μια προσαρμοσμένη διάταξη για να μας εγγεγραμμένους χρήστες. Μπορείτε επίσης να εμπλουτίσει την σελίδα με πληροφορίες, ένα λογότυπο από το κλασικό "Κωδικός Ξεχάσατε;"
  • Για να καταστεί δυνατή η πρόσβαση μέσω του ηλεκτρονικού ταχυδρομείου (όπως φαίνεται εδώ Συνθήκης) αντί user_login πρότυπο WordPress
  • Για να είναι σε θέση να εισέλθει σε μια ομάδα login στο sidebar μας Blog
  • Και, τέλος, να έχουμε ένα σκελετό - και μια ιδέα - για ένα καλό Προσθήκη : D

Περιβάλλον

Στο παράδειγμά μας / φροντιστήριο εργασίες για την ρίζα του WordPress μέσα σε φάκελο mylogin Θα δημιουργήσει δύο php αρχεία μέσα σε αυτό το φάκελο: index.php και logon.php Το πρώτο περιέχει τη διασύνδεση της σύνδεσής μας, με όλες τις λειτουργίες Javascript / jQuery το οποίο μπορούμε να σερβίρουμε. Το δεύτερο αρχείο, logon.php θα περιέχει ο κώδικας για την επικύρωση του χρήστη. Στη συνέχεια θα δημιουργήσουμε ένα φάκελο css και μέσα σε αυτό το αρχείο layout.css και ένα φάκελο images Μέσα από το φάκελο εικόνες περιλαμβάνει ένα κλασικό Ajax loader: δημιουργήστε το διαδίκτυο στα AjaxLoad.info. Στο τέλος θα πρέπει να έχετε:

  • mylogin
    • index.php
    • logon.php
    • CSS
      • layout.css
      • εικόνες
        • Αίας-loader.gif

Συνέχιση ανάγνωσης ... "

Σχετικές Post

Google, PHP,
Καταχωρήθηκε σε Ajax, CSS, Internet, Javascript, PHP, Ανάπτυξης, Tutorials, WordPress, jQuery | 9 σχόλια "

WordPress: βελτίωση του καταλόγου των σχολίων

Τετάρτη 22 Οκτωβρίου, 2008

Το τυποποιημένο πρότυπο για WordPress (όπως και άλλοι) συνήθως παρέχουν μια εναλλακτική διάταξη για τη λίστα με τις παρατηρήσεις. Στο πρότυπο πρότυπο για παράδειγμα έχει οριστεί σε μια κλάση CSS alt σύμφωνα με τη λογική:

Απλό Κείμενο
PHP:
  1. / / File comments.php
  2. $oddcomment ; ?>id= "comment-<?php comment_ID() ?>" > <li <? php echo $ oddcomment?;> id = "σχόλιο-<? php comment_ID ()?>>
  3. [...]
  4. / * Αλλάζει κάθε άλλο σχόλιο σε διαφορετική τάξη * /
  5. empty ( $oddcomment ) ) ? 'class="alt" ' : '' ; $ Oddcomment = (κενό ($ oddcomment)); 'κατηγορίας = "alt "':'';

Αυτό προκαλεί την ετικέτα li $oddcomment είναι που μια φορά το κενό ( "" και class="alt" φορά την κλάση class="alt" Η τροπολογία θα μπορούσε να είναι χρήσιμο να εισαγάγει μια πρόσθετη κατηγορία, όταν είναι ο δημιουργός του blog για να δημοσιεύσετε ένα σχόλιο:

εικόνα

Εγώ, για παράδειγμα, θα χρησιμοποιούνται τα παρακάτω κώδικα στο αρχείο comments.php:

Απλό Κείμενο
PHP:
  1. <? Php
  2. $comment -> user_id == 3 ) ? ' Authcomment = $ ($ σχόλιο -> user_id == 3); " ; authcomment':'';
  3. empty ( $classcomment ) ) ? ( ( $authcomment == '' ) ? ' alt' : '' ) : '' ; $ Classcomment = (κενό ($ classcomment)), (($ authcomment =='')? 'alt':''):'';
  4. >
  5. id= "comment-<?php comment_ID() ?>" > <li class = "<?=$ classcomment ?><?=$ authcomment;> "id =" σχόλιο-<? php comment_ID ()?>>

Η σειρά $comment->user_id==3 ID του χρήστη σας. Δεν θα χρησιμοποιήσει ο διαχειριστής για την αντιμετώπιση του blog, αλλά έχω χρήστη ID=3 Κανονικά ID διαχειριστής 1 εάν χρησιμοποιήσετε αυτό χρήστης μπορεί να $comment->user_id==1 Με τον τρόπο αυτό εκτός από την εναλλασσόμενη διάταξη για τα σχόλια που άφησαν οι επισκέπτες, είναι άμεσα αναγνωρίσιμη ανταπόκριση του συγγραφέα του ιστολογίου.

Σχετικές Post

κατηγορία, UL,
Καταχωρήθηκε σε CSS, Internet, PHP, Ανάπτυξης, Tutorials, WordPress | 2 Comments "

WordPress: Τροποποίηση AdminBigWidth για προγραμματιστές

Παρασκευή, 17 Οκτωβρίου, 2008

AdminBigWidth είναι ένα plugin για WordPress σε θέση να ορίζουν το χώρο εργασίας πλήρους οθόνης. Είναι μια πραγματικά απλή πρίζα και ασήμαντο, επειδή ο κώδικας κάνει είναι να αλλάξει το CSS .wrap

Απλό Κείμενο
PHP:
  1. AdminBigWidth λειτουργία () (
  2. ; echo "<style type="text/css">. wrap (max-πλάτος: ΚΑΝΕΝΑ) </ style> '?
  3. )
  4. , 'AdminBigWidth' ) ; add_action ( «admin_head», «AdminBigWidth ')?

Για όσους, όπως εγώ χρήση του WordPress editor σε HTML mode μπορεί να είναι χρήσιμη για να ορίσετε σταθερό χαρακτήρες, όπως η Courier, παρά τις προτεινόμενες προεπιλεγμένη γραμματοσειρά. Με τον τρόπο αυτό, τουλάχιστον για προγραμματιστές, είναι ευκολότερο να ευθυγραμμιστεί πηγαίο κώδικα. Για να το κάνετε αυτό απλά προσθέστε το στυλ του AdminBigWidth, μια νέα προσέγγιση η οποία αντικατοπτρίζεται CSS sull'editoria όταν σε HTML mode. Θα μπορούσατε να γράψετε ένα plugin (δύο γραμμές) για να γίνει αυτό, αλλά είναι καλύτερα να αξιοποιήσει τον κωδικό AdminBigWidth, έτσι ώστε να αποφευχθεί η περαιτέρω επιβάρυνση λόγω all'ennesimo Προσθήκη:

Απλό Κείμενο
PHP:
  1. AdminBigWidth λειτουργία () (
  2. ; echo "<style type="text/css">. wrap (max-πλάτος: ΚΑΝΕΝΑ) # # editorcontainer περιεχόμενο (γραμματοσειρά των μελών της οικογένειας:" Courier New, Courier, monospace) </ style> '?
  3. )
  4. , 'AdminBigWidth' ) ; add_action ( «admin_head», «AdminBigWidth ')?

Σχετικές Post

Ετικέτες: κατηγορία, PHP,
Καταχωρήθηκε σε CSS, Ανάπτυξης, WordPress | 1 σχόλιο »

CSS3: κάποιος έχει δει τον Internet Explorer;

Πέμπτη, 16 Οκτωβρίου 2008

Είμαι κάτοχος δεν ...

Απλό Κείμενο
CSS:
  1. p (
  2. / * * Στρογγυλεμένες γωνίες /
  3. σύνορα-ακτίνα: 9px? / CSS * 3 * /
  4. -o-σύνορα-ακτίνα: 9px? / Opera * * /
  5. -iCab των συνόρων-ακτίνα: 9px? / iCab * * /
  6. -KHTML των συνόρων-ακτίνα: 9px? / Konqueror * * /
  7. -MOZ-σύνορα-ακτίνα: 9px? / * Firefox * /
  8. -webkit-σύνορα-ακτίνα: 9px? / * * Safari /
  9. )

Σχετικές Post

Ετικέτες: Διαδίκτυο,
Καταχωρήθηκε σε CSS, Internet Ανάπτυξης | 3 Σχόλια »

WordPress: Πώς να γράψω μια απάντηση στο σχόλιο που χρησιμοποιούν jQuery

Παρασκευή 3 Οκτωβρίου, 2008

Πρόσφατα Cristiano Fino εξέδωσε Προσθήκη κέρδος για WordPress μπορεί να προσθέσει δύο δεσμών σε κάθε σχόλιο από μια θέση (που ίσως να έχετε εγκαταστήσει ένα παρόμοιο, δεδομένου ότι ο κατάλογος Wordpress.org έχω ένα ζευγάρι παραπλανάται, αλλά ως μια ιταλική λογισμικό θα την εκδήλωση για να τιμήσει τον εξαίρετο έργο που Cristiano). Αυτά τα Link (απάντηση & μετοχές), πληρούν ή / και τα λόγια του συγγραφέα του σχολιασμό από την βαρετή εκτελείτε λειτουργία να εισαγάγετε το χαρακτήρα σε (@) να δείχνει στους οποίους απευθύνεται. Σε αυτό το tutorial θα εξηγήσω - σε μεσοπρόθεσμο-έμπειρους χρήστες - πώς να προσθέσει αυτά τα δύο στοιχεία "σχετικά με το χέρι", χωρίς all'istallazione plugin. Επίσης, εκμεταλλεύονται τις δυνατότητες των jQuery στο κόμμα της Javascript. Η τεχνική αυτή που εμφανίζουν τα ίδια θα χρησιμοποιηθεί για την εισαγωγή αυτής της δυνατότητας σε αυτό το ιστολόγιο.

Σημείωση: Η χρήση ενός plug είναι η καλύτερη λύση για εκείνους που συχνά τείνουν να αλλάξουν WordPress πρότυπο ή, τουλάχιστον, έχει στην αναμονή να το κάνουν. Αυτό το φροντιστήριο θα εμφανίζεται μόνο τον τρόπο εκτέλεσης στόχευση στον κώδικα WordPress και είναι αφιερωμένη στην πιο περίεργη.

Αλλαγή του αρχείου comments.php

Η πρώτη αλλαγή να κάνω είναι να εισέλθει στο σύνδεσμο "Απάντηση" και "μονάδες" σε κάθε σχόλιο. Για να το κάνετε αυτό, επεξεργαστείτε το αρχείο comments.php που βρίσκεται στο φάκελο του theme μας. Αυτό το αρχείο περιέχει όλες τις οδηγίες που σας επιτρέπουν να δείτε τα σχόλια στο τέλος της μια θέση. Το τμήμα που μας ενδιαφέρει (το οποίο μπορεί να διαφέρουν ελαφρώς από το θέμα στο ζήτημα) είναι η δημιουργία του βρόχου διάφορα σχόλια, αναγνωρίσιμες από:

Συνέχιση ανάγνωσης ... "

Σχετικές Post

blog, το PHP, POST, theme,
Καταχωρήθηκε σε CSS, JavaScript, PHP, Ανάπτυξης, Tutorials, WordPress, jQuery | 13 σχόλια »

Δημιουργήστε έναν σωλήνα μέσω διαχωριστή CSS

Τρίτη, 9 Σεπτεμβρίου 2008

Συχνά δείτε μια σειρά από συνδέσμους που διανέμονται οριζόντια διαχωρίζονται από ένα σωλήνα "|", το γραφικό σύμβολο dell'asticella κατακόρυφο. Επιπλέον, εάν έχετε καλή γραφή HTML, θα διαπιστώσετε ότι αυτή η σειρά των δεσμών - φαινομενικά οριζόντια - άλλοι δεν στοιχημάτων, που θα αναφέρει UL ή OL Το αποτέλεσμα είναι ότι, αντί γραπτώς:

Απλό Κείμενο
HTML:
  1. <p>
  2. > Link 1 </a> | <a href = "#2" > Link 2 </a> | <a href = "#n" > Link n </a> <a href = "#1"> Link 1 </ a> | <a href = "#2"> Link 2 </ a> | <a href = n "#n"> Link </ a>
  3. </ P>

Θα ήταν καλύτερο να χρησιμοποιήσετε:

Απλό Κείμενο
HTML:
  2. > Link 1 </a> </li> <li> <a href = "#1"> Link 1 </ a> </ li>
  3. > Link 2 </a> </li> <li> <a href = "#2"> Link 2 </ a> </ li>
  4. > Link n </a> </li> <li> <a href = n "#n"> Link </ a> </ li>
  5. </ Ul>

Συνέχιση ανάγνωσης ... "

Σχετικές Post

UL
Καταχωρήθηκε σε CSS, Design & Γραφικά, Internet, ανάπτυξη | 2 Comments "

Firebug Lite: Firebug για IE, Opera και Safari

Τρίτη, 22 Ιουλίου 2008

Μέσω Firebug Lite μπορείτε να χρησιμοποιήσετε μια απλοποιημένη έκδοση του σημείωμα για την επέκταση του Firefox browser Microsoft Internet Exploer, Opera και το Safari της Apple. Firebug Lite μπορεί να χρησιμοποιηθεί με δύο τρόπους: ως μια κλήση σελιδοδείκτη ή όπως μια βιβλιοθήκη χωρίς σύνδεση

Bookmark mode

Με την προσθήκη αυτή η "ειδική διεύθυνση" Firebug Lite αγαπημένα μας (σύρετε το σύνδεσμο για να Favorites) - Ο κωδικός είναι:

Απλό Κείμενο
HTML:
  1. javascript: var% 20firebug = document.createElement ( «σενάριο»)? firebug.setAttribute ( 'src', 'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js')? έγγραφο. body.appendChild (Firebug)? (λειτουργία () (εάν (window.pi & & window.firebug) (firebug.init ()?) άλλος (setTimeout (arguments.callee );}})(); άκυρη (Firebug)?

Μπορείτε να ενεργοποιήσετε Firebug Lite για κάθε τοποθεσία Web και από οποιοδήποτε browser. Αυτή είναι ίσως η πιο ενδιαφέρουσα, αν και οι λειτουργίες του είναι πολύ περιορισμένη.

Offline

Εναλλακτικά, αν θέλουμε την ανάπτυξη ενός site, μπορείτε να κάνετε λήψη ενός πακέτου Javascript και να το εγκαταστήσει στο web! Με τον τρόπο αυτό μπορούμε να χρησιμοποιήσουμε Firebug Lite, ακόμη και χωρίς σύνδεση με το Ίντερνετ και σε τοπικό επίπεδο.

Firebug Lite είναι ένας τρόπος για να αντισταθμιστεί η έλλειψη αυτής της επέκτασης σε άλλους browsers, όμως, μου φάνηκε πολύ αργή και περιορισμένη, ειδικά σε CSS! Όπως λένε: καλύτερο από το τίποτα δεν ...

Σχετικές Post

Ετικέτες: Safari
Καταχωρήθηκε σε CSS, Internet, Javascript, Ανάπτυξης, Τεχνολογίας | Δεν σχόλιο "

Safari, διαγράψτε το μπλε σε πεδία

Δευτέρα 14 Ιουλίου, 2008

Safari, τον browser της Apple διατίθεται για τα Windows, παράγει ένα μπλε (μπλε) όταν κάνετε κλικ σε ένα πεδίο input Αν σε ορισμένες περιπτώσεις μπορεί να είναι ευχάριστη, ενώ άλλες καθίστανται πραγματικά εξοργιστικό! Για να διαγράψετε μόλις τεθεί σε μας φύλλο στυλ:

Απλό Κείμενο
CSS:
  1. / * Remove ____________________________ μπλε * /
  2. : 0 none } Είσοδος (περιγραφή: ΚΑΝΕΝΑ 0)

Ή, εναλλακτικά, να αποδοθούν άμεσα την ετικέτα όπως input

Απλό Κείμενο
HTML:
  1. ... <εισροών style = "περίγραμμα: 0 ΚΑΝΕΝΑ" ... />

Σχετικές Post

Internet,
Καταχωρήθηκε σε CSS, Internet Ανάπτυξης | Δεν σχόλιο "