在移動(dòng)設(shè)備時(shí)代，越來越多的網(wǎng)頁正在逐步地向移動(dòng)端發(fā)展。而為移動(dòng)端設(shè)計(jì)的div css模板也在不斷出現(xiàn)，以滿足用戶在移動(dòng)端訪問網(wǎng)站時(shí)的需求。下面，我們來介紹一個(gè)基于bootstrap的手機(jī)端div css模板。

/*--------------------------主要內(nèi)容區(qū)---------------------------*/
.content{width: 100%;padding: 10px;}
.content h2{font-size: 18px;font-weight: bold;margin-bottom: 10px;}
.content ul{list-style: none;margin-bottom: 10px;}
.content li{line-height: 1.5;font-size: 14px;margin-bottom: 5px;}
.content img{display: block;margin: 0 auto;width: 100%;}
.content p{text-indent: 2em;line-height: 1.8;margin-bottom: 10px;}
/*---------------------------底部導(dǎo)航---------------------------*/
.tab-bar{background-color: #f2f2f2;height: 50px;}
.tab-bar ul{list-style: none;display: flex;justify-content: space-around;padding: 0;}
.tab-bar li a{display: block;text-align: center;line-height: 50px;}
.tab-bar .active{color: #f60;}
/*------------------------------其他------------------------------*/
.clearfix:before,.clearfix:after{display: table;content: "";line-height: 0;}
.clearfix:after{clear: both;}
.clearfix{zoom: 1;}

該模板的主要樣式針對(duì)了網(wǎng)頁內(nèi)容區(qū)和底部導(dǎo)航欄。在內(nèi)容部分，h2、ul、li、img、p等元素都有對(duì)應(yīng)的樣式，能夠合理展示網(wǎng)頁內(nèi)容。在底部導(dǎo)航欄中，ul、li、a等元素都有相應(yīng)的樣式，使得導(dǎo)航欄能夠在不同設(shè)備上有良好的顯示效果。除此之外，模板中還有用于清除浮動(dòng)的樣式，避免在不同瀏覽器或設(shè)備下出現(xiàn)奇怪的效果。

如果你正在為移動(dòng)端網(wǎng)頁設(shè)計(jì)樣式，不妨試試上述div css模板，也可根據(jù)不同網(wǎng)頁需求進(jìn)行相應(yīng)的修改，達(dá)到更佳展示的效果。