Gunakan kedudukan relatif dan offset untuk mencipta antara muka input yang cantik

Menggunakan kedudukan relatif dan atribut mengimbangi, anda boleh melaksanakan antara muka yang memerlukan gambar sebelum ini, dan ia juga sangat mudah untuk dilaksanakan. Contohnya, apabila pengguna dikehendaki memasukkan maklumat tertentu, kami sering menggunakan struktur bar tajuk - kandungan - butang OK Berikut ialah antara muka input yang dibuat menggunakan kedudukan relatif dan mengimbangi gaya CSS. Ciri-ciri utama ialah:

Imej bar tajuk mempunyai ofset menaik. Gunakan gaya: top:-10px;position:relative; untuk memisahkan imej daripada bekas dan letakkannya di luar bekas (dalam contoh ini, bekas imej ialah div dengan class="main"). Tetapi satu perkara yang perlu diambil perhatian ialah walaupun kedudukan imej berada di luar bekas, ia masih menempati ruang tertentu dalam bekas Dalam contoh ini, tidak kira bagaimana atribut ketinggian .pemilih utama ditetapkan, ketinggian hijau jalur tidak akan kurang daripada 20px (ketinggian imej).
Saya juga menggunakan atribut offset atas, bawah, kiri dan kanan untuk teks dalam bar tajuk Pada mulanya, saya hanya mahu menggunakan atribut vertical-align:middle untuk memusatkan teks secara menegak gagal. Teks sentiasa sejajar dengan baris bawah , tetapi offset telah digunakan semula.
Jalur hijau menggunakan penapis CSS untuk menghasilkan kesan kecerunan, tetapi malangnya dikatakan hanya IE yang menyokongnya:-(
Butang "OK" pada penghujungnya juga menggunakan teknologi kedudukan relatif dan mengimbangi.

a:pautan,a:aktif,a:dilawati{}{
warna: #2H4D97;
hiasan teks: tiada;
}
a:tuding {}{
hiasan teks: tiada;
warna: #FF9900;
}
.tajuk{}{
warna:#006600;
paparan:blok;
tinggi:20px;
lebar:65%;
sempadan:tiada;
penapis:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
}
.title rentang{}{
paparan:sebaris;
kedudukan:relatif;
atas:-4px;
}
.img tajuk{}{
kedudukan:relatif;
atas : -10px;
kiri: 5px;
display:inline;
margin:0px 10px 0px 0px;
padding:0px;
height:20px;
}
. utama{}{
jidar:10px 20px 30px 20px;
pelapik: 10px 20px 10px 20px;
lebar:100%;
jidar:#CCCCCC 1px pepejal;
}
.item utama{}{
vertical-align:middle;
margin:5px 0 5px 0;
}
.main .foot{}{
position:relative;
bottom :-10px;
kiri:80%;
paparan:blok;
sempadan:#CCCCCC 1px pepejal;
sempadan-bawah:tiada;
lebar:15%;
teks -align:center;
}
.utama .foot a{}{
background-color:#F3FCE0;
padding:2px;
width:100%;
}
.foot a utama:hover{}{
warna latar belakang:#D8EBFE;
padding:2px;
lebar:100%;
}
kod html:

🎜>

<kelas div= "kaki"><br> <a href="#nogo">OK</a></div><br></div><br>
<br> <br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Sepuluh petua css_CSS/HTML" href="https://m.php.cn/ms/faq/1269.html">Sepuluh petua css_CSS/HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Sepuluh petua css_CSS/HTML" href="https://m.php.cn/ms/faq/1271.html">Sepuluh petua css_CSS/HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/841.html" title="Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS" class="aBlack">Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/961.html" title="Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman" class="aBlack">Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1345.html" title="Analisis penggunaan terperinci marquee" class="aBlack">Analisis penggunaan terperinci marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>

Gunakan kedudukan relatif dan offset untuk mencipta antara muka input yang cantik_CSS/HTML