Web APIs 正则表达式综合案例丨小兔仙儿登录页面
Posted 黑马程序员官方
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web APIs 正则表达式综合案例丨小兔仙儿登录页面相关的知识，希望对你有一定的参考价值。
目录
综合案例：小兔鲜登录页面
需求：
1. 登录按钮点击的时候，需要先判断
- 如果没有勾选同意，则提示要勾选
- 如果勾选协议，则记住用户名和密码
- 登录成功则跳转到首页
注意，登录按钮需要先阻止默认行为
2. 打开页面时候，如果本地存储有数据， 则自动记录显示用户
名和密码，并勾选复选框
跳转需求：
如果是移动端打开，则跳转到移动端页面
如果本地存储有数据，则 显示 你好 xxxx，否则 显示 请跳转到注册页面
素材过多，因文章篇幅原因无法一 一展示
案例代码：CSS丨common
@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in ios.
*/
html
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body
margin: 0;
/**
* Render the `main` element consistently in IE.
*/
main
display: block;
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1
font-size: 2em;
margin: 0.67em 0;
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a
background-color: transparent;
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title]
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong
font-weight: bolder;
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
/**
* Add the correct font size in all browsers.
*/
small
font-size: 80%;
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
sub
bottom: -0.25em;
sup
top: -0.5em;
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img
border-style: none;
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input
/* 1 */
overflow: visible;
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select
/* 1 */
text-transform: none;
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"]
-webkit-appearance: button;
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner
border-style: none;
padding: 0;
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring
outline: 1px dotted ButtonText;
/**
* Correct the padding in Firefox.
*/
fieldset
padding: 0.35em 0.75em 0.625em;
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress
vertical-align: baseline;
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea
overflow: auto;
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"]
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button
height: auto;
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"]
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration
-webkit-appearance: none;
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details
display: block;
/*
* Add the correct display in all browsers.
*/
summary
display: list-item;
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template
display: none;
/**
* Add the correct display in IE 10.
*/
[hidden]
display: none;
*
box-sizing: border-box;
body
color: #333;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
ul, h1, h3, h4, p, dl, dd
padding: 0;
margin: 0;
a
text-decoration: none;
color: #333;
i
font-style: normal;
input
outline: none;
padding: 0;
border: none;
img
max-width: 100%;
max-height: 100%;
vertical-align: middle;
ul
list-style: none;
.clearfix:before,
.clearfix:after
content: " ";
display: table;
.clearfix:after
clear: both;
.clearfix
*zoom: 1;
.wrapper
width: 1240px;
margin: 0 auto;
.sprites
background-image: url(../images/sprites.png);
background-size: 400px 400px;
background-repeat: no-repeat;
.fl
float: left;
.fr
float: right;
.tc
text-align: center;
.green
color: #27BA9B;
.red
color: #CF4444;
.mb10
margin-bottom: 10px;
.fz20
font-size: 20px;
.fz18
font-size: 18px;
.fz16
font-size: 16px;
.xtx-bread
padding: 10px 0 25px 25px;
.xtx-bread a
color: #999;
padding-right: 5px;
.xtx-bread a:hover
color: #27BA9B;
.xtx-common-btn
width: 180px;
height: 50px;
border-radius: 4px;
text-align: center;
line-height: 48px;
font-size: 16px;
color: #FFFFFF;
display: inline-block;
.xtx-common-btn[type="primary"]
background: #27BA9B;
.xtx-common-btn[type="info"]
background: #CCCCCC;
.xtx-check
color: #999;
line-height: 30px;
cursor: pointer;
.xtx-check i
vertical-align: middle;
.xtx-check i.icon-yixuanze
color: #27BA9B;
display: none;
.xtx-check i.icon-weixuanze
color: #999;
.xtx-check span
vertical-align: middle;
.xtx-check input
display: none;
.xtx-check input:checked ~ span
color: #27BA9B;
.xtx-check input:checked ~ i.icon-yixuanze
display: inline-block;
.xtx-check input:checked ~ i.icon-weixuanze
display: none;
/** 顶部导航 **/
.xtx_topnav
background-color: #333;
.xtx_topnav .xtx_navs
height: 53px;
text-align: right;
line-height: 53px;
font-size: 0;
.xtx_topnav .xtx_navs li
display: inline-block;
font-size: 14px;
.xtx_topnav .xtx_navs li:last-child a
border-right: none;
.xtx_topnav .xtx_navs .mobile
display: inline-block;
width: 20px;
height: 16px;
position: relative;
top: 3px;
background-position: -160px -70px;
.xtx_topnav .xtx_navs a
display: inline-block;
line-height: 1;
padding: 0 15px;
border-right: 2px solid #666666;
color: #dcdcdc;
.xtx_topnav .xtx_navs a:hover
color: #27BA9B;
/** 主导航及Logo **/
.xtx_header .wrapper
display: flex;
align-items: center;
.xtx_header .xtx_logo
width: 200px;
height: 132px;
text-indent: -999px;
background-image: url(../images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 20px;
.xtx_header .xtx_navs
padding-left: 50px;
.xtx_header .xtx_navs li
line-height: 1;
font-size: 16px;
margin-right: 50px;
position: relative;
float: left;
.xtx_header .xtx_navs li:after
content: '';
display: none;
width: 30px;
height: 2px;
background-color: #27BA9B;
position: absolute;
left: 1px;
bottom: -7px;
.xtx_header .xtx_navs li:hover a, .xtx_header .xtx_navs li.active a
color: #27BA9B;
.xtx_header .xtx_navs li:hover:after, .xtx_header .xtx_navs li.active:after
display: block;
.xtx_header .xtx_search
height: 38px;
padding-left: 20px;
.xtx_header .xtx_search_wrapper
width: 175px;
height: 38px;
padding-left: 39px;
border-bottom: 1px solid #e7e7e7;
position: relative;
float: right;
.xtx_header .xtx_search_wrapper:before
content: '';
display: block;
width: 17px;
height: 17px;
position: absolute;
left: 5px;
top: 10px;
background-image: url(../images/sprites.png);
background-size: 400px 400px;
background-position: -80px -70px;
.xtx_header .xtx_search_wrapper input
width: 100%;
height: 100%;
font-size: 15px;
color: #999;
.xtx_header .xtx_search_wrapper input::-webkit-input-placeholder
color: #ccc;
.xtx_header .xtx_search_cart
display: block;
width: 22px;
height: 22px;
position: relative;
margin: 8px 12px 0 12px;
float: right;
background-position: -120px -70px;
.xtx_header .xtx_search_cart i
position: absolute;
top: -5px;
left: 16px;
line-height: 1;
padding: 1px 6px;
font-style: normal;
font-size: 13px;
background-color: #E26237;
border-radius: 15px;
color: #fff;
/** 公共底部 **/
.xtx_footer .contact
padding: 60px 0 40px 25px;
.xtx_footer .contact dl
height: 190px;
text-align: center;
padding: 0 72px;
border-right: 1px solid #f2f2f2;
color: #999;
float: left;
.xtx_footer .contact dl:first-child
padding-left: 0;
.xtx_footer .contact dl:last-child
border-right: none;
padding-right: 0;
.xtx_footer .contact dt
line-height: 1;
font-size: 18px;
.xtx_footer .contact dd
margin: 36px 12px 0 0;
float: left;
.xtx_footer .contact dd:last-child
margin-right: 0;
.xtx_footer .contact .chat, .xtx_footer .contact .feedback, .xtx_footer .contact .weixin, .xtx_footer .contact .weibo
width: 92px;
height: 92px;
padding-top: 20px;
border: 1px solid #ededed;
.xtx_footer .contact .chat:before, .xtx_footer .contact .feedback:before, .xtx_footer .contact .weixin:before, .xtx_footer .contact .weibo:before
content: '';
display: block;
width: 40px;
height: 30px;
margin: 0 auto 8px;
background-image: url(../images/sprites.png);
background-size: 400px 400px;
.xtx_footer .contact .chat:before
background-position: -245px -70px;
.xtx_footer .contact .chat:hover:before
background-position: -200px -70px;
.xtx_footer .contact .feedback:before
background-position: -345px -70px;
.xtx_footer .contact .feedback:hover:before
background-position: -295px -70px;
.xtx_footer .contact .weixin:before
background-position: -247px -15px;
.xtx_footer .contact .weixin:hover:before
background-position: -202px -15px;
.xtx_footer .contact .weibo:before
background-position: -347px -15px;
.xtx_footer .contact .weibo:hover:before
background-position: -297px -15px;
.xtx_footer .contact .qrcode
width: 92px;
height: 92px;
padding: 7px;
border: 1px solid #ededed;
.xtx_footer .contact .download
padding-top: 5px;
font-size: 14px;
.xtx_footer .contact .download span
display: block;
.xtx_footer .contact .download a
display: block;
line-height: 1;
padding: 10px 25px;
margin-top: 5px;
color: #fff;
border-radius: 2px;
background-color: #27BA9B;
.xtx_footer .contact .hotline
padding-top: 20px;
font-size: 22px;
color: #666;
.xtx_footer .contact .hotline small
display: block;
font-size: 15px;
color: #999;
.xtx_footer .extra
background-color: #333;
.xtx_footer .slogan
height: 178px;
line-height: 58px;
padding: 60px 100px;
border-bottom: 1px solid #434343;
text-align: justify;
.xtx_footer .slogan:after
content: '';
display: inline-block;
width: 100%;
height: 0;
.xtx_footer .slogan a
display: inline-block;
height: 58px;
line-height: 58px;
color: #fff;
font-size: 28px;
.xtx_footer .slogan a:before
content: '';
width: 58px;
height: 58px;
margin-right: 10px;
float: left;
background-image: url(../images/sprites.png);
background-size: 400px 400px;
.xtx_footer .slogan .price:before
background-position: 0 0;
.xtx_footer .slogan .express:before
background-position: -65px 0;
.xtx_footer .slogan .quality:before
background-position: -130px 0;
.xtx_footer .copyright
height: 170px;
padding-top: 40px;
text-align: center;
color: #999;
font-size: 15px;
.xtx_footer .copyright p
line-height: 1;
margin-bottom: 20px;
.xtx_footer .copyright a
color: #999;
line-height: 1;
padding: 0 10px 0 6px;
border-right: 1px solid #999;
.xtx_footer .copyright a:last-child
border-right: none;
button
border: none;
padding: 0;
案例代码：CSS丨index
@charset "UTF-8";
/** 分类及焦点图 **/
.xtx_entry
height: 500px;
background-color: #f2f2f2;
position: relative;
.xtx_category
width: 250px;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 9;
.xtx_category:hover .xtx_category_subset
display: block;
.xtx_category_super li
height: 50px;
padding: 0 20px 0 40px;
transition: background-color 0.25s;
cursor: pointer;
.xtx_category_super li:hover,
.xtx_category_super li.active
background-color: #27BA9B;
.xtx_category_super a
color: #fff;
font-size: 16px;
line-height: 50px;
.xtx_category_super a small
font-size: 14px;
.xtx_category_super i
display: block;
width: 12px;
height: 12px;
margin-top: 20px;
background-position: -75px -110px;
float: right;
.xtx_category_subset
width: 990px;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: none;
position: absolute;
top: 0;
left: 250px;
.xtx_banner
width: 1240px;
height: 500px;
overflow: hidden;
position: relative;
.xtx_banner:hover a
opacity: 1;
.xtx_banner > a
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
margin-top: -22px;
opacity: 0;
transition: opacity 0.5s;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
.xtx_banner > a.prev
left: 270px;
background-position: 14px -59px;
.xtx_banner > a.next
right: 20px;
background-position: -24px -59px;
.xtx_banner .indicator
width: 990px;
text-align: center;
font-size: 0;
position: absolute;
left: 250px;
bottom: 22px;
.xtx_banner .indicator span
display: inline-block;
width: 9px;
height: 9px;
margin: 0 8px;
cursor: pointer;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.43);
.xtx_banner .indicator span.active
background-color: #fff;
/** 公共面板 **/
.xtx_panel .xtx_panel_header
height: 115px;
padding: 40px 0;
.xtx_panel .xtx_panel_header h3
height: 35px;
line-height: 35px;
margin-left: 6px;
font-size: 32px;
font-weight: 400;
color: #333;
float: left;
.xtx_panel .xtx_panel_header small
margin-left: 22px;
font-size: 16px;
color: #999;
.xtx_panel .xtx_panel_header .more
line-height: 1;
margin-top: 14px;
font-size: 16px;
color: #999;
float: right;
.xtx_panel .xtx_panel_header .more i
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
background-position: 8px -106px;
.xtx_panel .xtx_panel_header .tabs-bar
height: 35px;
padding-top: 13px;
font-size: 16px;
margin-right: 80px;
float: right;
.xtx_panel .xtx_panel_header .tabs-bar a
padding: 2px 8px;
margin-left: 5px;
border-radius: 2px;
.xtx_panel .xtx_panel_header .tabs-bar a:hover,
.xtx_panel .xtx_panel_header .tabs-bar a.active
background-color: #27BA9B;
color: #fff;
.xtx_panel .xtx_panel_goods_1
text-align: justify;
font-size: 0;
.xtx_panel .xtx_panel_goods_1:after
content: "";
display: inline-block;
width: 306px;
height: 0;
.xtx_panel .xtx_panel_goods_1 a
display: inline-block;
width: 306px;
height: 406px;
text-align: center;
.xtx_panel .xtx_panel_goods_1 img
width: 306px;
height: 306px;
.xtx_panel .xtx_panel_goods_2
height: 610px;
.xtx_panel .xtx_panel_goods_2 li
width: 240px;
height: 300px;
padding-top: 10px;
margin-left: 10px;
background-color: #fff;
border: 1px solid #fff;
overflow: hidden;
transition: 0.3s;
position: relative;
float: left;
.xtx_panel .xtx_panel_goods_2 li:hover
border-color: #27BA9B;
.xtx_panel .xtx_panel_goods_2 li:hover .extra
bottom: 0;
.xtx_panel .xtx_panel_goods_2 li:first-child
height: 610px;
padding-top: 0;
margin-left: 0;
border: 0;
.xtx_panel .xtx_panel_goods_2 li:nth-last-child(-n + 4)
margin-top: 10px;
.xtx_panel .xtx_panel_goods_2 a
display: block;
.xtx_panel .xtx_panel_goods_2 .img-box
width: 240px;
height: 160px;
padding: 0 33px;
text-align: center;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
.xtx_panel .xtx_panel_goods_2 .meta
height: 130px;
line-height: 1.3;
padding: 10px 22px 0;
font-size: 19px;
position: relative;
.xtx_panel .xtx_panel_goods_2 .name
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
.xtx_panel .xtx_panel_goods_2 .price
font-size: 22px;
color: #CF4444;
position: absolute;
bottom: 10px;
.xtx_panel .xtx_panel_goods_2 .price small
font-size: 17px;
.xtx_panel .xtx_panel_goods_2 .extra
width: 100%;
height: 86px;
padding-top: 10px;
transition: bottom 0.3s;
background-color: #27BA9B;
position: absolute;
bottom: -86px;
.xtx_panel .xtx_panel_goods_2 .extra span
display: block;
width: 124px;
line-height: 1;
padding: 9px 0 8px;
margin: 0 auto;
text-align: center;
font-size: 19px;
color: #fff;
.xtx_panel .xtx_panel_goods_2 .extra span:last-child
font-size: 13px;
border-top: 1px solid #fff;
.xtx_panel .xtx_panel_goods_2 .label
position: absolute;
left: 0;
bottom: 266px;
width: 188px;
height: 66px;
text-align: center;
line-height: 66px;
color: #fff;
font-size: 17px;
border-radius: 0 2px 2px 0;
background-color: rgba(0, 0, 0, 0.8);
position: relative;
.xtx_panel .xtx_panel_goods_2 .label span:first-child
display: block;
width: 76px;
background-color: #000;
.xtx_panel .xtx_panel_goods_2 .label span:last-child
width: 112px;
line-height: 1.4;
transform: translate(0, -50%);
position: absolute;
left: 76px;
right: 0;
top: 50%;
/** 新鲜好物 **/
.xtx_goods_new .xtx_panel_goods_1 a
background-color: #f0f9f4;
transition: 0.5s;
position: relative;
top: 0;
.xtx_goods_new .xtx_panel_goods_1 a:hover
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
top: -3px;
.xtx_goods_new .xtx_panel_goods_1 .name
display: inline-block;
width: 100%;
margin: 12px 0 10px;
font-size: 22px;
.xtx_goods_new .xtx_panel_goods_1 .price
font-size: 23px;
color: #CF4444;
.xtx_goods_new .xtx_panel_goods_1 small
font-size: 16px;
/** 人气推荐 **/
.xtx_goods_popular
padding-bottom: 42px;
.xtx_goods_popular .xtx_panel_goods_1 a
transition: 0.5s;
.xtx_goods_popular .xtx_panel_goods_1 a:hover
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -3px);
.xtx_goods_popular .xtx_panel_goods_1 .title
display: inline-block;
width: 100%;
line-height: 1;
margin: 20px 0 16px;
font-size: 22px;
.xtx_goods_popular .xtx_panel_goods_1 .alt
font-size: 18px;
color: #999;
/** 热门品牌 **/
.xtx_goods_brand
padding-bottom: 32px;
background-color: #f5f5f5;
.xtx_goods_brand .page-bar
float: right;
.xtx_goods_brand .page-bar a
display: inline-block;
width: 20px;
height: 20px;
line-height: 1;
margin-top: 10px;
background-color: #e2e2e2;
.xtx_goods_brand .page-bar a:hover,
.xtx_goods_brand .page-bar a.active
background-color: #27BA9B;
.xtx_goods_brand .page-bar .prev
margin-right: 5px;
background-position: -32px -106px;
transform: rotate(180deg);
.xtx_goods_brand .page-bar .next
background-position: -32px -106px;
.xtx_goods_brand .xtx_goods
height: 305px;
.xtx_goods_brand .xtx_goods li
float: left;
font-size: 0;
.xtx_goods_brand .xtx_goods a
margin-right: 10px;
.xtx_goods_brand .xtx_goods a img
width: 240px;
height: 305px;
.xtx_goods_brand .xtx_goods a:last-child
margin-right: 0;
/** 生鲜 **/
.xtx_goods_category
padding-bottom: 80px;
/** 最新主题 **/
.xtx_goods_topic
background-color: #f5f5f5;
padding-bottom: 52px;
.xtx_goods_topic li
width: 406px;
margin-left: 11px;
transition: 0.5s;
float: left;
background: white;
.xtx_goods_topic li:hover
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -3px);
.xtx_goods_topic li:first-child
margin-left: 0;
.xtx_goods_topic li a
display: block;
height: 287px;
position: relative;
.xtx_goods_topic .meta
width: 100%;
height: 100%;
color: #fff;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
position: absolute;
bottom: 0;
.xtx_goods_topic .meta .title
height: 70px;
padding-left: 16px;
font-size: 22px;
position: absolute;
bottom: 0px;
.xtx_goods_topic .meta .title small
display: block;
font-size: 19px;
color: #999;
.xtx_goods_topic .meta .price
position: absolute;
bottom: 25px;
right: 16px;
display: block;
line-height: 1;
padding: 4px 8px 4px 7px;
color: #CF4444;
font-size: 17px;
background-color: #fff;
border-radius: 2px;
.xtx_goods_topic .meta .price small
font-size: 15px;
.xtx_goods_topic .social
height: 70px;
line-height: 70px;
padding: 0 20px;
font-size: 16px;
.xtx_goods_topic .social i
display: inline-block;
width: 15px;
height: 14px;
margin-right: 5px;
position: relative;
top: 2px;
.xtx_goods_topic .social .like,
.xtx_goods_topic .social .liked,
.xtx_goods_topic .social .view
float: left;
margin-right: 25px;
.xtx_goods_topic .social .reply
float: right;
.xtx_goods_topic .social .like i
background-position: -120px -110px;
.xtx_goods_topic .social .liked i
background-position: -240px -110px;
.xtx_goods_topic .social .view i
background-position: -160px -110px;
.xtx_goods_topic .social .reply i
width: 17px;
height: 16px;
top: 4px;
background-position: -200px -110px;
.xtx-wrapper
background: #f5f5f5;
line-height: 1.4;
.xtx-wrapper .container
width: 1240px;
margin: 0 auto;
.xtx-wrapper .container .title
height: 215px;
line-height: 215px;
font-size: 32px;
text-align: center;
font-weight: normal;
.xtx-bg-title
width: 100%;
height: 180px;
padding-left: 213px;
background: no-repeat center / cover;
.xtx-bg-title h4
padding-top: 52px;
font-size: 32px;
font-weight: bold;
.xtx-bg-title p
padding-top: 5px;
font-size: 20px;
.xtx-large-product
margin-top: 40px;
display: flex;
justify-content: space-between;
.xtx-large-product .item
width: 610px;
height: 420px;
background: white;
position: relative;
.xtx-large-product .item img
width: 100%;
height: 320px;
display: block;
.xtx-large-product .item p
padding-left: 55px;
.xtx-large-product .item p.tit
padding-top: 22px;
font-size: 16px;
.xtx-large-product .item p.desc
padding-top: 12px;
color: #999;
font-size: 14px;
.xtx-large-product .item .price
position: absolute;
bottom: 37px;
right: 33px;
color: #CF4444;
font-size: 18px;
.xtx-large-product .item .tag
width: 170px;
height: 40px;
border: 1px solid #fff;
border-radius: 4px;
position: absolute;
top: 17px;
left: 15px;
line-height: 40px;
color: #fff;
text-align: center;
font-size: 16px;
.xtx-mini-product
padding-top: 40px;
padding-bottom: 20px;
.xtx-mini-product ul li
width: 232px;
height: 320px;
float: left;
background: white;
margin-right: 20px;
text-align: center;
margin-bottom: 20px;
.xtx-mini-product ul li:nth-child(5n)
margin-right: 0;
.xtx-mini-product ul li img
width: 160px;
height: 160px;
display: block;
margin: 22px auto 0;
.xtx-mini-product ul li .tit
padding-top: 23px;
font-size: 16px;
.xtx-mini-product ul li .desc
padding-top: 12px;
color: #999;
.xtx-mini-product ul li .price
font-size: 18px;
color: #CF4444;
padding-top: 16px;
.xtx-simpla-title
height: 40px;
font-size: 28px;
text-align: center;
.xtx-large-brand
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.xtx-large-brand .item
width: 610px;
height: 480px;
background: white;
margin-bottom: 40px;
.xtx-large-brand .item img
width: 100%;
height: 320px;
display: block;
.xtx-large-brand .item .info
padding: 0 35px;
position: relative;
.xtx-large-brand .item .info p.name
padding-top: 22px;
padding-bottom: 12px;
font-size: 20px;
.xtx-large-brand .item .info p.name i
width: 36px;
height: 18px;
line-height: 18px;
background: #27BA9B;
border-radius: 2px;
color: #fff;
font-size: 14px;
display: inline-block;
text-align: center;
.xtx-large-brand .item .info p.desc
color: #999;
font-size: 14px;
height: 40px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-right: 40px;
.xtx-large-brand .item .info .price
position: absolute;
top: 20px;
right: 35px;
color: #CF4444;
font-size: 18px;
.xtx-large-brand .item .comment
padding: 15px 35px 0;
line-height: 40px;
color: #999;
.xtx-large-brand .item .comment .line
width: 100%;
height: 1px;
background: #E4E4E4;
.xtx-large-brand .item .comment .red
color: #CF4444;
.xtx-large-brand .item .comment .mr18
margin-right: 18px;
案例代码：CSS丨login
.xtx-login-header
width: 1170px;
height: 132px;
margin: 0 auto;
.xtx-login-header .logo
width: 200px;
height: 132px;
text-indent: -999px;
background-image: url(../images/logo.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
float: left;
.xtx-login-header .home
float: right;
margin-top: 82px;
font-size: 16px;
padding-right: 24px;
background: url(../images/login-enter.png) no-repeat right;
.xtx-login-main
height: 488px;
background: url(../images/login-bg.png) no-repeat center/cover;
.xtx-login-main .wrapper
width: 1170px;
height: 100%;
margin: 0 auto;
position: relative;
.xtx-login-main .wrapper .box
width: 380px;
box-shadow: 0px 0px 25px 0px rgba(3, 3, 3, 0.14);
position: absolute;
top: 60px;
right: 100px;
background: #fff;
padding: 20px 40px;
.xtx-login-main .wrapper .box .tab-nav
display: flex;
justify-content: space-between;
position: relative;
.xtx-login-main .wrapper .box .tab-nav::before
content: "";
position: absolute;
left: 50%;
top: 8px;
width: 1px;
height: 20px;
background: #ededed;
.xtx-login-main .wrapper .box .tab-nav a
font-size: 18px;
height: 35px;
line-height: 35px;
.xtx-login-main .wrapper .box .tab-nav a.active
border-bottom: 2px solid #17bb9b;
.xtx-login-main .wrapper .box .tab-pane .code
display: block;
margin: 44px auto;
.xtx-login-main .wrapper .box .tab-pane .link
text-align: right;
padding-top: 12px;
.xtx-login-main .wrapper .box .tab-pane .link a
color: #17bb9b;
.xtx-login-main .wrapper .box .tab-pane .input
border: 1px solid #17bb9b;
width: 100%;
height: 36px;
margin-top: 17px;
display: flex;
background: #CFCDCD;
.xtx-login-main .wrapper .box .tab-pane .input .iconfont
color: #fff;
width: 34px;
height: 34px;
text-align: center;
line-height: 34px;
font-size: 20px;
.xtx-login-main .wrapper .box .tab-pane .input input
flex: 1;
padding-left: 15px;
background: #fff;
.xtx-login-main .wrapper .box .tab-pane .input input::placeholder
color: #B3B3B3 !important;
.xtx-login-main .wrapper .box .tab-pane .agree
color: #B3B3B3;
padding: 17px 0;
.xtx-login-main .wrapper .box .tab-pane .agree a
color: #0673B1;
.xtx-login-main .wrapper .box .tab-pane .agree > label input
/* display: none; */
.xtx-login-main .wrapper .box .tab-pane .agree > label input:checked + span
color: #17bb9b;
.xtx-login-main .wrapper .box .tab-pane .button
margin-bottom: 15px;
.xtx-login-main .wrapper .box .tab-pane .button .dl
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: #17bb9b;
color: #fff;
display: block;
font-size: 16px;
margin-bottom: 17px;
.xtx-login-footer .copyright
height: 115px;
padding-top: 40px;
text-align: center;
color: #999;
font-size: 15px;
.xtx-login-footer .copyright p
line-height: 1;
margin-bottom: 20px;
.xtx-login-footer .copyright a
color: #999;
line-height: 1;
padding: 0 10px 0 6px;
border-right: 1px solid #999;
.xtx-login-footer .copyright a:last-child
border-right: none;
案例代码：CSS丨register
.xtx-wrapper
background: #f5f5f5;
line-height: 1.4;
.xtx-wrapper .container
width: 1240px;
margin: 0 auto;
padding: 50px 0;
.xtx-card
width: 100%;
height: 800px;
background: #fff;
.xtx-card h3
font-size: 26px;
font-weight: normal;
color: #999999;
padding-left: 50px;
height: 180px;
line-height: 180px;
.xtx-form
padding-left: 460px;
.xtx-form .xtx-form-item
position: relative;
padding-bottom: 24px;
.xtx-form .xtx-form-item .msg
color: #ff4d4f;
position: absolute;
left: 2px;
bottom: 2px;
.xtx-form .xtx-form-item.pl50
padding-left: 40px;
cursor: pointer;
.xtx-form .xtx-form-item span.iconfont
position: absolute;
left: 15px;
top: 13px;
color: #666;
font-size: 18px;
.xtx-form .xtx-form-item i
color: #27BA9B;
font-size: 14px;
.xtx-form .xtx-form-item input
width: 300px;
height: 50px;
border: 1px solid #e4e4e4;
padding-left: 40px;
.xtx-form .xtx-form-item.error input
border-color: #ff4d4f;
.xtx-form .xtx-form-item input::placeholder
color: #cccccc !important;
.xtx-form .xtx-form-item .submit
width: 300px;
height: 50px;
background: #27BA9B;
border-radius: 4px;
display: block;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
.xtx-form .xtx-form-item .code
position: absolute;
left: 190px;
top: 16px;
width: 100px;
color: #27BA9B;
text-align: right;
.xtx-form .xtx-form-item .code.ing
color: #cccccc;
.xtx-steps
display: flex;
justify-content: space-between;
width: 720px;
height: 96px;
margin: 0 auto;
.xtx-steps .item
position: relative;
width: 48px;
height: 48px;
.xtx-steps .item .text
text-align: center;
width: 120px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 63px;
color: #999;
.xtx-steps .item .step
border: 2px solid #e4e4e4;
color: #ccc;
background: #fff;
border-radius: 50%;
line-height: 46px;
text-align: center;
font-size: 28px;
z-index: 999;
display: block;
position: relative;
.xtx-steps .item::after, .xtx-steps .item::before
content: "";
position: absolute;
top: 23px;
left: 24px;
height: 2px;
background: #e4e4e4;
width: 120px;
.xtx-steps .item::after
transform: translateX(-100%);
.xtx-steps .item:first-child::after
display: none;
.xtx-steps .item:last-child::before
display: none;
.xtx-steps .item.active .text
color: #27BA9B;
.xtx-steps .item.active .step
background: #27BA9B;
color: #fff;
border-color: #27BA9B;
.xtx-steps .item.active::after, .xtx-steps .item.active::before
content: "";
background: #27BA9B;
.xtx-form-label
padding-left: 360px;
margin-top: 80px;
.xtx-form-label .xtx-form-item
position: relative;
padding-bottom: 24px;
display: flex;
.xtx-form-label .xtx-form-item label
width: 100px;
padding-right: 15px;
text-align: right;
font-size: 16px;
height: 50px;
line-height: 50px;
color: #999;
.xtx-form-label .xtx-form-item input
width: 300px;
height: 50px;
border: 1px solid #e4e4e4;
padding-left: 10px;
.xtx-form-label .xtx-form-item input::placeholder
color: #cccccc !important;
.xtx-form-label .xtx-form-item input:read-only
background: #f5f5f5;
color: #999;
.xtx-form-label .xtx-form-item .submit
width: 300px;
height: 50px;
background: #27BA9B;
border-radius: 4px;
display: block;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 50px;
.xtx-form-label .xtx-form-item .captcha
line-height: 50px;
height: 50px;
.xtx-form-label .xtx-form-item .captcha img
width: 134px;
height: 50px;
.xtx-form-label .xtx-form-item .captcha a
color: #27BA9B;
.xtx-form-label .xtx-form-item .code
position: absolute;
left: 310px;
top: 16px;
color: #27BA9B;
.xtx-form-label .xtx-form-item .code.ing
color: #cccccc;
.xtx-success-box
padding-top: 250px;
text-align: center;
color: #999999;
.xtx-success-box .iconfont
font-size: 80px;
color: #1DC779;
.xtx-success-box .tit
font-size: 20px;
padding: 20px 0;
.xtx-success-box .desc
font-size: 16px;
padding-bottom: 20px;
.xtx-success-box .btn
width: 300px;
height: 50px;
background: #27BA9B;
border-radius: 4px;
display: block;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 50px;
margin: 0 auto;
案例代码：HTML丨index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
<script>
// 检测 userAgent（浏览器信息）
!(function ()
const userAgent = navigator.userAgent
// 验证是否为android或iPhone
const android = userAgent.match(/(Android);?[\\s\\/]+([\\d.]+)?/)
const iphone = userAgent.match(/(iPhone\\sOS)\\s([\\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone)
location.href = 'http://m.itcast.cn'
)()
</script>
</head>
<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<!-- 顶部导航 -->
<ul class="xtx_navs">
<li>
<a href="./login.html">请先登录</a>
</li>
<li>
<a href="./register.html">免费注册</a>
</li>
<li>
<a href="./center-order.html">我的订单</a>
</li>
<li>
<a href="./center.html">会员中心</a>
</li>
<li>
<a href="javascript:;">帮助中心</a>
</li>
<li>
<a href="javascript:;">在线客服</a>
</li>
<li>
<a href="javascript:;">
<i class="mobile sprites"></i>
手机版
</a>
</li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="xtx_header">
<div class="wrapper">
<!-- 网站Logo -->
<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
<!-- 主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="./index.html">首页</a>
</li>
<li>
<a href="./category01.html">生鲜</a>
</li>
<li>
<a href="./category01.html">美食</a>
</li>
<li>
<a href="./category01.html">餐厨</a>
</li>
<li>
<a href="./category01.html">电器</a>
</li>
<li>
<a href="./category01.html">居家</a>
</li>
<li>
<a href="./category01.html">洗护</a>
</li>
<li>
<a href="./category01.html">孕婴</a>
</li>
<li>
<a href="./category01.html">服装</a>
</li>
</ul>
</div>
<!-- 站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="./cart-none.html" class="xtx_search_cart sprites">
<i>2</i>
</a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
</div>
</div>
</div>
</div>
<!-- 分类及焦点图 -->
<div class="xtx_entry">
<div class="wrapper">
<!-- 分类 -->
<div class="xtx_category">
<!-- 顶级分类 -->
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果</small>
<small>蔬菜</small>
</a>
<i class="sprites"></i>
</li>
<li class="active">
<a href="javascript:;">
美食
<small>面点</small>
<small>干果</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
电器
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
居家
<small>床品</small>
<small>四件套</small>
<small>被枕</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护</small>
<small>美妆</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉</small>
<small>玩具</small>
<small>辅食</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
服饰
<small>女装</small>
<small>男装</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
杂货
<small>户外</small>
<small>图书</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造</small>
</a>
<i class="sprites"></i>
</li>
</ul>
<!-- 子分类 -->
<div class="xtx_category_subset">
</div>
</div>
<!-- 焦点图 -->
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="">
</a>
</li>
</ul>
<!-- 切换按钮 -->
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites"></a>
<!-- 指示器 -->
<div class="indicator">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<!-- 新鲜好物 -->
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<!-- 面板头部 -->
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
<a href="./index-new.html" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8</span>
<span class="price"><small>￥</small>899</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调</span>
<span class="price"><small>￥</small>1299</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭</span>
<span class="price"><small>￥</small>129</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表</span>
<span class="price"><small>￥</small>3399</span>
</a>
</div>
</div>
</div>
<!-- 人气推荐 -->
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<!-- 面板头部 -->
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过</small></h3>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg">
<span class="title">特惠推荐</span>
<span class="alt">我猜得到 你的需要</span>
</a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg">
<span class="title">爆款推荐</span>
<span class="alt">人气好物推荐</span>
</a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg">
<span class="title">场景使用一站买全</span>
<span class="alt">编辑精心整理推荐</span>
</a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg">
<span class="title">领券中心</span>
<span class="alt">发现更多超值优惠券</span>
</a>
</div>
</div>
</div>
<!-- 热门品牌 -->
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证</small></h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites active"></a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="">
</a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 分类商品 -->
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<!-- 生鲜 -->
<div class="xtx_panel_header">
<h3>生鲜</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="">
</a>
<div class="label">
<span>生鲜馆</span>
<span>全场3件8折</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
<p class="flag">火锅食材</p>
<p class="price"><small>￥</small>71.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>49.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>899</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_6.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">广西沃柑 柑橘1.5kg</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_7.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">进口 牛油果 6个装 单果重约130-180g</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>39.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src=以上是关于Web APIs 正则表达式综合案例丨小兔仙儿登录页面的主要内容，如果未能解决你的问题，请参考以下文章