作業1:搭建網上購物商城結構
阿新 • • 發佈:2019-01-10
作業樣式
html程式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style > .pg-header{ height:104px; width:100%; color:blue; border:1px solid #F00 } .pg-coloumns{ background-color:pink; height:40px; width:100%; border:1px solid #F00 } .pg-coloumns a{ display:inline-block; width:200px; float:left; background-color:green; text-align:center; } .pg-end{ height:2000px; width:100%; border:1px solid #F00 } div img { width:90%;; height:80%;; } </style> </head> <body style="margin: 0" > <div class="pg-header"> <div style="width:1080px;height:30px;line-height:30px; margin:0 auto;"> <div style = "float:left;">收藏本站</div> <div style = "float:right;"> <a href = "http://baidu.com/" style = " margin-left:10px">登入</a> <a href = "http://baidu.com/" style = " margin-left:10px">註冊</a> <a href = "http://baidu.com/" style = " margin-left:10px">收藏</a> </div> </div> <div style ="width:980px;height:70px;margin:0 auto;"> <div style = "float:left;"> <img src="1.jpg" style ="width:80px;height:70px;margin-left:160px" > </div> <div style = "float:left; margin-left:200px;"> <div> <input style = "width:200px;height:30px"> </div> <label> 熱門搜尋:火龍果</label> </div> <div style = "float:right;"> <select name = "city"> <option value = "1">南京</option> <option value = "2">上杭</option> <option value = "3">官莊</option> </select> <select name ="country"> <optgroup label="China"> <option>南京</option> <option>上杭</option> </optgroup> </select> </div> </div> </div> <div class="pg-coloumns"> <div style="width:1080px;height:40px;line-height:40px; margin:0 auto;"> <div style = "height:40px;line-height:40px; float:left;"> <a >全部商品分類</a> <a style = "width:50px;">首頁</a> <a style = "width:100px;">網上超市</a> <a style = "width:100px;">水果超市</a> <a style = "width:100px;">生活娛樂</a> <a style = "width:100px;">研究院</a> </div> <div style = "height:40px;line-height:40px; float:right;"> <a style = "width:50px;">論壇</a> <a style = "width:50px;">研究院</a> </div> </div> </div> <div class="pg-end"> <div style="width:1080px;margin:0 auto;"> <div style = "width:20%;border:1px solid #F00;float:left;"> <div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div> <span style ="border:1px solid #F00;font-size:16px;"> 火龍果 火龍果 火龍果 </span> <div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div> <span style ="border:1px solid #F00;font-size:16px;"> 火龍果 火龍果 火龍果 </span> <div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div> <span style ="border:1px solid #F00;font-size:16px;"> 火龍果 火龍果 火龍果 </span> <div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div> <span style ="border:1px solid #F00;font-size:16px;"> 火龍果 火龍果 火龍果 </span> <div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div> <span style ="border:1px solid #F00;font-size:16px;"> 火龍果 火龍果 火龍果 </span> <div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div> <span style ="border:1px solid #F00;font-size:16px;"> 火龍果 火龍果 火龍果 </span> </div> <div style = "width:70%;float:right;"> <div style = "height:200px;border:1px solid #F00"> <div style ="margin:10px;border-bottom:5px solid #F00;">福特 > 蒙迪歐 > 2.0T</div> <div style = "margin-top:10px;margin-left:30px;font-weight:bold;float:left;">您已選擇: </div> <div style = "margin-top:20px;">蘋果</div> <div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">材質: </div> <div style = "margin-top:10px;">蘋果 蘋果 蘋果 </div> <div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">品質: </div> <div style = "margin-top:10px;">蘋果 蘋果 蘋果 </div> <div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">風格: </div> <div style = "margin-top:10px;">蘋果 蘋果 蘋果 </div> <div style ="text-align:center;">更多選項</div> </div> <div style = "height:1800px;border:1px solid #F00"> <div style = "width:500px;height:30px;line-height:30px;margin-top:10px;margin-left:30px;float:left;border:1px solid #F00;"> 排序:價格 銷量 最新</div> <div style = "height:30px;line-height:30px;margin-top:10px;margin-right:30px;float:right;border:1px solid #F00;"> 共**件商品</div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> <img alt="" src="1.jpg" style ="margin-left:13px" > <div style = "text-align:center">商品名稱</div> <div > <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px"> <input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px"> </div> </div> </div> </div> </div> </div> </body> </html>
輸出樣式: