• 首页

    • 求人帮忙写一段HTML代码，实现图中的效果

    规格：总宽度650 图片宽度120*120 使用HTML文件所在文件夹的图片 价格我我可以自己改 商品标题我可以自己改 图片和文字指向的超级链接地址我可以替换
    本人HTML小白 不懂， 求指导

    推荐答案   推荐于2016-03-17
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表</title>
    <style type="text/css">
    ul{ padding:0;margin:0;width:650px; }
    ul li{ list-style:none; }
    ul:after{ clear:both;content:'';display:block;height:0; }
    ul li{ width:150px;float:left;box-sizing:border-box;border:1px solid #CCC;margin:5px 5px;padding:10px; }
    ul li img{ width:120px;height:120px;margin:10px auto;display:block; }
    ul li a{ color:#666666;font-size:12px;text-decoration:underline; }
    ul li p{ color:#900;font-weight:bold;font-size:12px; }
    ul li p span{ color:#666;font-weight:normal; }
    </style>
    </head>
    <body>
    <ul>
        <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
                <a href="#">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
        </ul>
    </body>
    </html>

    追问

    谢谢
    请问图片和标题指向的网址链接写在哪里?
    还有,我使用的是本地的图片

    追答<ul>
        <li>
            <a href="这里是图片链接"><img src="本地图片地址" /></a>
                <a href="这里是标题链接">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <a href="这里是图片链接"><img src="本地图片地址" /></a>
                <a href="这里是标题链接">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <a href="这里是图片链接"><img src="本地图片地址" /></a>
                <a href="这里是标题链接">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
            <li>
            <a href="这里是图片链接"><img src="本地图片地址" /></a>
                <a href="这里是标题链接">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
        </ul>

    如果你是想把代码放在网络上访问，那么本地图片是不能用的。

    追问

    我原先的模板代码都是这样的
    我想把你给我写的这个放在前面 使用软件上传 请问不一样会不会影响啊
    附一段我的代码的开头:

    追答ul.ice{ padding:0;margin:0;width:650px; }
    ul.ice li{ list-style:none; }
    ul.ice:after{ clear:both;content:'';display:block;height:0; }
    ul.ice li{ width:150px;float:left;box-sizing:border-box;border:1px solid #CCC;margin:5px 5px;padding:10px; }
    ul.ice li img{ width:120px;height:120px;margin:10px auto;display:block; }
    ul.ice li a{ color:#666666;font-size:12px;text-decoration:underline; }
    ul.ice li p{ color:#900;font-weight:bold;font-size:12px; }
    ul.ice li p span{ color:#666;font-weight:normal; }<ul class="ice">
        <li>
            <a href="这里是图片链接"><img src="本地图片地址" /></a>
                <a href="这里是标题链接">这里应该是商品标题也就是图片下方文字</a>
                <p>US $ 8.6<span>/set</span></p>
            </li>
    </ul>


    把上面对应代码加一个class名就不会有影响了，这里加的是ice，复制粘贴就可以了。

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2015-03-24
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

    <html xmlns="
    <head runat="server">
        <title></title>
        <script type="text/javascript">
        </script>
    <style type="text/css">
        a
        {
        color:Black;
        }
        td
        {
            border:solid black 1px;
        }
        div
        {
            font-size:15px;
        }
    </style>
    </head>
    <body>
        <table cellspacing="10px">
        <tr>
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        </tr>
        <tr>
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        <td><img src="1.png" width="120x" height="120px" /><div><a href="
        </tr>
        </table>
    </body>
    </html>

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    相关问题
    求看效果图写一段html代码
    求一段html网页的图片效果代码
    按图片帮忙写一段html代码，谢谢。
    求帮忙写一段html代码
    请熟悉html代码的朋友帮忙修改一段网页图片滚动效果的代码
    帮写一段图片从左向右慢慢移动的HTML代码，谢了！
    写一段代码，只能用HTML+CSS，达到图片的效果
    求帮忙写一个html或者js代码，实现访问网站弹出一个提示框...

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网