Home > Article > Web Front-end > html css implements shopping display_html/css_WEB-ITnose
html css implements shopping display_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:071246browse
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> *{margin:0px;padding:0px;} #web{ width:1020px;height:345px;border:2px solid #660066; margin:40px auto; } #web .pic{width: ;height:} #web ul li { list-style-type:none; border-right:1px solid #D9D9D9; width:247px;height:265px; float:left;margin:2px 1px; position:relative; } #web ul li:hover{background:#FF9966} #web ul li .cls{ width:60px ;height:30px ;background:url("images/jg.png"); position:absolute;top:135px;left:97px;color:#FFF; font-family:"微软雅黑"; } #web .ll{border-right:none} #web ul li .cls .s1{ display:inline-block; font-size:13px;font-weight:bold; margin-top:13px; margin-left:4px; } #web ul li .cls .s2{ font-size:17px;/*font-weight:bold*/; } #web ul li p{ margin-top:20px; font-size:14px; text-align:center; } #web ul li p span{ background:#FFEBEC;color:#FD2248; /*border-radius:3px;*/margin:9px; } #web ul li a{ display:block; width:90px;height:20px; border-radius:4px; margin:20px auto; background:#FFEBEC; font-size:16px; color:#CC0000; text-decoration:none; text-align:center; } </style> </head> <body> <div id="web"> <img src="images/title.png" class="pic"/> <ul> <li><img src="images/1.jpg" /> <div class="cls"> <span class="s1">￥</span> <span class="s2">15</span> </div> <p><span>0.5折</span>..这是衬衫,白送,想要的qq我!</p> <a href="#">剩余12件</a> </li> <li><img src="images/2.jpg" /> <div class="cls"> <span class="s1">￥</span> <span class="s2">15</span> </div> <p><span>0.5折</span>..这是围巾,白送,想要的qq我!</p> <a href="#">剩余10件</a> </li> <li><img src="images/3.jpg" /> <div class="cls"> <span class="s1">￥</span> <span class="s2">15</span> </div> <p><span>0.5折</span>..这是筷子,白送,想要的qq我!</p> <a href="#">剩余6件</a> </li> <li class="ll"><img src="images/4.jpg" /> <div class="cls"> <span class="s1">￥</span> <span class="s2">15</span> </div> <p><span>0.5折</span>..这是大衣,白送,想要的qq我!</p> <a href="#">剩余17件</a> </li> </ul> </div> </body></html></span></strong> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn