Contoh dalam artikel ini menerangkan cara melaksanakan teks menatal ke bawah dengan JS. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
@charset "utf-8";
/*
@nama: pangkalan
@Fungsi: Tetapkan semula gaya lalai penyemak imbas
*/
/* Cegah kesan warna latar belakang yang ditentukan pengguna pada halaman web dan tambahkan pengguna untuk menyesuaikan fon */
html{
Warna:#000;latar belakang:#fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Jidar dalaman dan luaran biasanya menyebabkan gaya penyemak imbas yang berbeza muncul dalam kedudukan yang berbeza */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pra,code,form,fieldset,legend,input,textarea,p,blockquote,th,td, jam,butang,arti
cle,side,details,figcaption,figure,footer,header,hgroup,menu,nav,bahagian {
Margin:0; padding:0;
Warna:#333;
}
/* Tetapkan semula teg HTML5, IE perlu menciptaElement(TAG) dalam js */
artikel, ketepikan, butiran, figcaption, angka, pengaki, pengepala, kumpulan h, menu, navigasi, bahagian {
paparan:blok;
}
/* Fail media HTML5 konsisten dengan img */
audio, kanvas, video {
paparan: sebaris-blok;*paparan: sebaris;*zum: 1;
}
/* Sila ambil perhatian bahawa unsur bentuk tidak mewarisi fon induk */
badan, butang, input, pilih, kawasan teks{
fon:12px/1.5 tahoma,arial,\5b8b\4f53;
}
input, pilih, textarea{
saiz fon:100%;
}
/* Keluarkan jidar setiap sel Jadual dan buat sisinya bertindih */
jadual{
border-collapse:collapse;border-spacing:0;
}
/* pepijat IE dibetulkan: ke tidak mewarisi penjajaran teks*/
ke{
text-align:inherit;
}
/* Alih keluar sempadan lalai */
set medan,img{
sempadan:0;
}
/* ie6 7 8(q) pepijat dipaparkan sebagai tingkah laku sebaris */
iframe{
paparan:blok;
}
/* Keluarkan sempadan elemen ini di bawah firefox */
abbr,akronim{
border:0;font-variant:normal;
}
/* Gaya del yang konsisten */
del {
text-decoration:line-through;
}
alamat, kapsyen, petikan, kod, dfn, em, ke, var {
gaya fon:biasa;
berat fon:500;
}
/* Alih keluar pengecam sebelum senarai, li akan mewarisi */
ol,ul {
gaya senarai:tiada;
}
/* Penjajaran adalah faktor terpenting dalam susun atur, jangan biarkan semuanya tertumpu */
kapsyen, ke {
text-align:left;
}
/* Daripada yahoo, tajuk boleh disesuaikan untuk disesuaikan dengan pelbagai aplikasi sistem */
h1,h2,h3,h4,h5,h6 {
saiz fon:100%;
berat fon:500;
}
q:sebelum,q:selepas {
kandungan:'';
}
/* Satukan superskrip dan subskrip */
sub, sup {
saiz fon: 75%; ketinggian garisan: 0;
}
sup {atas: -0.5em;}
sub {bawah: -0.25em;}
Warna: #333;
}
/* Jadikan pautan kelihatan bergaris dalam keadaan tuding */
a:tuding {
text-decoration:underline;
Warna: #c00;
}
ins,a {
text-decoration:none;
}
.fn-clear:selepas {
keterlihatan:tersembunyi;
paparan:blok;
saiz fon:0;
kandungan:" ";
jelas:keduanya;
ketinggian:0;
}
.fn-clear {
zum:1; /* untuk IE6 IE7 */
}
badan .fn-sembunyi {
paparan:tiada;
}
/* 设置内联, 减少浮动带来的bug */
.fn-left,.fn-right {
display:inline;
}
.fn-left {
float:left;
}
.fn-right {
float:right;
}
#club{width:888px;height:190px;margin:40px auto;border:1px solid #dddddd;border-radius:5px 5px 0px 0px;}
#club .modle{width:443px;height:190px;border-right:1px solid #dddddd;float:left;}
#club .modle_right{border-right:none;float:right;}
#club .modle .modle_title{width:443px;height:29px;line-height:29px;font-size:12px;font-weight:bold;background:#f3f3f3;}
#club .modle .modle_title span{padding-left:7px;}
#club .modle .modle_con{width:423px;margin:0 auto;height:160px;overflow:hidden;}
#club .modle .modle_con ul li{border-bottom:1px #DDD dotted;position:relative;}
#club .modle .modle_con .modle_img{width:50px;height:79px;text-align:center;}
#club .modle .modle_con .modle_img img{margin-top:14px;}
#club .modle .modle_con .modle_img i{display:block;width:15px;height:17px;background:url(../image/buy.png)no-repeat;position:absolute;top:10px;left:60px;}
#club .modle .modle_con .modle_text{width:337px;height:60px;overflow:hidden;margin-top:15px;padding-left:8px;}
#club .modle .modle_con .modle_text p a{color:#005ea7;}
#club .modle .modle_con .modle_text div a{color:#999999;}
