前端开发示范（H5+CS3）

浩宇(๑•̀ω•́๑)

已于 2022-03-26 21:25:01 修改

阅读量745

点赞数

文章标签： html5 css

于 2022-03-26 21:12:00 首次发布

本文链接：https://blog.csdn.net/qq_62695659/article/details/123763769

版权

以下为HTML骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iQOO首页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header w">
        <div class="logo">IQOO</div>
        <div class="nav">
            <ul>
                <li><a href="https://www.vivo.com.cn/originos" target="_blank">OriginOS Ocean</a></li>
                <li><a href="https://www.bilibili.com/video/BV1Qb4y1E7fV?from=search&seid=2867592220448534491&spm_id_from=333.337.0.0" target="_blank">IQOO新品</a></li>
                <li><a href="https://www.vivo.com.cn/service.html" target="_blank">服务</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="输入关键字">
            <button></button>
        </div>
        <div class="user">
             <ul>
                <li><a href="file:///D:/%E6%A1%8C%E9%9D%A2/IQOOweb%E5%BC%80%E5%8F%91%E7%9B%AE%E5%BD%95%E6%96%87%E4%BB%B6%E5%A4%B9/iQOO%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html?" target="_blank">登录</a></li>
                 <li><a href="file:///D:/%E6%A1%8C%E9%9D%A2/IQOOweb%E5%BC%80%E5%8F%91%E7%9B%AE%E5%BD%95%E6%96%87%E4%BB%B6%E5%A4%B9/iQOOhead%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2.html" target="_blank">注册</a></li>
             </ul>
        </div>
    </div>
    <div class="banner">     
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="https://shop.vivo.com.cn/product/list-1" target="_blank">手机 <span> &gt; </span></a></li>
                    <li><a href="https://shop.vivo.com.cn/product/list-8" target="_blank">手机充电 <span> &gt; </span></a></li>
                    <li><a href="https://shop.vivo.com.cn/product/list-73" target="_blank">手机配件 <span> &gt; </span></a></li>
                    <li><a href="https://shop.vivo.com.cn/product/list-9" target="_blank">音乐设备 <span> &gt; </span></a></li>
                    <li><a href="https://shop.vivo.com.cn/product/list-72" target="_blank">智能硬件 <span> &gt; </span></a></li>
                    <li><a href="https://shop.vivo.com.cn/product/list-165" target="_blank">游戏摄影 <span> &gt; </span></a></li>
                    <li><a href="https://shop.vivo.com.cn/product/list-137" target="_blank">日用出行 <span> &gt; </span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="goods w">
        <div class="goods-a">
        <ul>
            <li>
                <a href="https://shop.vivo.com.cn/product/phone" target="_blank"><img src="images/029.jpg" width="394" height="190" border="0"></a>
            </li>
            <li>
                <a href="https://shop.vivo.com.cn/product/parts" target="_blank"><img src="images/030.jpg" width="394" height="190" border="0"></a>
            </li>
            <li>
                <a href="https://shopact.vivo.com.cn/topic/TP444xab71f160/index.html?t=1644606230549" target="_blank"><img src="images/031.jpg" width="394" height="190" border="0"></a>
            </li>
        </ul>
        </div>
    </div>
    <div class="box w">
        <div class="box-hd">
            <h3>V秒杀</h3>
            <a href="https://shopact.vivo.com.cn/topic/TP4inyqr11km80/index.html?secChannel=2&tabId=2563&t=1644663037746" target="_blank">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <a href="https://shop.vivo.com.cn/product/10006815?skuId=121735" target="_blank">
                <li>
                    <img src="images/111.jpg">
                    <h4>
                        电子体重秤米白色
                    </h4>
                    <div class="info">
                        50元
                    </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10000538?skuId=121102" target="_blank">
                <li>
                    <img src="images/112.jpg">
                    <h4>
                        Type-C闪充充电器
                    </h4>
                    <div class="info">
                        89元
                    </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10001303?skuId=101660" target="_blank">
                <li>
                    <img src="images/113.jpg">
                    <h4>
                        USB数据线2A白色
                    </h4>
                    <div class="info">
                        9元
                    </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10005891?skuId=119268" target="_blank">
                <li>
                    <img src="images/114.jpg">
                    <h4>
                        多口原装超快闪充电器
                    </h4>
                    <div class="info">
                        95元
                    </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006719?skuId=121552" target="_blank">
                <li>
                    <img src="images/115.jpg">
                    <h4>
                        加湿器哆啦A梦ROCK
                    </h4>
                    <div class="info">
                        89元
                    </div>
                </li>
                </a>
            </ul>
        </div>
    </div>
    <div class="remai w">
        <div class="remai-a">
            <h2>热卖专区</h2>
        </div>
        <div class="remai-b">
            <ul class="clearfix">
                <a href="https://shop.vivo.com.cn/product/10007094?spuId=10007094&skuId=122469" target="_blank">
                    <li>
                        <img src="images/116.jpg">
                        <h3>iqoo 9 传奇版</h3>
                        <div class="info">
                            4399.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006793?spuId=10006793&skuId=121748" target="_blank">
                    <li>
                        <img src="images/117.jpg">
                        <h3>vivo X70 Pro 星云</h3>
                        <div class="info">
                            3699.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006278?spuId=10006278&skuId=120454" target="_blank">
                    <li>
                        <img src="images/118.jpg">
                        <h3>iqoo Neo5 夜影黑</h3>
                        <div class="info">
                            2399.00元
                        </div>
                    </li>
                </a>
            </ul>
        </div>
    </div>
    <div class="jingpin w">
        <div class="jingpin-a">
            <h2>精品手机</h2>
        </div>
        <div class="jingpin-b">
            <ul class="clearfix">
                <a href="https://shop.vivo.com.cn/product/10007048" target="_blank" class="datu">
                    <li>
                        <img src="images/119.jpg">
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006911?spuId=10006911&skuId=121895" target="_blank">
                    <li>
                        <img src="images/120.jpg">
                        <h3>vivo X70 星云</h3>
                        <div class="info">
                            3599.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10007094?spuId=10007094&skuId=122469" target="_blank">
                    <li>
                        <img src="images/121.jpg">
                        <h3>vivo T1 电光青</h3>
                        <div class="info">
                            1799.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006278?spuId=10006278&skuId=120454" target="_blank">
                <li>
                    <img src="images/122.jpg">
                    <h3>iQOO 9 传奇版</h3>
                    <div class="info">
                            4399.00元
                    </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006447?spuId=10006447&skuId=120857" target="_blank">
                <li>
                <img src="images/123.jpg">
                <h3>iQOO Neo5夜影黑</h3>
                <div class="info">
                            2399.00元
                </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006853?spuId=10006853&skuId=121811" target="_blank">
                <li>
                <img src="images/124.jpg">
                <h3>iQOO Neo5活力版</h3>
                <div class="info">
                            1799.00元
                </div>
                </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006795?spuId=10006795&skuId=121702" target="_blank">
                <li>
                <img src="images/125.jpg">
                <h3>iQOO Z5 蓝色起源</h3>
                <div class="info">
                            1799.00元
                </div>
                </li>
                </a>
            </ul>
        </div>
    </div>
    <div class="peijian w">
        <div class="peijian-a">
            <h2>精品配件</h2>
        </div>
        <div class="jingpin-b">
            <ul class="clearfix">
                <a href="https://shop.vivo.com.cn/product/10007073?spuId=10007073&skuId=122422" target="_blank">
                    <li>
                        <img src="images/126.jpg">
                        <h3>vivo WATCH 2</h3>
                        <div class="info">
                            1299.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006482?spuId=10006482&skuId=120981" target="_blank">
                    <li>
                        <img src="images/127.jpg">
                        <h3>vivo TWS 2</h3>
                        <div class="info">
                            499.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006789?spuId=10006789&skuId=121741" target="_blank">
                    <li>
                        <img src="images/128.jpg">
                        <h3>iQOO移动电源</h3>
                        <div class="info">
                            129.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10001130?spuId=10001130&skuId=121273" target="_blank">
                    <li>
                        <img src="images/129.jpg">
                        <h3>vivo 44W闪充套装</h3>
                        <div class="info">
                            149.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10002872?spuId=10002872&skuId=105157" target="_blank">
                    <li>
                        <img src="images/130.jpg">
                        <h3>iQOO 游戏手柄</h3>
                        <div class="info">
                            199.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006313?spuId=10006313&skuId=120567" target="_blank">
                    <li>
                        <img src="images/131.jpg">
                        <h3>iQOO 散热背夹</h3>
                        <div class="info">
                            169.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006770?spuId=10006770&skuId=121794" target="_blank">
                    <li>
                        <img src="images/132.jpg">
                        <h3>iQOO 立式充电器</h3>
                        <div class="info">
                            329.00元
                        </div>
                    </li>
                </a>
                <a href="https://shop.vivo.com.cn/product/10006965?spuId=10006965&skuId=122142" target="_blank">
                    <li>
                        <img src="images/133.jpg">
                        <h3>vivo XE110 耳机</h3>
                        <div class="info">
                            49.00元
                        </div>
                    </li>
                </a>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <a href="file:///D:/%E6%A1%8C%E9%9D%A2/IQOOweb%E5%BC%80%E5%8F%91%E7%9B%AE%E5%BD%95%E6%96%87%E4%BB%B6%E5%A4%B9/IQOO%E4%B8%BB%E9%A1%B5%E9%9D%A2head.html">
                <h1>IQOO</h1>
                </a>
                <p>全国客户服务热线7*24小时</p>
                <h3>400-678-9688</h3>
                <P>服务监督邮箱</P>
                <h3>iqoo@iqoo.com</h3>
                <a href="https://shopact.vivo.com.cn/topic/TP3rtu47l089g0/index.html"  target="_blank" class="app">下载APP</a>
            </div>
            <div class="links">
                <dl>
                    <dt>热门链接</dt>
                    <dd><a href="http://gallery.vivo.com.cn/" target="_blank">vivo摄影</a></dd>
                    <dd><a href="https://yun.vivo.com.cn/?ev=nbw#/welcome" target="_blank">查找手机</a></dd>
                    <dd><a href="https://www.vivo.com.cn/service/questions/all" target="_blank">常见问题</a></dd>
                </dl>
                <dl>
                    <dt>在线购买</dt>
                    <dd><a href="https://shop.vivo.com.cn/product/phone" target="_blank">选购手机</a></dd>
                    <dd><a href="https://shop.vivo.com.cn/product/parts" target="_blank">选购配件</a></dd>
                    <dd><a href="https://zhan.vivo.com.cn/activity/link/yjhx" target="_blank">以旧换新</a></dd>
                    <dd><a href="https://www.phonertech.com/" target="_blank">企业服务</a></dd>
                    <dd><a href="https://www.vivo.com.cn/service/vivocare" target="_blank">保障服务</a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="https://www.vivo.com.cn/store" target="_blank">体验店</a></dd>
                    <dd><a href="https://www.vivo.com.cn/service/appointment" target="_blank">预约维修</a></dd>
                    <dd><a href="https://topic.vivo.com.cn/activity/link/environmentalprotection" target="_blank">环保回收</a></dd>
                    <dd><a href="https://www.vivo.com.cn/service.html" target="_blank">服务首页</a></dd>
                </dl>
                <dl>
                    <dt>官方社区</dt>
                    <dd><a href="https://bbs.vivo.com.cn/newbbs/" target="_blank">社区首页</a></dd>
                    <dd><a href="https://weibo.com/vivomobile?is_hot=1" target="_blank">新浪微博</a></dd>
                    <dd><a href="http://tieba.baidu.com/f?kw=vivo&fr=ala0&tpl=5" target="_blank">百度贴吧</a></dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="https://hr.vivo.com/" target="_blank">工作机会</a></dd>
                    <dd><a href="https://www.vivo.com.cn/brand/news/list" target="_blank">新闻资讯</a></dd>
                    <dd><a href="https://dev.vivo.com.cn/" target="_blank">开放平台</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>
</html>

以下为与之配套的CSS，使之更加丰满，呈现出更好的效果。

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1350px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
    height: 3000px;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
/* 清除浮动 */
.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom:1;
}
.header {
    height: 42px;
    /*注意此地方会层叠w里面的margin*/
    /* background-color: aqua; */
    margin: 30px auto;
}
.logo {
    width: 180px;
    height: 42px;
    font-size: 42px;
    float: left;
}
.logo:hover {
        color: orange;
}
.nav {
    float: left;
    margin-left: 30px;
}
.nav ul li {
    float:left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
    text-decoration: none;
}
.nav ul li a:hover {
    border-bottom: 2px solid orange;
    color: orange;
}
.search {
    width: 412px;
    height: 42px;
    background-color: orange;
    margin-left: 50px;
    float: left;
}
.search input {
    float: left;
    width: 345px;
    height: 38px;
    border: px solid orange;
    border-right: 0;
    color:#050505;
    font-size: 20px;
    padding-left: 15px;
}
.search button{
    float: left;
    width: 50px;
    height: 42px;
    border: 0;
    background: url(images/sousuo.jpg);
}
.user {
    float: right;
    margin-left: 30px;
}
.user ul li {
    float:left;
    margin: 0 15px;
}
.user ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
    text-decoration: none;
}
.user ul li a:hover {
    border-bottom: 2px solid orange;
    color: orange;
}
.banner {
    height: 520px;
    /* background-color: #1c036c; */
    background: url(images/033.jpg) no-repeat top center;
}
/* .banner .w{ */
    /* height: 800px; */
    /* background: url(images/026.jpg) no-repeat top center; */
/* } */
.subnav {
    width: 190px;
    height: 520px;
    background: rgba(246, 247, 250, 0.904);
}
.subnav ul li {
    height: 76px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: rgb(16, 14, 22);
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: orange;
}
.goods {
    height: 200px;
    margin-top: 40px;
}
.goods-a ul {
    width: 1500px;
}
.goods-a ul li {
    float: left;
    width: 390px;
    height: 190px;
    margin-right: 91px;
    margin-bottom: 6px;
}
.goods-a ul li img {
    width: 100%;
}
.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
.box-bd ul {
    width: 1510px;
}
.box-bd ul li {
    float: left;
    width: 264px;
    height: 380px;
    background-color: #fff;
    margin-right: 8px;
    margin-bottom: 8px;
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 5px 75px 20px 85px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 90px 20px 100px;
    font-size: 30px;
    color: crimson;
}
.remai {
    margin-top: 30px;
}
.remai-a {
    height: 45px;
}
.remai-a h2 {
    text-align: center;
    font-size: 30px;
    color: #494949;
}
.remai-b ul {
    width: 1510px;
    margin-top: 20px;
}
.remai-b ul li {
    float: left;
    width: 445px;
    height: 540px;
    background-color: #fff;
    margin-right: 8px;
    margin-bottom: 8px;
}
.remai-b ul li img {
    width: 100%;
}
.remai-b ul li h3 {
    margin: 5px 100px 15px 130px;
    font-size: 25px;
    color: #050505;
    font-weight: 400;
}
.remai-b .info {
    margin: 0 90px 20px 140px;
    font-size: 30px;
    color: crimson;
}
.jingpin {
    margin-top: 30px;
}
.jingpin-a {
    height: 45px;
}
.jingpin-a h2 {
    text-align: center;
    font-size: 30px;
    color: #494949;
}
.jingpin-b  ul .datu li {
    display: block;
    width: 672px;
    height: 400px;
    line-height: 33px;
    color: orange;
}
.jingpin-b ul {
    width: 1510px;
    margin-top: 20px;
}
.jingpin-b ul li {
    float: left;
    width: 332px;
    height: 422px;
    background-color: #fff;
    margin-right: 8px;
    margin-bottom: 8px;
}
.jingpin-b ul li img {
    width: 100%;
}
.jingpin-b ul li h3 {
    margin: 5px 100px 15px 100px;
    font-size: 15px;
    color: #050505;
    font-weight: 400;
}

.jingpin-b .info {
    margin: 0 90px 20px 110px;
    font-size: 20px;
    color: crimson;
}
.peijian {
    margin-top: 30px;
}
.peijian-a {
    height: 45px;
}
.peijian-a h2 {
    text-align: center;
    font-size: 30px;
    color: #494949;
}
.peijian-b ul {
    width: 1510px;
    margin-top: 20px;
}
.peijian-b ul li {
    float: left;
    width: 332px;
    height: 422px;
    background-color: #fff;
    margin-right: 8px;
    margin-bottom: 8px;
}
.peijian-b ul li img {
    width: 100%;
}
.peijian-b ul li h3 {
    margin: 5px 100px 15px 100px;
    font-size: 15px;
    color: #050505;
    font-weight: 400;
}

.peijian-b .info {
    margin: 0 90px 20px 110px;
    font-size: 20px;
    color: crimson;
}
.footer {
    height: 415px;
    background-color: #fff;
    margin-top: 50px;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright h1 {
    font-size: 70px;
    color: orange;
}
.copyright h3 {
    font-size: 30px;
    color: orange;
    margin: 0 0 30px 0;
}
.copyright p {
    font-size: 20px;
    color: rgb(12, 12, 12);
    margin: 20px 0 0px 0;
}
.copyright .app {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid orange;
    text-align: center;
    line-height: 33px;
    color: orange;
    font-size: 16px;
}
.links {
    float: right;
}
.links dl {
    float: left;
    margin-left: 120px;
}
.links dl dt {
    font-size: 25px;
    color: #333;
    margin-bottom: 20px;
}
.links dl dd a {
    font-size: 20px;
    display: block;
    height: 50px;
    padding: 0 10px;
    line-height: 42px;
    color: #979292;
    text-decoration: none;
}
.links dl dd a:hover {
    border-bottom: 3px solid orange;
    color: orange;
}

浩宇(๑•̀ω•́๑)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发示范（H5+CS3）

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt.
复制链接

扫一扫