制作淘宝界面的简易框架
生活随笔
收集整理的這篇文章主要介紹了
制作淘宝界面的简易框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
(練習)淘寶頁面的基本框架
根據浮動,定位知識,做一個小練習,制作一個簡易的淘寶頁面框架.
其代碼如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.tb1{width: 250px;background-color: #6495ED;height: 500px;float: right;}.tb2{width: 250px;background-color: #6495ED;height: 500px;float:left;}#b2{width: 1248px;height:300px;}.tb3{width: 500px;height: 300px;background-color: #FF7F50;position: relative;left: 260px;bottom: 500px;margin: 0;}.tb4{width: 200px;height: 300px;background-color: aquamarine;position: relative;left: 780px;bottom: 800px;margin: 0;}.tb5{width: 230px;height: 180px;background-color: cadetblue;position: relative;left: 260px;bottom: 780px; }.tb6{width: 230px;height: 180px;background-color: #8A2BE2;position: relative;left: 500px;bottom: 960px;}.tb7{width: 230px;height: 180px;background-color: #8A2BE2;position: relative;left: 740px;bottom: 1140px;}</style></head><body><div id="b2"><div class="tb1">右</div><div class="tb2">左</div><div style="clear:both;"></div><div class="tb3">中間左上</div><div class="tb4">中間右上</div><div class="tb5">中間左下</div><div class="tb6">中間下方</div><div class="tb7">中間右下</div></div></div></body> </html>運行結果
總結
以上是生活随笔為你收集整理的制作淘宝界面的简易框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML之淘宝界面案例
- 下一篇： 2022年宝妈想做电商，抖音，拼多多，淘