day02
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业title>
<style type="text/css">
body {
padding:0;
margin:0;
}
.section {
text-align: center;
padding: 20px;
height:700px;
color: #fff;
}
#nav {
position: fixed;
bottom:20px;
right:10px;
width:120px;
height: 521px;
}
style>
head>
<body>
<div class="section" id="section01" style="background:#369;">
<h2>五折抄底h2>
div>
<div class="section" id="section02" style="background:#f90;">
<h2>疯狂秒杀h2>
div>
<div class="section" id="section03" style="background:#1c3;">
<h2>电视家影h2>
div>
<div class="section" id="section04" style="background:#234;">
<h2>冰箱、洗衣机h2>
div>
<div class="section" id="section05" style="background:#f86;">
<h2>空凋h2>
div>
<div class="section" id="section06" style="background:#4bc;">
<h2>厨房电器h2>
div>
<div class="section" id="section07" style="background:#5a9;">
<h2>生活各护h2>
div>
<div class="section" id="section08" style="background:#61c;">
<h2>烟灶、热水器h2>
div>
<div class="section" id="section09" style="background:#7a2;">
<h2>热销品牌区h2>
div>
<div class="section" id="section10" style="background:#eb1;">
<h2>精彩推荐区h2>
div>
<div id="nav">
<img src="../../../front-end/dist/images_two/navbar.png" alt="家装节" usemap="#mymap">
div>
<map name="mymap" id="mymap">
<area shape="rect" coords="0,50,120,85" href="#section01">
<area shape="rect" coords="0,90,120,125" href="#section02">
<area shape="rect" coords="0,130,120,165" href="#section03">
<area shape="rect" coords="0,170,120,205" href="#section04">
<area shape="rect" coords="0,210,120,245" href="#section05">
<area shape="rect" coords="0,250,120,285" href="#section06">
<area shape="rect" coords="0,290,120,325" href="#section07">
<area shape="rect" coords="0,330,120,365" href="#section08">
<area shape="rect" coords="0,370,120,405" href="#section09">
<area shape="rect" coords="0,410,120,445" href="#section10">
<area shape="circle" coords="58,489,32" href="#">
map>
body>
html>
DOCTYPE html>
<html>
<head>
<title>title>
<style type="text/css">
#huawei {
display:inline-block; /*默认a元素 没有宽高*/
width: 20px;
height: 20px;
background-color:red;
background: url(./loginv4.png) no-repeat -5px -32px;
}
#weixin {
display:inline-block; /*默认a元素 没有宽高*/
width: 22px;
height: 18px;
background-color:red;
background: url(./loginv4.png) no-repeat -30px -30px;
}
#weibo {
display:inline-block; /*默认a元素 没有宽高*/
width: 20px;
height: 18px;
background-color:red;
background: url(./loginv4.png) no-repeat -55px -32px;
}
#qq {
display:inline-block; /*默认a元素 没有宽高*/
width: 18px;
height: 18px;
background-color:red;
background: url(./loginv4.png) no-repeat -7px -53px;
}
#tianyi {
display:inline-block; /*默认a元素 没有宽高*/
width: 24px;
height: 16px;
background-color:red;
background: url(./loginv4.png) no-repeat -30px -54px;
}
#mahuateng {
display:inline-block; /*默认a元素 没有宽高*/
width: 14px;
height: 18px;
background-color:red;
background: url(./loginv4.png) no-repeat -55px -54px;
}
style>
head>
<body>
<a id="huawei" title="华为" target="_blank" href="http://www.huawei.com">a> <br>
<a id="weixin" title="微信" target="_blank" href="http://www.qq.com">a> <br>
<a id="weibo" title="微博" target="_blank" href="http://www.weibo.com">a> <br>
<a id="qq" title="qq" target="_blank" href="http://www.qq.com">a> <br>
<a id="tianyi" title="tianyi" target="_blank" href="http://www.hicdma.com/">a> <br>
<a id="mahuateng" title="mahuateng" target="_blank" href="http://www.qq.com">a> <br>
body>
html>
import re #读取文件 with open('./示例.md', 'r', encoding='utf-8') as f: data = f.read() # 替换标题 h1~h6 data = re.sub('######(.*)', r'\1
', data) data = re.sub('#####(.*)', r'\1
', data) data = re.sub('####(.*)', r'\1
', data) data = re.sub('###(.*)', r'\1
', data) data = re.sub('##(.*)', r'\1
', data) data = re.sub('#(.*)', r'\1
', data) # 替换 列表 data = re.sub('\*(.*)', r'\1 ', data) #替换li data = re.sub('(((.*) \n*)+)', r'\1
', data) #替换代码块 data = re.sub('```([^`]+)```', r'\1', data) #把data处理html html = """ """ html += data with open('./实例.html', 'w', encoding='utf-8') as wf: wf.write(html)
day03
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历备忘录title>
<style>
table {
width: 700px;
table-layout: fixed;
border-collapse: collapse;
font-size:12px;
}
th,td {
border: 1px dotted #999;
}
.album-header {
height:30px;
background: #add;
}
.album-content {
height: 100px;
vertical-align: top;
}
style>
head>
<body>
<table>
<tr class="album-header">
<th>周日th>
<th>周一th>
<th>周二th>
<th>周三th>
<th>周四th>
<th>周五th>
<th>周六th>
tr>
<tr class="album-content">
<td>27td>
<td>28td>
<td>29td>
<td>30td>
<td>31td>
<td>1td>
<td>2td>
tr>
<tr class="album-content">
<td>3td>
<td>4td>
<td>5td>
<td>6td>
<td>7td>
<td>8
<ul>
<li>吃饭li>
<li>钓鱼li>
<li>约会li>
ul>
td>
<td>9td>
tr>
<tr class="album-content">
<td>10td>
<td>11td>
<td>12td>
<td>13td>
<td>14td>
<td>15td>
<td>16td>
tr>
<tr class="album-content">
<td>17td>
<td>18td>
<td>19td>
<td>20td>
<td>21td>
<td>22td>
<td>23td>
tr>
<tr class="album-content">
<td>24td>
<td>25td>
<td>26td>
<td>27td>
<td>28td>
<td>29td>
<td>30td>
tr>
table>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历表格title>
<style>
table {
width: 500px;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
}
table img {
width:90px;
}
tr {
height: 40px;
}
th,td {
border:1px solid #999;
}
style>
head>
<body>
<table>
<caption><h3>简历h3>caption>
<tr>
<th>姓名th>
<td>td>
<th>性别th>
<td>td>
<td rowspan="3" style="text-align:center">
<img src="../../dist/images_one/avatar.jpg" alt="">
td>
tr>
<tr>
<th>出生年月th>
<td>td>
<th>籍贯th>
<td>td>
tr>
<tr>
<th>政治面貌th>
<td>td>
<th>民族th>
<td>td>
tr>
<tr>
<th>联系电话th>
<td>td>
<th>Emailth>
<td colspan="2">td>
tr>
<tr>
<th>家庭住址th>
<td>td>
<th>毕业院校th>
<td colspan="2">td>
tr>
<tr>
<th>学历th>
<td>td>
<th>专业th>
<td colspan="2">td>
tr>
<tr>
<th rowspan="5">学习工作经历th>
<th>起止时间th>
<th>工作单位th>
<th>职务th>
<th>岗位职责及业绩成绩th>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr style="height:80px">
<th>个人能力th>
<td colspan="4">td>
tr>
<tr style="height:80px">
<th>兴趣及爱好th>
<td colspan="4">td>
tr>
<tr style="height:80px">
<th>个人评价th>
<td colspan="4">td>
tr>
table>
body>
html>
小米
html{ color:#000; background:#FFF; } body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td { margin: 0; padding: 0; } fieldset, img{ border:0; } input,select,textarea{ outline:none; } textarea{ resize:none; } a{ text-decoration:none; } table { border-collapse:collapse; border-spacing:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style:none; } caption, th { text-align:left; } /* 清除浮动*/
/*通用的样式*/ body { font: 14px "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; } .container { margin: 0 auto; width: 1226px; } .leftfix { float: left; } .rightfix { float: right; } .clearfix{ clear:both } /*banner*/ .page-banner { width: 100%; height: 120px; } .page-banner a { display: block; height: 120px; background:url('../images/banner-bg.jpg') no-repeat center 0; } /*end banner*/ /*header*/ .page-header{ background:#333; height: 40px; line-height: 40px; color:#b0b0b0; font-size: 12px; } .page-header a { color:#b0b0b0; } .page-header-nav li{ float: left; } .page-header-nav li a { display: inline-block; padding: 0px 7px; border-right:1px solid #424242; line-height: 1em; } .page-header-nav ul li:first-child a { padding-left: 0; } .page-header-nav ul li:last-child a { border-right: 0; } .page-header-btn-group a { padding:0px 7px; border-right: 1px solid #424242; } .page-header-btn-group a:last-child { border-right: none; } .page-header-shopcar { margin-left:15px; } .page-header-shopcar a { display: block; width: 120px; text-align: center; background-color:#424242; } .page-header-shopcar .fa { font-size:20px; margin-right: 4px; vertical-align: middle; } /*end header*/ /*page-header2*/ .page-header2 { height: 100px; line-height: 100px; } .page-header2-logo { margin-right: 7px; } .logo { display: inline-block; width:55px; height:55px; line-height: 55px; font-size:0px; background: #ff6700 url('../images/mi-logo.png') no-repeat center; vertical-align: middle; } .page-header2-nav { margin-left:7px; } .page-header2-nav li{ float:left; } .page-header2-nav li a{ font-size:16px; padding: 0px 10px; color: #333; } .page-header2-nav li a:hover{ color: #ff6700; } .mi-item a{ display:block; width: 127px; height: 100px; background:url('../images/nav.gif') no-repeat center; } .page-header2-nav .mi-item a { padding-left:30px; padding-right:15px; } .search { width: 223px; height: 50px; border: 1px solid #e0e0e0; border-right:none; padding: 0 10px; } .search-btn { width:50px; height:50px; border: 1px solid #e0e0e0; background:transparent; font-size:24px; cursor:pointer; outline: none; } .search-btn:hover { background: #ff6700; color:#fff; } .page-header2-search { position:relative; margin-top:25px; } .page-header2-search form { width:273px; } .search-hot-word { position: absolute; right:55px; top:19px; height:12px; line-height: 1em; } .search-hot-word a{ background:#eee; color:#757575; padding:0px 3px; } .search-hot-word a:hover{ background:#ff6700; color:#fff; } /*end page-header1*/ /*轮播图 和 菜单*/ .menu-play-wrapper { position: relative; } .menu { position: absolute; z-index: 2; padding:20px 0px; width: 234px; left: 0; top: 0; background: rgba(0,0,0,.6); } .menu li{ } .menu li a { display: block; position: relative; padding-left: 30px; height: 42px; line-height: 42px; color: #fff; } .menu li a:hover { background: #ff6700; } .menu li a i { position: absolute; right:30px; top: 14px; opacity: .5; } .play-wrapper img { width: 100%; } .play-wrapper li { display: none; } .play-wrapper li.current { display: block; } .play { position: relative; } .control-list { position: absolute; bottom:30px; right:30px; font-size:0; } .control-list span { display: inline-block; margin:0 5px; width: 6px; height: 6px; border: 2px solid rgba(255,255,255,0.3); border-radius: 5px; background: rgba(0,0,0,0.4); cursor: pointer; } .control-list span:hover { background: rgba(255,255,255,0.4); border-color: rgba(0,0,0,0.4); } .control-list span.current { background: rgba(255,255,255,0.4); border-color: rgba(0,0,0,0.4); } .control-sider span { position: absolute; top:50%; transform: translate(0, -50%); width: 41px; height: 69px; line-height: 69px; text-align: center; font-size:30px; color:rgba(0,0,0,.3); cursor: pointer; /*transform: translatey(-50%);*/ } .control-sider span:hover { background: rgba(0,0,0,.5); color: #fff; } .control-left { border-top-right-radius: 2px; border-bottom-right-radius: 2px; left:234px; } .control-right { border-top-left-radius: 2px; border-bottom-left-radius: 2px; right: 0px; } /*轮播图 和 菜单 结束*/ /*page-hero*/ .page-hero { margin-top:14px; } .tag-list { width: 234px; background: #5f5750; } .tag-list li { float: left; position: relative; } .tag-list li a { display: block; padding: 18px 10px; width: 58px; height: 49px; color: rgba(255,255,255,0.7); text-align: center; font-size: 12px; } .tag-list li a:hover { color: #fff; } .tag-list li a i { font-size: 30px; } .left-line::after { content: ""; position: absolute; height: 75px; left:0; top: 5px; border-left: 1px solid #665e57; } .top-line::before { content: ""; position: absolute; border-top: 1px solid #665e57; top: 0; left: 5px; width: 68px; } .banner-list li { margin-left: 15px; width: 316px; height: 170px; } .banner-list li:first-child { margin-left: 0px; } .banner-list img { width: 316px; height: 170px; } /*page-hero end*/ /*page-main*/ .page-main { margin-top: 40px; background: #f5f5f5; overflow: hidden; } /*手机闪购*/ .title-box { height: 58px; line-height: 58px; } .title-box h2{ font-size: 22px; font-weight: normal; color: #333; } .more { color: #424242; font-size: 16px; } .more:hover { color: #ff6700; } .more i { font-size: 18px; } .content-box { } .content-box-image img { width: 234px; height: 614px; } .product-list { width: 978px; } .product-item { position: relative; width: 234px; height: 260px; padding: 20px 0px; background: #fff; text-align: center; margin-left:14px; transition: .5s; } .product-item:hover{ transform: translate(0, -2px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .product-item:first-child { margin-left: 0; margin-bottom: 14px; } .product-item:nth-child(2) { margin-bottom: 14px; } .product-item:nth-child(3) { margin-bottom: 14px; } .product-item:nth-child(4) { margin-bottom: 14px; } .product-item:nth-child(5) { margin-left: 0; } .product-image { margin-bottom: 12px; } .product-image img { width: 160px; height: 166px; } .product-title{ margin-bottom:2px; font-size: 14px; color: #333; } .product-title a { color: #333; } .product-des { overflow: hidden; width: 214px; padding:0 10px; margin-bottom:10px; color:#b0b0b0; font-size:12px; white-space: nowrap; text-overflow: ellipsis; } .product-price span { color: #ff6700; } .product-price del { color: #b0b0b0; } .product-item .flag { position: absolute; top:0; left: 50%; transform: translatex(-50%); /*代替的是margin-left：-32px*/ width: 64px; height: 20px; line-height: 20px; color: #fff; background: #e53935; font-size:12px; } .product-message { box-sizing: border-box; display: block; position: absolute; bottom:0px; background: #ff6700; font-size: 12px; height: 0px; padding: 0px 30px; overflow: hidden; transition: .5s; } .product-item:hover .product-message { height: 78px; padding:8px 30px; } .message { color: #fff; margin-bottom: 5px; } .author { color: rgba(0,0,0,.6); } /*手机闪购 结束*/ /*页脚*/ .footer-services { padding: 27px 0px; border-bottom:1px solid #e0e0e0; text-align: center; } .footer-services a { display: inline-block; width: 234px; font-size: 16px; color: #616161; border-right: 1px solid #c0c0c0; } .footer-services a:last-child { border-right: 0; } .footer-links { padding: 40px 0px; } .footer-links-left dl { width: 160px; } .footer-links-left dt { font-size: 14px; margin-bottom:26px; color: #424242; } .footer-links-left dd { margin-top: 10px; font-size: 12px; color: #757575; } .footer-links-right { width: 252px; text-align: center; border-left: 1px solid #c0c0c0; } .phone-number { font-size: 22px; color: #ff6700; margin-bottom: 5px; } .phone-time { margin-bottom: 16px; color: #616161; font-size: 12px; } .kefu-btn { display: inline-block; width:120px; height:30px; line-height:30px; border: 1px solid #ff6700; color:#ff6700; } .kefu-btn:hover { background: #ff6700; color: #fff; } /*页脚 结束*/
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="renderer" content="webkit">
<title>小米首页title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
head>
<body>
<div class="page-banner">
<a href="#">a>
div>
<div class="page-header">
<div class="container">
<div class="page-header-nav leftfix">
<ul>
<li><a href="#">小米商城a>li>
<li><a href="#">MIUIa>li>
<li><a href="#">loTa>li>
<li><a href="#">云服务a>li>
<li><a href="#">金融a>li>
<li><a href="#">有品a>li>
<li><a href="#">小爱开放平台a>li>
<li><a href="#">政企服务a>li>
<li><a href="#">Select Regiona>li>
ul>
div>
<div class="page-header-shopcar rightfix">
<a href="#">
<i class="fa fa-shopping-cart">i>
购物车
<span>(0)span>
a>
div>
<div class="page-header-btn-group rightfix">
<div class="btn-list">
<a href="#" class="btn">登录a>
<a href="#" class="btn">注册a>
<a href="#" class="btn">消息通知a>
div>
div>
div>
div>
<div class="page-header2">
<div class="container">
<div class="page-header2-logo leftfix">
<a href="#" class="logo">小米a>
div>
<div class="page-header2-nav leftfix">
<ul class="header2-nav-list">
<li class="mi-item"><a href="#">a>li>
<li><a href="#">小米手机a>li>
<li><a href="#">红米a>li>
<li><a href="#">电视a>li>
<li><a href="#">笔记本a>li>
<li><a href="#">盒子a>li>
<li><a href="#">新品a>li>
<li><a href="#">路由器a>li>
<li><a href="#">智能硬件a>li>
<li><a href="#">服务a>li>
<li><a href="#">社区a>li>
ul>
div>
<div class="page-header2-search rightfix">
<form action="#">
<input type="search" name="wd" class="search leftfix" id="search">
<button class="search-btn rightfix">
<i class="fa fa-search">i>
button>
form>
<div class="search-hot-word" id="hotWord">
<a href="#">小米8a>
<a href="#">小米Max2sa>
div>
div>
div>
div>
<div class="menu-play-wrapper container">
<div class="menu">
<ul>
<li><a href="#">手机 电话卡 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">电视 盒子 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">笔记本 平板 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">家电 插线板 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">出行 穿戴 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">智能 路由器 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">电源 配件 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">个护 儿童 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">耳机 音响 <i class="fa fa-chevron-right">i>a> li>
<li><a href="#">生活 箱包 <i class="fa fa-chevron-right">i>a> li>
ul>
div>
<div class="play">
<ul class="play-wrapper">
<li class="current">
<a href="http://www.mi.com" target="_blank">
<img src="images/play01.jpg" alt="">
a>
li>
<li>
<a href="#">
<img src="images/play02.jpg" alt="">
a>
li>
<li>
<a href="#">
<img src="images/play03.jpg" alt="">
a>
li>
<li>
<a href="#">
<img src="images/play04.jpg" alt="">
a>
li>
<li>
<a href="#">
<img src="images/play05.jpg" alt="">
a>
li>
ul>
<div class="control-list">
<span class="current">1span>
<span>2span>
<span>3span>
<span>4span>
div>
<div class="control-sider">
<span class="control-left">
<i class="fa fa-chevron-left">i>
span>
<span class="control-right">
<i class="fa fa-chevron-right">i>
span>
div>
div>
div>
<div class="clearfix">div>
<div class="page-hero container">
<div class="tag-list leftfix">
<ul>
<li>
<a href="#"> <i class="fa fa-mobile-phone">i><br> 选购手机 a>
li>
<li class="left-line">
<a href="#"><i class="fa fa-mobile-phone">i><br>选购手机a>
li>
<li class="left-line">
<a href="#"><i class="fa fa-mobile-phone">i><br>选购手机a>
li>
<li class="top-line">
<a href="#"><i class="fa fa-mobile-phone">i><br>选购手机a>
li>
<li class="left-line top-line">
<a href="#"><i class="fa fa-mobile-phone">i><br>选购手机a>
li>
<li class="left-line top-line">
<a href="#"><i class="fa fa-mobile-phone">i><br>选购手机a>
li>
ul>
div>
<div class="banner-list rightfix">
<ul>
<li class="leftfix">
<a href="#">
<img src="images/b1.jpg" alt="">
a>
li>
<li class="leftfix">
<a href="#">
<img src="images/b2.jpg" alt="">
a>
li>
<li class="leftfix">
<a href="#">
<img src="images/b3.jpg" alt="">
a>
li>
ul>
div>
div>
<div class="clearfix">div>
<div class="page-main">
<div class="container">
<div class="phone">
<div class="title-box">
<h2 class="leftfix">手机h2>
<a href="#" class="more rightfix">
查看全部
<i class="fa fa-chevron-circle-right">i>
a>
div>
<div class="clearfix">div>
<div class="content-box">
<div class="content-box-image leftfix">
<a href="#">
<img src="images/p1.jpg" alt="">
a>
div>
<div class="product-list rightfix">
<ul>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器哈哈哈哈
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
<div class="flag">
减20元
div>
<a class="product-message" href="#">
<p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...p>
<p class="author"> 来自于 陈金壮 的评价 p>
a>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
<a class="product-message" href="#">
<p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...p>
<p class="author"> 来自于 陈金壮 的评价 p>
a>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
<a class="product-message" href="#">
<p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...p>
<p class="author"> 来自于 陈金壮 的评价 p>
a>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
<a class="product-message" href="#">
<p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...p>
<p class="author"> 来自于 陈金壮 的评价 p>
a>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">
a>
div>
<h3 class="product-title">
<a href="#">红米6Aa>
h3>
<p class="product-des">
AI人脸解锁，小巧全面屏，高性能处理器
p>
<p class="product-price">
<span>597元span>
<del>998元del>
p>
li>
<li class="product-item leftfix">
<div class="product-image">
<a href="#">
<img src="images/product01.jpg" alt="">