A div είναι ένα αντικείμενο εντός του Document Object Model ( DOM ) της σελίδας που εμφανίζεται στο παράθυρο του προγράμματος περιήγησης . Έχει ένα μοναδικό αναγνωριστικό ( id ) σειρά . Είναι ένα δοχείο μπλοκ για άλλα αντικείμενα και μπορούν να κρυφές ή φανερές . Μπορεί επίσης να μετακινηθεί σε επιλεγμένη θέση μέσα στην περιοχή προβολής του προγράμματος περιήγησης . Το αντικείμενο div έχει μια σειρά από επιλογείς που σχετίζονται με αναγνωριστικό συμβολοσειράς και οι ιδιότητες αυτών των επιλογείς μπορούν να τροποποιηθούν χρησιμοποιώντας τον κωδικό java - script . Τα πράγματα που θα χρειαστείτε
επεξεργαστή κειμένου .
Πρόγραμμα περιήγησης στο Web .
Η Εμφάνιση Περισσότερες οδηγίες
Η
1 Ανοίξτε ένα νέο έγγραφο στον επεξεργαστή κειμένου . Αποθηκεύστε το αρχείο ως 2
Γράψτε εγγράφου κώδικα της κεφαλής
< DOCTYPE html PUBLIC " " use_id.html . » - . ! //W3C //DTD XHTML 1.0 Strict //EN "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www .w3.org/1999/xhtml " >
Χρήση DIV Με JavaScript < /title> <br> <p> < meta content = " text /html ? charset = utf - 8 " . στυλ κωδικός http -equiv = " Content-Type " /> <br> εικόνων 3 <p> Γράψτε έγγραφο <br> <p> < στυλ type = " text /css " > <br> <p> # myDiv <br> <p> { <br> <p> θέση: απόλυτη? <br> <p> z - index : 0 ? <br> < p> ορατότητα: ορατή? <br> <p> top : 10em ? <br> <p> αριστερά : 10em ? <br> <p> πλάτος: 10em ? <br> <p> ύψος : 5em ? <br> < p> συνόρων : 2px solid # ccc ? <br> <p> - moz - σύνορα - ακτίνα: 0.5em ? <br> <p> - webkit - σύνορα - ακτίνα: 0.5em ? <br> <p> text-align : center ? <br> <p> } <br> <p> # msg <br> <p> { <br> <p> χρώμα : λευκό? <br> <p> φόντο : πράσινο <br> <p> } <br> <p> < /style > <br> Η 4 <p> έγγραφο Γράψτε κώδικα JavaScript . <br> <p> <script type="text/javascript"> <br> < p > var x ? <br> <p> var y ? <br> <p> παύση λειτουργίας ( ms ) <br> <p> { <br> <p> ημερομηνία var = νέα ημερομηνία ()? <br> < p > var CURDATE = null? <br> <p> κάνει { CURDATE = νέα ημερομηνία ( ) ? } <br> <p> ενώ ( CURDATE - ημερομηνία < ms ) ? <br> <p> } <br> < p > moveDiv λειτουργία ( ) { <br> <p> <br> <p> x = η math.floor ( Math.random ( ) * 40 ) ? <br> <p> y = η math.floor ( Math.random ( ) * 30 ) ? <br> <p> αν ( document.all ) { <br> <p> document.getElementById ( " msg " ) InnerText = " Γεια σας το κάνουμε ξανά! "? . . //Όλες οι μηχανές αναζήτησης <br> <p> } else { <br> <p> document.getElementById ( " msg " ) textContent = " Γεια σας το κάνουμε ξανά ! "? . . //Firefox <br> <p> } <br> <p> παύση ( 500 ) ? <br> <p> document.getElementById ( " myDiv " ) style.top = y + " em" ? . . <br> <p> document.getElementById ( " myDiv " ) style.left = x + " em " ? . <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 5 <p> Γράψτε έγγραφο Κωδικός σώμα <br> <p> <body> <br> <p> <div id="myDiv" onmouseover = "moveDiv()"/> <br> <p> <p id="msg"> <br> <p> Me Touch ! <br> </p > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> Η <p> 6 Ανοίξτε το αρχείο στο πρόγραμμα περιήγησης στο Web . Μετακινήστε το δείκτη του ποντικιού πάνω από την περιοχή div , και θα προχωρήσουμε σε μια νέα θέση μέσα στην περιοχή προβολής του προγράμματος περιήγησης και να εμφανίσει ένα νέο μήνυμα . , Καλής <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/90983.html' >Πώς να Απόκρυψη όλων των Open Divs σε JavaScript </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90985.html' >Πώς να Περιστροφή συνδέσεις σε JavaScript </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/javascript-programming/91169.html" target="_blank">Πώς να Μετατροπή αριθμών σε λέξεις σε Javascript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91113.html" target="_blank">Πώς να ενημερώσετε PHP Χρησιμοποιώντας Javascript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91121.html" target="_blank">Πώς να Προσθήκη Ειδών σε ένα σύνθετο πλαίσιο με JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/262494.html" target="_blank">Πώς λειτουργεί ο τελεστής διπλού ερωτηματικού (??) JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90985.html" target="_blank">Πώς να Περιστροφή συνδέσεις σε JavaScript </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/javascript-programming/90781.html" target="_blank">Ένα νέο παράθυρο έχει αποκλειστεί σε JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91268.html" target="_blank">Πώς να κάνει τα Windows Widgets </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91168.html" target="_blank">Πώς να αφαιρέσει μια γραμμή διευθύνσεων του HTML </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91193.html" target="_blank">Πώς να συμπληρώσετε ένα σύνθετο πλαίσιο με JavaScript </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>