admin 管理员组文章数量: 1087652
文成小盆友python
本部分主要内容
html － 基础
css － 基础
一.html 标签
html 文档标签树如下：
head 部分
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1.页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”><meta charset="UTF-8">
2.刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>< meta http-equiv=”Refresh“ Content=”5; Url=“ />
3.关键词
< meta name="keywords" content="赵文成，python，等等" >
4.描述
例如：....
5.X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
Title － 网页头部信息
<title>Welcom zhaowencheng</title>
Link
1.css
< link rel="stylesheet" type="text/css" href="css/common.css" >
2.icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如：< style type="text/css" >
.bb{ }
< /style> Script
1.引进文件
< script type="text/javascript" src=".js"> </script >
2.写js代码
< script type="text/javascript" > ... </script >
常用标签 -- body 内标签
标签一般分为两种：块级标签 和 行内标签
<!--内联和块级--><div style="background-color: red;">12</div><span style="background-color: green;">12</span>
- a、span、select 等
- div、h1、p 等
p 和 br
p表示段落，默认段落之间是有间隔的！
<p> zhaowencheng ,,,,,,, zhaowencheng ,,, zhaowencheng ,,, </p><p>num2 zhao wen cheng zhao wen cheng ,,,,,,,, ,, zhaowencheng ... zhaowencheng .zhaowencheng ..zhaowencheng ...zhaowencheng </p>
br 是换行
<p> zhaowencheng ,,,,,,, zhaowencheng ,,, zhaowencheng ,,, </p><br>num2 zhao wen cheng zhao wen cheng ,,,,,,,, ,, zhaowencheng ... zhaowencheng .zhao</br>wencheng ..zhaowencheng ...zhaowencheng </p>
a标签
< a href=""> </a> <a href="">百度</a>
1、target属性，_black表示在新的页面打开
<a href="" target="_blank">跳转2</a>
2、锚 -- 相当于目录，在本页面中跳转
<a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a> <!--id没有一个标签的id属性值不允许重复；id属性可以不写--> <div id="i1" style="height: 500px";>第一章内容</div> <div id="i2" style="height: 500px";>第二章内容</div> <div id="i3" style="height: 500px";>第三章内容</div>
H 标签
<h1>a</h1><h2>a</h2><h3>a</h3><h4>a</h4><h5>a</h5><h6>a</h6>
select 标签
<p>下拉菜单:<select><option>上海</option><option>北京</option><option>深圳</option><option>广东</option><option>宁夏</option></select><select multiple size="10"><option>上海</option><option>北京</option><option>深圳</option><option>广东</option><option>宁夏</option><option>湖南</option><option>湖北</option><option>呼呼</option><option>那宁</option><option>吉林</option><option>hah</option><option>说的话</option><option>上地理课</option><option>哦哦</option><option>两秒</option></select><select><optgroup label="大城市"><option>上海</option><option>北京</option></optgroup><optgroup label="小城市"><option>深圳</option><option>广东</option><option>宁夏</option></optgroup></select> </p>
Checkbox
<p>爱好:(复选框)<br/> 汽车 <input type="checkbox" value="1"/><br/> 美女 <input type="checkbox" value="2"/><br/> 手表 <input type="checkbox" value="3"/> </p>
redio
<p>性别:(单选框)<br/> -- 男:<input type="radio" name="sex" value＝“1”/><br/> -- 女:<input type="radio" name="sex" value＝“2”/></p>
password
<p>用户名:<input type="text">密码:<input type="password"> </p>
button
<p> <input type="submit" value="submit"> <input type="button" value="button"> <input type="reset" value="reset"></p>
form
以上的标签在提交时会用到 submit 按钮。而这个按钮会提交当前 form中的内容 如：
<body><form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data"><p>用户名:<input type="text" name="yonghuming">密码:<input type="password" name="mima"></p><p>性别:(单选框)<br/> -- 男:<input type="radio" name="sex" value="nan"/><br/> -- 女:<input type="radio" name="sex" value="nv"/></p><p>爱好:(复选框)<br/> 汽车 <input type="checkbox" name="qiche" value="qiche"/><br/> 美女 <input type="checkbox" name="meinv" value="meinv"/><br/> 手表 <input type="checkbox" name="shoubiao" value="shoubiao"/></p><p>备注:<textarea name="beizhu"> </textarea></p><p><input type="submit" value="submit"></p></form></body>
table 标签
<body bgcolor="yellow"><table border="1" bgcolor="#deb887" align="center"><thead><tr><th>标题一</th><th>标题二</th><th>标题三</th><th>标题四</th></tr></thead><tbody><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td></tr></tbody></table> </body>
显示效果：
合并单元格：
<table border="1" bgcolor="#deb887" align="center"><thead><tr><th colspan="2">标题一</th><th>标题二</th><th>标题三</th></tr></thead><tbody><tr><td>内容一</td><td>内容二</td><td rowspan="2">内容三</td><td>内容四</td></tr><tr><td>内容一</td><td>内容二</td><td>内容四</td></tr><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td></tr></tbody></table>
效果如下：
小结
以上不主要内容
1.分类
2.符号
3.p,br,h
4.input － 系列
5.form
－action
－method
－enctype
6.select,textarea
7.ul/ol/dl
8.table
9.iftame, fileldest
10.div,span
二 css
css 可以存在的位置：
单独存放在css文件中 优先级最低
存在html文件的head部分 优先级处在中间
写在标签的属性中 优先级最高
css 选择器类型：
- 标签选择器
div｛color:green; ｝
- id选择器
＃i1｛ font－size:56px; ｝
- class选择器
.c1{color:red;
} - 层级选择器
.c2 div p c3{
color:red;
}或者：
.c2 div p a{
color:red;
} - 组合选择器
.c4,.c5,c6{
background-color:black
}
针对以上的选择器，应用分别如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><!--<link rel="stylesheet" href="common.css" />--><style>/*标签选择器，找到所有的标签应用以下样式*/div{color: green;}/*id选择器，找到标签id等于i1的标签，应用以下样式*/#i1{font-size: 56px;/* color: green; */}/*class选择器，找到class=c1的所有标签，应用一下样式*/.c1{background-color: red;}/*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*//*.c2 div p a{*//**//*}*/.c2 div p .c3{background-color: red;}/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/.c4,.c5,.c6{background-color: aqua;}</style>
</head>
<body><div class="c4">1</div><div class="c5">1</div><div class="c6">1</div><div class="c2"><div></div><div><p><span>oo</span><a class="c3">uu</a></p></div></div><div class="c3">sdfsdf</div><span class="c1">1</span><div class="c1">2</div><a class="c1">3</a><a id="i1">baidu</a><div>99</div><div>99</div><div>99</div><div><div>asdf</div></div>
</body>
</html> 常用的属性标签：
color
background
font－size
height
width
<style>.c1{color: red;/*background-color: #FF69B4;*//*background-color: rgb(25,180,10);*//*background-color: red;*/font-size: 32px;height: 150px;width: 500px; /* 按照父亲相对占比*/}
</style> 对于背景图片：
background－repeat －是否重复
background－position －显示图片的位置
<style>.img{background-image: url("4.gif");height: 150px;width: 400px;background-repeat: no-repeat;}.img2{background-image: url("2.jpg");height: 50px;width: 50px;background-position: 84px -58px;}</style> border － 边框
display －none －》全部隐藏 包括位置
display - inline －把块级标签变为内连标签
display - block －把内连标签变为块级标签
display - inline-block －同时具有着两个属性
边距标签：
margin 外边距 （本身不增加）
padding 内边距（本身宽度增加）
display
display:none
originaldisplay:block
自己动手 － 实例展示：
用到如上内容来个实例展示 先看下效果：
下面两个 分别是html代码 和css代码：
.tou{height: 20px;text-align: center;position: relative;z-index: 101;padding: 0px;background: #f7f7f7;border-bottom: 1px solid #eeeeee;
}.tou_all{height:20px;width: 1200px;margin: auto;background-color:#faf6f7;
}.tou_l{float: left; }
.tou_l li{margin-left:-35px;}.tou_r{float: right;}
.tou_r img { opacity:0.4;}.tou ul{display: block; list-style-type: none;}
.tou ul li{ float: left; padding: 0 10px 0 7px; cursor: pointer; font-size: 2px; margin-top:-11px;color: #969696;}/*头部第二部分*/
.tou2{height: 105px;text-align: center;position: relative;#background: #f7f7f7;
}
.tou2_all{height: 105px;width: 1200px;margin: auto;#background-color:rebeccapurple;
}.tou2_l{height:105px;width:390px;margin: auto;#background-color: #7cbe56;float: left;
}.tou2_m{height:105px;width:450px;margin: auto;#background-color: #7cce56;float: left;margin: -12px 0px 0px 0px;
}.tou2_r{height:105px;width: 230px;margin: auto;#background-color: #7c3456;float: right;margin: -12px 0px 0px 0px;
}.ganen{ padding:11px 0px 0px 0px ; }
.tou2_m1{ height: 36px; width: 420px; background-color: #038CAE; margin: 30px 0px 0px 0px;}
.search{outline: none; width: 350px; height: 30px; float: left;}
.fangdajing{outline: none; width: 64px; height: 36px; float: left;}
.hot_search{ font-size: 10px; float: left; color: #a1a1a1; }
.gouwuche{ background-color: #ececec;width: 150px;height: 36px;border: solid;border-color: #dfdfdf;border-style: outset;border: 1px;margin: 30px 0px 0px 0px;
}.gouwuche1{ #background-color: #ecece3;width: 70px;height: 36px;margin: 30px 0px 0px 16px;#float: left;
}
.gouwuche2{ #background-color: blue;width: 20px;height: 36px;margin: -36px 0px 0px 75px;float: left;color: red;
}
.gouwuche3{ #background-color: blue;width: 15px;height: 36px;margin: -36px 0px 0px 95px;float: left;color: red;
}
.gouwuche4{ #background-color: blue;width: 16px;height: 30px;margin: -36px 0px 0px 110px;float: left;color: red;
}
.gouwuche4 img {opacity: 0.4}.gouwchetest{font-size: 15px;color: #9da599;margin: 0px 0px 0px 0px;text-align: center;line-height: 36px;
}
.gouwuche2 p {color: red}/*头部第三部分*/
.tou3{height: 40px;text-align: center;position: relative;z-index: 101;padding: 0px;background: #e80606;border-bottom: 1px solid #313131;border-left: 1px solid white;border-right: 1px solid white;
}.tou3_all{height:40px;width: 1200px;margin: auto;background-color:#faf6f7;
}.tou3_l{height:40px;width:210px;margin: auto;background-color: #d20e0e;float: left;border-right: 1px solid white;
}
.tou3_m{height:40px;width:658px;margin: auto;background-color:#e80606;float: left;border-right: 1px solid white;
}
.tou3_r{height:40px;width:330px;margin: auto;background-color: #d20e0e;float: right;/*border: 1px dotted blue;*//*height: 10px;*/
}.quanbushangpin{color: white;margin: 13px;font-size: 15px;
}
.tou3_all ul{display: block; list-style-type: none;}
.tou3_all ul li{ float: left; padding: 0 10px 0 7px; cursor: pointer; font-size: 15px; margin-top: -13px; color: #ffffff; margin: -16px 15px 15px 0px; height: 40px; }
.tou3_all ul li:hover{ background-color: #b50202; }
.zhucaidan p{ margin: 13px 0px 0px 0px; }.zhong{background-color: #f7f7f7}.zhong_all{width: 1200px;margin: auto;background-color:#b2002e;
}.left_menu{#height: 300px;width:210px;margin: auto;#background-color: #d20e0e;float: left;border-right: 1px solid white;}.me_all{ border-right: 1px dotted #cac6c6; border-left: 1px dotted #cac6c6; border-bottom: 1px dotted #cac6c6; height:65px ;}
.big{ height:32px ;}
.small{height: 33px;}
.big p{margin: 0px 0px 0px 20px; font-size: 18px; padding: 16px 0px 0px 0px;}
.small p{ margin: -4px 0px 0px 20px; font-size: 12px; color: #979797; padding: 16px 0px 0px 0px;}
a{text-decoration: none;color: black}.me_blank{background-color: white; border-bottom: 1px dotted #cac6c6; height:25px ;}
.rexiaobang{background-color: #ececec; border: 1px dotted #cac6c6; height:35px ;}
.paihangbang p { margin: -4px 0px 0px 20px; font-size: 14px; color: #979797; padding: 16px 0px 0px 0px;}
.rexiaojuti{height: 33px; border-bottom: solid 1px #ececec;border-right: solid 1px #ececec;border-left: solid 1px #ececec}
.rexiaojuti p{ margin: -4px 0px 0px 20px; font-size: 12px; color: #979797; padding: 16px 0px 0px 0px;}.rexiao{#height: 300px;width:210px;margin: auto;#background-color: #d20e0e;float: left;border-right: 1px solid white;
}/*展示部分*/
.zhanshi{width: 970px; float: right; #height: 1000px; #background-color: #9a9a9a; margin: auto; }
.weizhi{width: 970px; #background-color: #038CAE;height: 50px; padding: 1px 0px 0px 0px;}
.jutiweizhi{ margin: 0px 0px 2px 7px; font-size: 13px; padding: 6px 0px 0px 0px;}
.fenlei_all{#background-color: #7cbe56;width: 968px;height: 180px;border-right: 1px solid #cac6c6;border-bottom: 1px solid #cac6c6;border-left: 1px solid #cac6c6;border-top-style: outset;border-top-color: #d20e0e; }
.jutifenlei{height:44px;#background-color: #7cbe56;width: 955px;margin: 0px 0px 0px 6px;border-top: 1px dotted #cac6c6;position: relative;
}
.juti_l{font-size: 15px;float: left;width: 100px;
}
.juti_l p{float: right;
}
.juti_r{font-size: 13px;float: right;width: 850px;margin: 4px 0px 0px 0px;color: #6b6868;
}.juti_r ul{display: block; list-style-type: none;}.juti_r ul li{ float: left; padding: 0 10px 0 7px; cursor: pointer; }
/*#.juti_r ul li:hover{ }*/.ewai{position:absolute;width:150px;height: 25px;background-color: white;margin: 0px 0px 0px 410px;border-right: 1px solid #cac6c6;border-bottom: 1px solid #cac6c6;border-left: 1px solid #cac6c6; }
.ewai p{margin: 4px 0px 0px 46px;font-size: 13px; }.paixu{height:35px;background-color: #ececec;margin: 35px 0px 0px 0px;border: 1px solid #cac6c6;
}.pai{width:60px;height: 35px;#background-color: #9a9a9a;float: left;
}
.pai p{font-size: 13px;color: #6b6868;margin: 11px 0px 0px 15px;
}.jia {width: 725px;height: 35px;#background-color: rebeccapurple;float: left;
}.jia ul{display: block; list-style-type: none;margin: 14px 0px 0px -39px;}.jia ul li{float: left;padding: 0px 15px 0px 11px;cursor: pointer;margin: -7px 0px 0px 0px;font-size: 13px;color: blue;}.gong{width:83px;height: 35px;#background-color: yellow;float: left;
}.gong1{width:15px;height: 35px;#background-color: yellow;float: left;
}
.gong2{width:25px;height: 35px;#background-color: red;float: left;color: red;
}.gong3{width: 43px;height: 35px;#background-color: green;float: left;
}.gong p{font-size: 13px;
}.shu{width:100px;height: 35px;#background-color: blue;float: right;}.shu_zi{font-size: 13px;
}
.ye1{float: left;color: red;
}
.ye2{float: left;
}.shu_tu{margin-top: 10px;}.tu1{float: left;margin: 1px -1px 0px 11px;
}.tu2{float: right;
}/*商品部分*/
.shangpin{width: 232px;float: left;height:260px;#background-color: #7cbe56;border:solid white 5px;}.kuang{width:230px;border: solid 1px red;height:258px;
}.w1{width: 220px;border-right: solid white 5px;border-left: solid white 5px;border-bottom: solid white 5px;height: 190px;}
.w1 p{margin: 0px 0px 0px 0px ;
}
.w2{width:230px;height: 25px;#background-color: #038CAE;}.w2 p{text-align: center;margin: auto;padding: 6px 0px 0px 0px;font-size: 14px; }.w3{width:220px;border-right: solid white 5px; border-left: solid white 5px; border-bottom: solid white 5px;#background-color: #2459a2;height:33px;}.jiage{float: left;width: 21px;height:33px;}.jiage p{margin: 8px 0px 0px 7px;}.jiage_shu{float: left;width: 40px;height:33px;
}.jiage_shu p{margin: 11px 0px 0px 10px;color: #9d201a;
}
.jiage_jian {float: left;width:18px;height:18px;#background-color: #7cbe56;margin: 8px 0px 0px 17px;border: solid 1px #a3a1a1;
}.jiage_jian p{margin: auto;}.jiage_zong {float: left;width:45px;height:18px;#background-color: #7cbe56;margin: 8px 0px 0px -1px;border: solid 1px #a3a1a1;
}.zhan{outline: none;width: 38px;height: 11px;float: left;margin: -16px 0px 0px 1px;
}
.jiage_jia {float: left;width:18px;height:18px;#background-color: #7cbe56;margin: 8px 0px 0px -1px;border: solid 1px #a3a1a1;
}.jiage_jia p{margin: auto;}.jiage_pian{float: left;width:25px;height:20px;#background-color: #7cbe56;margin: 8px 0px 0px 4px;
}.jiage_pian p{margin: auto ;
} css <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>欢迎光临</title><link rel="shortcut icon" href="img/iicc.ico"><link rel="stylesheet" href="css/commons.css"> </head> <body><div class="tou"><div class="tou_all"><ul class="tou_l"><li>*收藏本站</li></ul><ul class="tou_r"><li>登录</li><li>注册</li><li>我的订单</li><li>VIP会员俱乐部</li><li>客户服务<img src="img/xiala.png" width="7px" height="7px" align="center" ></li><li>关注</li><li>手机版</li></ul></div></div><div class="tou2"><div class="tou2_all"><div class="tou2_l" ><img class="ganen" src="img/ganen.png" width="180" height="80"></div><div class="tou2_m" ><div class="tou2_m1"><input class="search" type="text" ><a href=""><img class="fangdajing" src="img/fangdajing1.png" width="64" height="36px"></a></div><div class="tou2_m2"><p class="hot_search">热门搜索: 火龙果 瓜子</p></div></div><div class="tou2_r" ><div class="gouwuche"><div class="gouwuche1"><p class="gouwchetest">购物车</p></div><div class="gouwuche2"><p class="gouwchetest"><a href="/" >2</a></p></div><div class="gouwuche3"><p class="gouwchetest">件</p></div><div class="gouwuche4"><p class="gouwchetest"><a href=""><img src="img/xiala.png" width="8" height="8" ></a></p></div></div></div></div></div></div><div class="tou3"><div class="tou3_all"><div class="tou3_l"><p class="quanbushangpin">全部商品分类</p></div><div class="tou3_m"><ul class="zhucaidan"><li><p class="menu">首 页</p></li><li><p class="menu">网上超市</p></li><li><p class="menu">水果超市</p></li><li><p class="menu">超级订餐</p></li><li><p class="menu">生活娱乐</p></li><li><p class="menu">研究院</p></li></ul></div><div class="tou3_r"><ul class="zhucaidan"><li><p class="menu">货源直销</p></li><li><p class="menu">查看详情</p></li><li><p class="menu">给我留言</p></li></ul></div></div></div><!--中间部分--><div class="zhong" ><div class="zhong_all"><div class="left_menu"><div class="me_all"><div class="big"><p><B><a href="/">南方水果</a></B></p></div><div class="small"><p>火龙果 水龙果 土龙果</p> </div></div><div class="me_all"><div class="big"><p><B><a href="/">北方水果</a></B></p></div><div class="small"><p>火龙果 水龙果 土龙果</p> </div></div><div class="me_all"><div class="big"><p><B><a href="/">西方水果</a></B></p></div><div class="small"><p>火龙果 水龙果 土龙果</p> </div></div><div class="me_all"><div class="big"><p><B><a href="/">东方水果</a></B></p></div><div class="small"><p>火龙果 水龙果 土龙果</p> </div></div><div class="me_all"><div class="big"><p><B><a href="/">中原水果</a></B></p></div><div class="small"><p>火龙果 水龙果 土龙果</p> </div></div><div class="rexiao"><div class="me_blank"></div><div class="rexiaobang"><div class="paihangbang"><p><B><a href="/">热销排行磅</a></B></p></div></div><div class="rexiaojuti"><p>水龙果</p> </div><div class="rexiaojuti"><p>火龙果</p> </div><div class="rexiaojuti"><p>土龙果</p> </div></div></div><!--显示区--><div class="zhanshi"><div class="weizhi"><div class="jutiweizhi"><p>南方水果 > 火龙果 > 红色</p></div></div><div class="fenlei_all"><div class="jutifenlei"><div class="juti_l"><P><B>您已选择:</B></P></div><div class="juti_r"><ul><li>火龙果</li></ul></div></div><div class="jutifenlei"><div class="juti_l"><p><B>产地:</B></p></div><div class="juti_r"><ul><li>火龙果</li><li>火龙果</li><li>火龙果</li><li>火龙果</li><li>火龙果</li><li>火龙果</li></ul></div></div><div class="jutifenlei"><div class="juti_l"><p><B>品牌:</B></p></div><div class="juti_r"><ul><li>火龙果</li><li>火龙果</li><li>火龙果</li></ul></div></div><div class="jutifenlei"><div class="juti_l"><p><B>海外:</B></p></div><div class="juti_r"><ul><li>火龙果</li><li>火龙果</li><li>火龙果</li><li>火龙果</li><li>火龙果</li></ul></div></div><div class="ewai"><p><a href="">更多选项</a></a></p></div></div><div class="paixu"><div class="pai"><p>排序</p></div><div class="jia"><ul><li>价格<img src="img/xia.png" width="20px" height="15px"></li><li>销量<img src="img/xia.png" width="20px" height="15px"></li><li>最新<img src="img/shang.png" width="20px" height="15px"></li></ul></div><div class="gong"><div class="gong1"><p>共</p></div><div class="gong2"><p>366</p></div><div class="gong3"><p>件商品</p></div></div><div class="shu"><div class="shu_zi"><div class="ye1"><p>1</p></div><div class="ye2"><p>/23</p></div></div><div class="shu_tu"><div class="tu1"><a href=""><img src="img/zuo.png" width="20px" height="15px"></a></div><div class="tu1"><a href=""><img src="img/you.png" width="20px" height="15px"></a></div></div></div></div><!--商品展示部分--><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/shaosiming1.jpg"></p> </div><div class="w2"><p>秦时明月 少司命</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>69.00</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div><div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/yuji.jpg"></p></div><div class="w2"><p>秦时明月 虞姬</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>80.00</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div> <div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/shaosiming1.jpg"></p> </div><div class="w2"><p>秦时明月 少司命</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>69.00</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div><div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/zhuque.jpg"></p></div><div class="w2"><p>秦时明月 好多人</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>129.0</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div> <div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/tianming.jpg"></p></div><div class="w2"><p>秦时明月 天明</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>193.0</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div> <div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/shaosiming1.jpg"></p> </div><div class="w2"><p>秦时明月 少司命</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>69.00</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div><div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/tianming.jpg"></p></div><div class="w2"><p>秦时明月 天明</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>193.0</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div> <div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/shaosiming1.jpg"></p> </div><div class="w2"><p>秦时明月 少司命</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>69.00</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div><div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div><div class="shangpin"><div class="kuang"><div class="w1"><p><img src="img/zhuque.jpg"></p></div><div class="w2"><p>秦时明月 好多人</p></div><div class="w3"><div class="jiage"><p><img src="img/renminbi.png" width="20px" height="20px"></p></div><div class="jiage_shu"><p><B>129.0</B></p></div><div class="jiage_jian"><p><a href=""><img src="img/jian.png" width="18px" height="18px"></a></p></div><div class="jiage_zong"><p><input class="zhan" type="text" value="1"></p></div><div class="jiage_jia"><p><a href=""><img src="img/jia.png" width="18px" height="18px"></a></p></div><div class="jiage_pian"><p><img src="img/mai.png" width="25px" height="20px"></p></div></div></div></div></div></div></div> </body> </html>html
当然。。。 还有对应的image 。。 可以根据风格自定义。
转载于:.html
本文标签： 文成小盆友python
版权声明：本文标题：文成小盆友python 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687331424a90426.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论