Mall List page (static)

One,

First, the job requirements:
1. Compose a complete list of store static pages
Second, the blog address: https: //www.cnblogs.com/catepython/p/9205636.html
Third, the operating environment
Operating System: Win10
Python：3.6.4rcl
Pycharm：2017.3.4
Fourth, the function realization
1) in accordance with the style and describe the HTML page listing Mall
V. Remarks
readme

Second, the program structure of FIG.

Third, the core code

<!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 the rel = "this stylesheet" the href = "E: \ python_work \ 51CTO_Python \ sixth module learning \ Day01 \ list store (static) job \ Pictures">
</ head>
<body style = "margin: 0 Auto ">
! <- title bar ->
<div class =" PG-title ">
<div style =" width: 1600px; margin: 0 Auto ">
<div style =" float: left "> * Collect station </ div>
<div style = "a float: right">
<div class = "dt">
<a> login </a>
</ div>
<div class = "dt">
<a> Register </ a >
</ div>
<div class = "dt">
<a> my order </a>
</ div>
<div class = "dt">
<a> Favorites </a>
</ div>
<div class = "dt">
<a> * VIP Club </a>
</ div>
<div class = "dt">
<a> concern </a>
</ div>
</div>
<div style="clear: both"></div>
</div>
</div>

<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>
<! - FIG Home Product ->
<div style = "margin-left: 22 is%; 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 \ national Taiwan wine .jpg "style =" width: 300px; height: 300px ">
</a>
</ div>
<div style =" Color: Black; text-align = left: Center ">
[country] table wine collection classic sauce Feng Tan incense years grade alcohol wine sauce 6 bottles / box 500ml / bottle% precision 53 is
</ div>
<div style = "height: 50px; width: 100px; a 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 by; width: 300px by">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<IMG src = "picture \ national Taiwan liquor .jpg" style = "width: 300px; height: 300px">
</a>
</ div>
<div style = "Color: Black; text-align = left: Center">
[country station collection classic wine sauce alcohol] Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle% precision 53 is
</ div>
<div style = "height: 50px; width: 100px; a 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 "> [country] most classic table wine collection Maotai alcohol Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle accuracy of 53%<div style =" Color: Black; text-align = left: Center "></ div>
</a>

</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 by; width: 300px by">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<IMG src = "picture \ national Taiwan liquor .jpg" style = "width: 300px; height: 300px">
</a>
</ div>
<div style = "Color: Black; text-align = left: Center">
[country station collection classic wine sauce alcohol] Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle% precision 53 is
</ div>
<div style = "height: 50px; width: 100px; a 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 "> [country] most classic table wine collection Maotai alcohol Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle accuracy of 53%<div style =" Color: Black; text-align = left: Center "></ div>
</a>

</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 by; width: 300px by">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<IMG src = "picture \ national Taiwan liquor .jpg" style = "width: 300px; height: 300px">
</a>
</ div>
<div style = "Color: Black; text-align = left: Center">
[country station collection classic wine sauce alcohol] Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle% precision 53 is
</ div>
<div style = "height: 50px; width: 100px; a 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 "> [country] most classic table wine collection Maotai alcohol Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle accuracy of 53%<div style =" Color: Black; text-align = left: Center "></ div>
</a>

</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 by; width: 300px by">
<a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
<IMG src = "picture \ national Taiwan liquor .jpg" style = "width: 300px; height: 300px">
</a>
</ div>
<div style = "Color: Black; text-align = left: Center">
[country station collection classic wine sauce alcohol] Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle% precision 53 is
</ div>
<div style = "height: 50px; width: 100px; a 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"></ div>[country] most classic table wine collection Maotai alcohol Feng Tan years of premium wine sauce 6 bottles / box 500ml / % accuracy bottle 53 is<div style = "Color: Black; text-align = left: Center"></ div>
</a>

<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 \ table wine country .jpg "style =" width: 300px; height: 300px ">
</a>
</ div>
<div style =" Color: Black; text-align = left: Center ">
[country] table wine collection classic sauce alcohol Feng Tan 6 years of premium wine sauce bottles / box 500ml / bottle% precision 53 is
</ div>
<div style = "height: 50px; width: 100px; a 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; a 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>

Mall static pages list

Fourth, the results show map

Fourth, important notes

front end

HTML (Note: 20 DOCTYPE html tags: a correspondence relationship html: html tags known only inside a lang attribute = 'en' is called Label: Note)
label classification (note: most are active self-closing closure tag label : active closing tags:
block-level tags: tags series,

Label ... a whole accounted for trekking in the label (inline tag): the label does not account for a whole line)
label (Note: #define HTML coding # 3 seconds automatically refresh)
# add the title for the next small icon labels href html files in the current path the ico file)
tag (Note: special symbols: space = <: <>:>)

And
tags (Note:

121sada
sda '

p Tags: paragraph br Tags: line breaks between paragraphs)
Series label (Note:
Alex
Alex
Alex
Alex
Alex
Alex
)
Tags (Note: hello hello hello)
and labels (Note: Username: value to their default values
Password:

)

Radio (radio button) (Note:

Please select Gender
Male: Female: Alex:)
the CheckBox (box) (Note: Basketball: Soccer: ball: Billiards: Tennis:

Skills
tease sister: write code :)
File (upload) (Note:

Upload file
)
the RESET (Reset) (Note:

)

Tag (multiline input) <span style = "color: blue; font-size: 9px"> ( Note: <textarea name = "text" > Default)
)

Check the drop-down box (Note:

Check the drop-down box

)
Packet drop-down box (Note:

Packet drop-down box

)
Tag (hyperlink) (Note: a label is within the row labels Baidu)
anchors (Note: Chapter I Chapter II Chapter III
of the first chapter
second chapter
of Chapter III
)
label (Note: beauty style: definitions width and length PX: pixel title: text mouse to move the displayed image Alt: when the image does not display the text exists)
list (Note:

List (in front of black specks)
sdsdsdsd
sdsdsdsd
sdsdsdsd

List (number in front of the child)
sdsdsdsd
sdsdsdsd
sdsdsdsd

List (group)
23
abc
bc
23
abc
bc

)
Specification writing
table (Note:)
Tags (Note: User name:)
the CSS (Note: setting style attribute background-color on the label: RGB Color Control Code height: 48px px (pixel))
priority and the introduction of
common attributes
float ( Note: let the waves up the tab, so that block-level tags can be stacked)
block-level tag and label converting lines within
and outside the margins (Note: div: default margins is 8 margin: margin padding: padding)
hostname port operations
192.168 .111.12 8080 View details modifications

Text Outline

Fifth, this chapter knowledge mind map

Mall List page (static)

Guess you like