摘要：剛開始搭建框架起來還是比較費力的 , 其中需要用到標尺工具, 需要掌握代碼的復用和行內塊級元素的用法, 可以盡量避免使用float帶來的負面影響. 注意樣式的初始化:外邊距和內邊距設為0, 因為可能使用到較多浮動,所以最好提前也設置下清除浮動. 框架做起來后遇到個問題, 縮放頁面時不同瀏覽器可能會有元素錯位現象.后期再慢慢調試.?效果:??html代碼:?&

剛開始搭建框架起來還是比較費力的 , 其中需要用到標尺工具, 需要掌握代碼的復用和行內塊級元素的用法, 可以盡量避免使用float帶來的負面影響. 注意樣式的初始化:外邊距和內邊距設為0, 因為可能使用到較多浮動,所以最好提前也設置下清除浮動. 框架做起來后遇到個問題, 縮放頁面時不同瀏覽器可能會有元素錯位現象.后期再慢慢調試.

效果:

html代碼:html>

Document頭部菜單輪播菜單輪播圖片選購123閃購菜單

分類菜單1

分類菜單2

分類菜單3

css:*{

margin:?0;

padding:?0;

}

li{

list-style:?none;

}

a{

text-decoration:?none;

cursor:?pointer;

color:#ccc;

}

.clear{

clear:?both;

}

.header{

width:?100%;

height:?50px;

background:?rgb(219,?218,?218);

}

.menu{

margin:?0?auto;

width:?1534px;

height:?50px;

background:?rgb(6,?250,?217);

}

.content{

margin:?0?auto;

width:?1534px;

/*?height:?1800px?;?*/

background:??#e6e5e4;

}

.conmenu{

margin:30px?auto;

width:?1534px;

height:?70px;

background:?rgb(250,?180,?180);

}

.lunbobox{

margin-bottom:?20px;

width:?1534px;

height:?575px;

background:?rgb(75,?179,?139);

}

.lunbomenu{

display:?inline-block;

width:?296px;

height:?575px;

background:?rgb(44,?143,?143);

}

.lunbopic{

display:?inline-block;

width:?1232px;

height:?575px;

background:?rgb(223,?38,?213);

}

.conimg{

margin-bottom:?62px;

width:?1534px;

height:?213px;

background:?rgb(202,?123,?238);

}

.xuangou{

display:?inline-block;

width:?295px;

height:?212px;

background:?#fbff08;

}

.xg{

margin-left:?15px;

display:?inline-block;

width:?392px;

height:?212px;

background:?#04e3eb;

}

.shangou{

margin-bottom:?52px;

width:?1534px;

height:?474px;

background:?rgb(168,?214,?3);

}

.shangoummenu{

width:?1534px;

height:?50px;

background:?#ff8000;

}

.sgpic1{

display:?inline-block;

width:?293px;

height:?424px;

background:?rgb(72,?125,?238);

}

.sgpic{

display:?inline-block;

width:?294px;

height:?424px;

background:?rgb(72,?125,?238);

margin-left:?10px;

}

.adpic{

margin-bottom:?52px;

width:?1534px;

height:?150px;

}

.sort{

width:?1532px;

height:?818px;

background:?#04e3eb;

margin-bottom:?50px;

}

.sortmenu{

width:?1534px;

height:?50px;

background:?rgb(121,?163,?21);

}

.colpic{

float:?left;

width:?296px;

height:?768px;

background:?#ff8000;

transition:?0.5s;

}

.colpic:hover{

box-shadow:?0px?10px?30px?grey;

margin-top:?-5px;

transition:?0.5s;

}

.rowpic{

display:?inline-block;

width:?292px;

height:?373px;

background:?#ccc;

margin-left:?12.5px;

margin-bottom:?16px;

}

.footer{

width:?100%;

height:?563px;

background:?rgb(206,?196,?196);

}

.foot{

margin:0?auto;

width:?1534px;

height:?563px;

background:?rgb(144,?231,?152);

}

總結

以上是生活随笔為你收集整理的小米php架构图,小米首页布局框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。