HTML+CSS完成的oppo页面

♡ 小宸轩的前端

已于 2022-09-30 16:23:07 修改

阅读量1.9k

点赞数 8

文章标签： css html css3

于 2021-11-12 10:58:48 首次发布

本文链接：https://blog.csdn.net/qq_43601848/article/details/121283576

版权

html部分


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fairy的OPPO小店</title>
    <link rel="stylesheet" href="./css/oppo.css">
</head>

<body>
    <div class="w">
        <div class="logon">
            <ul>
                <li>
                    <a href="#">登录</a>
                </li>
                <li>
                    <a href="#">注册</a>
                </li>
                <li>
                    <a href="#">fairy</a>
                </li>
            </ul>
        </div>
        <header class="header">
            <div class="logo">
                <img src="./images/oppologo.png" alt="">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">商城</a></li>
                    <li><a href="#">体验店</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">ColorOS</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
        </header>
        <div class="banner">
            <img src="./images/Router.jpg" alt="">
        </div>
        <div class="oppo">
            <ul>
                <li>
                    <img src="./images/oppo1.png" alt="">
                    <p>R9s玫瑰金 前后1600像素</p>
                    <span>￥2799.00</span>
                    <em class="baokuan"></em>
                </li>
                <li>
                    <img src="./images/oppo2.png" alt="">
                    <p>R9s 黑色版 全新配色</p>
                    <span>￥2799.00</span>
                    <em class="baokuan"></em>
                </li>
                <li>
                    <img src="./images/oppo3.png" alt="">
                    <p>R9 Plus 玫瑰金 6G+64GB</p>
                    <span>￥3499.00</span>
                </li>
                <li>
                    <img src="./images/oppo4.png" alt="">
                    <p>RR9 Plus 黑色版 大屏拍照旗舰</p>
                    <span>￥2799.00</span>
                </li>
                <li>
                    <img src="./images/oppo5.png" alt="">
                    <p>A57玫瑰金 1600万美颜自拍</p>
                    <span>￥1599.00</span>
                    <em class="xinpin"></em>
                </li>
                <li>
                    <img src="./images/oppo6.png" alt="">
                    <p>A57 黑色版 全新配色</p>
                    <span>￥1599.00</span>
                </li>
                <li>
                    <img src="./images/oppo7.png" alt="">
                    <p>A59s 玫瑰金 1600万金属自拍神器</p>
                    <span>￥1999.00</span>
                </li>
                <li>
                    <img src="./images/oppo8.png" alt="">
                    <p>A37 玫瑰金 留住美一刻</p>
                    <span>￥1199.00</span>
                </li>

            </ul>
        </div>
        <div class="oppo">
            <ul class="clearfix">
                <li>
                    <img src="./images/other1.jpg" alt="">
                    <p>VOOC闪充电源适配器AK779</p>
                    <span>￥79.00</span>
                </li>
                <li>
                    <img src="./images/other2.jpg" alt="">
                    <p>原装电源适配器CF1001</p>
                    <span>￥29.00</span>
                </li>
                <li>
                    <img src="./images/other3.jpg" alt="">
                    <p>VOOC闪充usb数据线DL118</p>
                    <span>￥29.00</span>
                </li>
                <li>
                    <img src="./images/other4.jpg" alt="">
                    <p>原装usb数据线</p>
                    <span>￥19.00</span>
                </li>
                <li>
                    <img src="./images/other5.png" alt="">
                    <p>OPPO原装入耳式耳机MI130白色</p>
                    <span>￥59.00</span>
                </li>
                <li>
                    <img src="./images/other6.png" alt="">
                    <p>OPPO时尚单品自拍杆 晴空蓝</p>
                    <span>￥39.00</span>
                </li>
                <li>
                    <img src="./images/other7.png" alt="">
                    <p>R9s液态硅胶保护壳 白色</p>
                    <span>￥49.00</span>
                </li>
                <li>
                    <img src="./images/other8.png" alt="">
                    <p>R9s液态硅胶保护壳 河畔蓝</p>
                    <span>￥49.00</span>
                </li>

            </ul>
        </div>
        <footer class="footer">
            <div class="services">
                <img src="./images/services.png" alt="">
            </div>
            <div class="info">
                <dl>
                    <dt>推荐机型</dt>
                    <dd>R9s</dd>
                    <dd>R9s Plus</dd>
                    <dd>A57</dd>
                    <dd>A59s</dd>
                </dl>
                <dl>
                    <dt>在线购买</dt>
                    <dd>官方商城</dd>
                    <dd>购物指南</dd>
                    <dd>官方授权网点</dd>
                </dl>
                <dl>
                    <dt>服务</dt>
                    <dd>服务网点查询</dd>
                    <dd>零配件价格查询</dd>
                    <dd>云服务</dd>
                </dl>
                <dl class="our">
                    <dt>关于我们</dt>
                    <dd>关于OPPO</dd>
                    <dd>加入我们</dd>
                    <dd>发布会回顾</dd>
                </dl>
                <div class="online">
                    <img src="./images/icon-online.png" alt="">
                    <p>4001-666-888</p>
                    <i>(24小时全国服务热线)</i>
                </div>
            </div>
            <p>2005-2021 OPPO版权所有 粤ICP备981016 联系方式：17761678680</p>
            <span></span>
            <div class="me">
                <i>关注我们：</i>
                <img src="./images/sina_03.png" alt="">
            </div>

        </footer>
    </div>
    </div>

</body>

</html>

css部分

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1350px;
    margin: 0 auto;
}
.clearfix::after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
.logon {
    height: 40px;
    line-height: 40px;
    background-color: #009b72;
}
.logon ul {
    margin-right: 85px;
    float: right;
}
.logon ul li {
    float:left;
    border-left: 1px solid #fff;
}
.logon ul li a {
    padding: 0 20px;
    color: #fff;
}
.header {
    height: 56px;
    line-height: 56px;
    margin: 11px 0;
    /* background-color: pink */
}
 .logo {
    float: left;
    margin-left: 80px;
    height: 56px;
}

.nav {
    float: right;
    margin-right: 90px;
}

.nav li{
    float: left;
    margin: 0 20px;
}
.nav li a {
    font-size: 18px;
    color: #666;
}
.nav li a:hover {
    color: #333;
    border-bottom: 2px solid #009b72;
}
.banner {
    height: 570px;
}
.banner>img {
    width: 100%;
    height: 100%;
}
.oppo {
    margin: 70px auto;
    width: 1180px;
    height: 942px;
    /* background-color: pink; */
}
.oppo ul li {
    position: relative;
    float: left;
    width: 294px;
    height: 470px;
    /* background-color: #009b72; */
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    text-align: center;
}
.oppo .baokuan {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px;
    height: 68px;
    background: url(../images/ribbon-icon-cheap.png);
}
.oppo .xinpin {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px;
    height: 68px;
    background: url(../images/ribbon-icon-new.png);
}
.oppo ul li>img {
    width: 200px;
    margin-top: 100px;
}
.oppo ul li p {
    margin: 45px 0;
}
.oppo ul li span {
    color: #009b72;
    font-weight: 700;
}
.footer {
    padding: 0 85px;
    height: 525px;
    background-color: #f6f6f6;
    /* text-align: center; */
}
.services>img {
    width: 1176px;
    height: 128px;
    margin: 30px 0;
}
.info {
    height: 220px;
    /* background-color: #009b72; */
    border-bottom: 2px solid #ccc;
    margin-bottom: 30px;
}
.info dl {
    float: left;
    margin-right: 155px;
}
.info .our {
    margin-right: 0;
}
.info .online {
    margin-right: 0;
}
.info dl dt {
    margin: 20px 0;
    font-size: 16px;
    color: #333;
}
.info dl dd {
    margin-bottom: 13px;
    font-size: 14px;
    color: #666;
}
.info .online {
    float: right;
    margin: 20px 0;
}
.online>p {
    font-size: 26px;
    margin-top: 24px;
}
.online>i {
    font-style: normal;
}
.footer>p {
    float: left;
    
    color: #666;
}
.footer>span {
    display: block;
    float: left;
    width: 25px;
    height: 27px;
    margin-left: 5px;
    background: url(../images/icon-identification.png) no-repeat 0 0;
}
.me {
    float: right;
    height: 30px;
    line-height: 30px;
}
.me i {
    font-style:normal;
}

图片部分: 图片太多不方便上传如果需要请自取

地址："https://pan.baidu.com/s/1AK4L_hofJKyajU4ngg2LDA "
密码：f9z7

部分效果展示: