商城列表頁面（靜態）

時間  2019-12-01
標籤 商城 列表 頁面 靜態 欄目 網站開發 简体版
原文   原文鏈接

 

1、html

1、做業需求：
1、完成商城列表靜態頁面的抒寫
2、博客地址：https://www.cnblogs.com/catepython/p/9205636.html
3、運行環境
操做系統：Win10
Python：3.6.4rcl
Pycharm：2017.3.4
4、功能實現
1）按照樣式抒寫了HTML商城列表頁面
5、備註
readme

2、程序結構圖前端

3、核心代碼python

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-title{
background-color:#dddddd;
 height: 38px;
line-height: 38px;
}
.dt{
padding: 8px;
float: left;
line-height: 20px;
}
.pg-logo{
height: 120px;
line-height: 68px;
}
img{
border: 0;
}
.category{
margin-top: 20px;
height: 48px;
background-color: red;
font-weight: bold;
color: white;
}
.category_item{
background-color: brown;
height: 48px;
text-align: center;
line-height: 48px;
float: left;
}
.border{
border-top: 2px solid red;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
 }
.product{
margin-left: 10px;
color: #7d7d7d;
 float: left
}
.apple{
color: #7d7d7d;
font-weight: bold;
margin-left: 2%
}
.sorting{
color: black;
font-size: 18px;
font-weight: normal;
line-height: 40px
}
.product_item{
border: 1px solid red;
float: left;
height: 400px;
width: 300px;
margin-left: 2%;
margin-top: 2%
}
.add_subtract{
float: left;
color: #7d7d7d;
line-height: 25px;
width: 30px;
text-align: center;
border-right: 1px solid #dddddd
 }
</style>
<link rel="stylesheet" href="E:\python_work\51CTO_Python\第六模塊學習\Day01\商城列表（靜態）做業\pictures">
</head>
<body style="margin: 0 auto">
<!--標題欄-->
<div class="pg-title">
<div style="width: 1600px;margin: 0 auto">
<div style="float: left">*收藏本站</div>
<div style="float: right">
<div class="dt">
<a>登陸</a>
</div>
<div class="dt">
<a>註冊</a>
</div>
<div class="dt">
<a>個人訂單</a>
</div>
<div class="dt">
<a>個人收藏</a>
</div>
<div class="dt">
<a>*VIP 會員俱樂部</a>
</div>
<div class="dt">
<a>關注</a>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<!--Logo欄-->
<div class="pg-logo">
<!--搜索框 購物車欄-->
<div style="width: 1000px;margin: 0 auto">
<div style="width: 250px;float: left">
<img style="height: 100px;width: 100px;margin-top: 12px" src="picture\翎貓.png">
</div>
<div style="height: 100px;float: left;margin-top:20px;margin-left: 100px">
<input style="height: 35px;width: 330px;" type="text"/>
<div style="margin: -35px;margin-left: 0;">
<samp style="color: red;font-weight: bold;font-size: 15px">熱門搜索：</samp>
<a style="margin-left: 10px;color: #7d7d7d">火龍果</a>
<a style="margin-left: 10px;color: #7d7d7d">瓜子</a>
</div>
</div>
<div style="margin-top:34px;float: left">
<img style="height: 41px;" src="picture\2.png">
</div>
<div style="margin-top:35px;float: right;border: 1px solid #dddddd;
 height: 45px;width: 120px;
text-align: center;line-height: 45px">
個人購物車<img style="margin: 0" src="picture\購物車.jpg"/>
</div>
<div style="clear: both"></div>
</div>
</div>
<!--類目欄-->
<div class="category">
<!--類目欄-->
<div style="width: 1600px;margin: 21px auto">
<div style="float: left;width: 80%">
<div class="category_item" style="width: 20%">
<a>所有商品列表</a>
<div style="border: 1px solid #dddddd;float: left;width: 100%">
<div style="color: red;float: left">南方水果:</div>
<br/>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
</div>
<div style="border: 1px solid #dddddd;float: left;width: 100%">
<div style="color: red;float: left">南方水果:</div>
<br/>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
</div>
<div style="border: 1px solid #dddddd;float: left;width: 100%">
<div style="color: red;float: left">南方水果:</div>
<br/>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
</div>
<div style="border: 1px solid #dddddd;float: left;width: 100%;margin-top: 10%">
<div style="color: red;float: left">熱銷排行榜:</div>
<br/>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
<a class="product">火龍果</a>
</div>
<div style="border: 1px solid #dddddd;float: left;width: 100%">
<div style="color: black;float: left">Content</div>
</div>
</div>
<div class="category_item" style="margin-left: 5px;width: 8%">
<a>首頁</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 8%">
<a>網上超市</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 8%">
<a>水果超市</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 8%">
<a>超級訂餐</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 8%">
<a>生活娛樂</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 8%">
<a>研究院</a>
</div>
</div>
<div style="float: right;width: 20%">
<div class="category_item" style="margin-left: 5px;width: 30%">
<a>研究院</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 30%">
<a>猜你喜歡</a>
</div>
<div class="category_item" style="margin-left: 5px;width: 30%">
<a>論壇</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<!--已選產品和規格-->
<div style="margin-left: 22%;margin-top: 1%;width: 70%">
<div style="color: black">福特>蒙迪歐>2.0T</div>
<div class="border" style="margin-top: 1%;height: 200px">
<div style="color: black;height: 25%;line-height: 60px">您已選擇：
<samp class="apple">蘋果</samp>
</div>
<div style="color: black;height: 25%;line-height: 60px;margin-left: 2%">材質：
<samp class="apple">蘋果</samp>
<samp class="apple">蘋果</samp>
<samp class="apple">蘋果</samp>
</div>
<div style="color: black;height: 25%;line-height: 60px;margin-left: 2%">品牌：
<samp class="apple">蘋果</samp>
<samp class="apple">蘋果</samp>
<samp class="apple">蘋果</samp>
</div>
<div style="color: black;height: 25%;line-height: 60px;margin-left: 2%">風格：
<samp class="apple">蘋果</samp>
<samp class="apple">蘋果</samp>
<samp class="apple">蘋果</samp>
</div>
</div>
</div>
<!--排序-->
<div style="margin-left: 22%;margin-top: 1%;width: 70%">
<div style="border: 1px solid #dddddd;height: 40px">
<div style="float: left;width: 70%">
<samp class="sorting" style="margin-left: 2%">排序:</samp>
<samp class="sorting" style="margin-left: 5%;color: blue">價格↑</samp>
<samp class="sorting" style="margin-left: 5%;color: blue">銷量↑</samp>
<samp class="sorting" style="margin-left: 5%;color: blue">最新↑</samp>
</div>
<div style="float: right;width: 30%">
<div class="sorting" style="margin-left: 35%;color: red;float: left">共x件商品</div>
<div class="sorting" style="margin-left: 5%;color: red;float: left;">1
<samp style="color: black">/675</samp>
</div>
<input type="submit" value="<" style="height: 30px;margin-left: 5%;margin-top: 5px"/>
<input type="submit" value=">" style="height: 30px;line-height: 10px;margin-top: 5px"/>
</div>
</div>
<div style="clear: both"></div>
</div>
<!--商品首頁圖-->
<div style="margin-left: 22%;margin-top: 1%;width: 70%;height: 1400px">
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div><div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div><div class="product_item" >
<div style="height: 300px;width: 300px">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<img src="picture\國臺酒.jpg" style="width: 300px;height: 300px">
</a>
</div>
<div style="color: black;text-align: center">
【國臺 典藏酒】最經典的醬香酒味 封壇多年的特級酒汁 6瓶/箱 500ml/瓶 酒精度53%
</div>
<div style="height: 50px;width: 100px;float: left">
<samp style="color: red;font-weight: bold;font-size: 20px;
line-height: 50px;margin-left: 10%">$2880.00</samp>
</div>
<div style="height: 50px;width: 180px;float: right">
<div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
<div class="add_subtract">-</div>
<div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
<div class="add_subtract" style="float: right">+</div>
</div>
<input style="background-color: red;color: white;
width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="買"/>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
商城列表靜態頁面

 4、效果展現圖web

 

4、重要筆記app

http://mindmm.com/webappwebapp

前端
HTML (注:20個標籤 DOCTYPE html:對應關係 html:叫作html標籤 只能有一個 lang='en' 叫作標籤內部的屬性 :註釋 )
標籤分類 (注:絕大部分都是主動閉合標籤 自閉合標籤： 主動閉合標籤：
塊級標籤：系列標籤,
標籤...佔一整行 行內標籤（內聯標籤）：標籤不佔一整行 )
標籤 (注: #定義HTML編碼 #3秒自動刷新 )
#添加title小圖標標籤 href爲html文件當前路徑下的ico文件 )
標籤 (注:特殊符號： =空格 <:< >:> )
和
標籤 (注:
121sada
sda
p標籤：段落 br標籤：段落間的換行)
系列標籤 (注:
Alex
Alex
Alex
Alex
Alex
Alex
)
標籤 (注:hello hello hello)
和標籤 (注: 用戶名： value爲默認值
密碼：
)
radio(單選框) (注:
請選擇性別
男： 女： Alex： )
checkbox(複選框) (注: 籃球： 足球： 皮球： 檯球： 網球：
技能
撩妹： 寫代碼：)
file（上傳文件） (注:
上傳文件
)
reset(重置) (注:
)
標籤（多行文本輸入）<span style="color:blue;font-size:9px"> (注:<textarea name="text">默認值)
)
複選下拉框 (注:
複選下拉框
)
分組下拉框 (注:
分組下拉框
)
標籤（超連接） (注:a標籤是行內標籤 百度)
錨 (注:第一章 第二章 第三章
第一章內容
第二章內容
第三章內容
)
標籤 (注: 美女 style:定義寬度和長度 px：像素 title:鼠標移動到圖片後顯示的文字 alt：當圖片不存在時顯示的文字)
列表 (注:
列表(前面小黑點)
sdsdsdsd
sdsdsdsd
sdsdsdsd
列表(前面數子)
sdsdsdsd
sdsdsdsd
sdsdsdsd
列表(分組)
123
23
abc
bc
123
23
abc
bc
)
規範寫法
表格 (注: )
標籤 (注:用戶名： )
CSS (注:在標籤上設置style屬性 background-color:RGB顏色對照碼 height:48px px(像素))
優先級和引入
經常使用屬性
float (注:讓標籤浪起來，讓塊級標籤也能夠堆疊)
塊級標籤與行內標籤轉換
內外邊距 (注:div：默認邊距是8 margin:外邊距 padding：內邊距)
主機名 端口 操做
192.168.111.12 8080 查看詳情 修改
文字大綱

 5、本章知識點腦圖ide

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程