html 小项目_html个人项目-CSDN博客

本文链接：https://blog.csdn.net/qq_45425315/article/details/105147998

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h4{
            margin: 0px 0px;
            padding: 8px 0px;
        }
        #main{
            width: 170px;
            height: 364px;
            border: 1px solid #666;
            padding: 0px 14px;
            background-color: #fff;
            margin: 0 auto;
        }
        #img{
            width: 170px;
            height: 100px;
            padding: 0 0;
            margin: 0 0;
        }
        #xuyan{
            height: 40px;
            margin: 0 0;
            padding: 5px 5px;
        }
        h5{
            margin: 0 0;
            text-align: center;
        }
        #one{
            background-color: #666;
        }
        #two{
            margin: 0 0;
            padding: 8px 0px;
        }
        #three{
            font-size: 12px;
        }
        #four{
            font-size: 12px;
        }
        #four>a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
        <div id="main">
            <h4>众筹</h4>
            <div id="one">
                <div id="img">
                    <img src="img01.png" alt="无法显示">
                </div>
                <div id="xuyan">
                    <h5>苹果IC_WAAT革命</h5>
                    <p style="text-align: center;margin: 0;">一场艰难的战斗</p>
                </div>
            </div>
            <div id="two">
                <img src="./img03.jpg" alt="无法显示">
                <img src="./img04.png" alt="无法显示">
                <div id="three">
                    &nbsp;
                    <span>大圣原版手偶</span>
                    &nbsp;&nbsp;
                    <span>智能运动鞋</span>
                </div>
            </div>
            <div id="four">
                <a href="javascript:;">智能手表</a>
                <span>|</span>
                <a href="javascript:;">创意新品</a>
                <span>|</span>
                <a href="javascript:;">时尚家园</a>
                <span>[</span>
                <a href="javascript:;" style="color: red;">动漫周边</a>
                <span>]</span>
                <span>|</span>
                <a href="javascript:;">指纹手机</a>
            </div>
        </div>
</body>
</html>