制作淘宝界面的简易框架
生活随笔
收集整理的這篇文章主要介紹了
制作淘宝界面的简易框架
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
(練習(xí))淘寶頁面的基本框架
根據(jù)浮動(dòng),定位知識(shí),做一個(gè)小練習(xí),制作一個(gè)簡易的淘寶頁面框架.
其代碼如下
<!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>運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的制作淘宝界面的简易框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML之淘宝界面案例
- 下一篇： 2022年宝妈想做电商，抖音，拼多多，淘