有時候我們需要在HTML5頁面中設置不同的div位置以便讓頁面更有吸引力。在HTML5中,我們可以使用CSS來設置不同的div位置。以下是一些設置div位置的方法:
1.設置div的位置屬性:這個代碼塊使用了CSS網格布局功能。在這個例子中,我們定義了一個3個列的grid(容器),并且使用了box類來布局div。類one占據了所有的三列;類two占據了第二和第三行。
以上是一些設置div位置的基礎技巧,在實際運用中可以根據需求靈活使用,達到最好的視覺效果。
Hello,World!
這會讓div框從頁面的左上方向下偏移100px,并且向右偏移100px。
2.設置div在寬屏和豎屏中的位置:
@media screen and (orientation:landscape){
div{
position:absolute;
left:100px;
top:100px;
}
}
@media screen and (orientation:portrait){
div{
position:absolute;
left:50px;
top:50px;
}
}
這個代碼將根據用戶使用的設備是寬屏還是豎屏而動態地設置div的位置。
3.設置小格子位置來構建布局:This is box one
This is box two
This is box three
This is box four
This is box five
This is box six