OPPO网页制作（未完成）_oppo网页 html-CSDN博客

本文链接：https://blog.csdn.net/weixin_59337864/article/details/128023408

html

注意特殊的用id平常的用class

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

<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>oppo</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <!-- 特殊的用id平常的用class -->
    <!-- 顶部 -->
    <div id="top">
        <div class="container"></div>
    </div>
    <!-- 头部 -->
    <div id="header">
        <div class="container">
            <div class="header-left left">
                <div class="xlwb"></div>
                <div class="txwb"></div>
                <div class="tel">4001-666-888</div>
            </div>
            <ul class="right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">积分兑换</a></li>
                <li><a href="#">帮助中心</a></li>
                <li class="shop-car"><span></span><a href="#">购物车</a></li>
            </ul>
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <div class="container">
            <div class="nav-left left">
                <div class="biglogo"><img src="img/logo.png" alt=""></div>
            </div>
            <ul class="right">
                <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="#">软件商店</a></li>
                <li><a href="#">ColorOS</a></li>
            </ul>
        </div>
    </div>
    <!-- banner图 -->
    <div id="banner">
        <div class="container"></div>
    </div>
    <!-- 明星机型 -->
    <div id="star">
        <div class="container">
            <div class="star-top">
                <img src="img/i-c-title.png">
            </div>

        </div>
        <ul>
            <li>
                <div>
                    <img src="img/20141030152751NRihyRENa7.jpg" alt="">
                    <h3>N3</h3>
                    <p>1600万电动旋转摄像头</p>
                    <p class="money">&yen;3999立即购买<span></span></p>
                </div>
            </li>
            <li class="line"></li>
            <li>
                <div>
                    <img src="img/20141029162235J7aJmCHkFm.jpg" alt="">
                    <h3>R5</h3>
                    <p>薄至4.85mm</p>
                    <p class="money">&yen;2999立即购买<span></span></p>
                </div>
            </li>
            <li class="line"></li>
            <li>
                <div>
                    <img src="img/20150120092342k2ABsEHnQN.jpg" alt="">
                    <h3>R1C</h3>
                    <p>钻石流光镜面</p>
                    <p class="money">&yen;2999立即购买<span></span></p>
                </div>
            </li>
            <li class="line"></li>
            <li>
                <div>
                    <img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
                    <h3>A31</h3>
                    <p>镜在掌控</p>
                    <p class="money">&yen;999立即购买<span></span></p>
                </div>
            </li>
        </ul>
    </div>
    <!-- 精选配件 -->
    <div id="accessory">
        <div class="container">
            <div class="accessory-top">
                <img src="img/wb.png" alt="">
            </div>
            <div class="acc-main">
                <div class="acc-left left">
                    <div>
                        <img src="img/20150413174400N0dPnxUKHk.jpg" alt="">
                    </div>
                    <div class="acc-all">
                        <p>oppo手机官网ACCESSORY配件</p>
                        <ul>
                            <li>耳机</li>
                            <li>电源</li>
                            <li>保护壳</li>
                            <li>贴膜</li>
                            <li>皮套</li>
                            <li>数据线</li>
                        </ul>
                        <h2 class="line"></h2>
                        <p>全部配件<span></span></p>
                    </div>
                    <div>
                        <img src="img/20131120165101xYIYzhkVEy.jpg" alt="">
                    </div>
                    <div>
                        <img src="img/20150413174340NLV2gvV4FU.jpg" alt="">
                    </div>
                </div>
                <div class="acc-right right">
                    <div>
                        <img src="img/20150123182505RO822scYYt.jpg" alt="">
                    </div>
                    <div>
                        <img src="img/20141230145609l7Fsk7CdHy.jpg" alt="">
                    </div>
                    <div>
                        <img src="img/20141011101157yZEFpMrk0h.jpg" alt="">
                    </div>
                    <div>
                        <img src="img/201410270957132inlm3IwsV.jpg" alt="">
                    </div>
                </div>
            </div>

        </div>
    </div>



    <!-- 搜索oppo -->
    <div id="world">
        <div class="container"></div>
    </div>
    <!-- 售后 -->
    <div id="after-sale">
        <div class="container"></div>
    </div>
    <!-- 服务 -->
    <div id="serve">
        <div class="container"></div>
    </div>
    <!-- 底部 -->
    <div id="footer">
        <div class="container">
            <div class="footer-left left">
                <div class="oppo">
                    <img src="img/i-f-logo.png" alt="">
                </div>
                <div class="icp">©&nbsp;2005&nbsp;-&nbsp;2015&nbsp;东莞市永盛通信科技有限公司&nbsp;版权所有(粤ICP备08130115号)</div>
            </div>
            <ul class="right">
                <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>
            </ul>
        </div>
    </div>
</body>

</html>

css

先设置全局的浮动
当选取大div里面的小的div用：div:first-child
让这个div有一个动态的简易效果：transform
想在一个大图片里面找一个小的图片：background: url(…/img/icons.png) no-repeat 0 -96px;
当在同一行内加入一张图片，需要在html后边加入span标签，css：display: inline-block;

* {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

/* 测试 */
ul,
ol {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

#header,
#top,
#nav,
#banner,
#star,
#accessory,
#world,
#after-sale,
#serve,
#footer {
    height: 100px;
    width: 100%;
    border: 1px solid #ccc;
}

.container {
    width: 1280px;
    border: 1px solid #f00;
    margin: 0 auto;
}

/* 顶部样式 */
#top {
    height: 5px;
    background: rgb(0, 146, 95);
}

/* 头部样式 */
#header {
    height: 30px;
    background-color: rgb(45, 45, 45);
}

#header .xlwb {
    width: 20px;
    height: 17px;
    background: url(../img/icons.png) no-repeat -47px -95px;
}

#header .txwb {
    width: 17px;
    height: 20px;
    background: url(../img/icons.png) no-repeat -26px -92px;
}

#header .tel {
    color: rgb(0, 146, 95);
}

#header .shop-car a {
    border: none;
    padding-left: 8px;
}

#header .shop-car span {
    width: 20px;
    height: 17px;
    display: inline-block;
    background: url(../img/icons.png) no-repeat 0 -96px;
    margin-left: 10px;
    vertical-align: middle;
}

#header .header-left div {
    float: left;
    margin: 5px 15px 0;
}

#header ul li {
    float: left;
    line-height: 30px;
}

#header li a {
    color: rgb(178, 178, 178);
    border-right: 1px solid rgb(178, 178, 178);
    padding: 0 15px;
}

#header li a:hover {
    color: rgb(0, 146, 95);
}

/* 导航样式 */
#nav {
    height: 75px;
    background: rgb(238, 238, 238);
}

#nav ul li {
    float: left;
    line-height: 30px;
    margin: 25px 0 0;
}

#nav li a {
    color: rgb(102, 102, 102);
    font-weight: bold;
    padding: 0 20px;
}

/* 明星机型样式 */
#star {
    height: 1000px;
    background-color: rgb(242, 242, 242);
}

#star .star-top {
    text-align: center;
    margin: 15px;
}

#star ul {
    width: 1265px;
    margin: 0 auto;
}

#star ul li {
    float: left;
}

#star li div {
    border-bottom: 4px solid rgb(223, 223, 223);
    transform: all .3s;
}

#star li div:hover {
    border-bottom: 4px solid rgb(0, 146, 95);
    transform: translateY(-10px);
}

#star .line {
    width: 0px;
    height: 450px;
    border-right: 1px solid rgb(234, 234, 234);
    margin: 0 10px;
}

#star li img {
    width: 300px;
}

#star li h3 {
    text-align: center;
    margin-top: 30px;
}

#star li p {
    text-align: center;
    margin: 10px;
    font-size: 13px;
    color: rgb(188, 188, 188);
}

#star .money {
    color: rgb(0, 146, 95);
    font-size: 15px;
}

#star .money span {
    width: 13px;
    height: 13px;
    display: inline-block;
    background: url(../img/icons-1.png) no-repeat -177px -1014px;
    margin-left: 10px;
}

/* 精选配件样式 */
#accessory {
    height: 1000px;
    background-color: rgb(242, 242, 242);
    text-align: center;
}

#accessory .accessory-top {
    text-align: center;
    margin: 15px;
}

#accessory .acc-left {
    width: 540px;
}

#accessory .acc-left div {
    float: left;
    margin: 10px 10px;
    border-bottom: 4px solid rgb(223, 223, 223);
    transform: all .3s;

}

#accessory .acc-left div:hover {
    border-bottom: 4px solid rgb(0, 146, 95);
    transform: translateY(-10px);
}

#accessory .acc-left img {
    width: 250px;
}

#accessory .acc-left div:last-child img {
    width: 520px;
}

#accessory .acc-all {
    height: 247px;
    width: 250px;
    border: 4px solid #ccc;
    box-sizing: border-box;
    padding: 20px;
    background-color: #FFFFFF;
}

#accessory .acc-all p:first-child {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

#accessory .acc-all ul li {
    width: 100px;
    height: 40px;
    float: left;
    margin: 0 auto;
    color: #aaa;
    line-height: 40px;
    text-align: center;
}

#accessory .acc-all ul li:hover {
    color: #00925F;
}

#accessory .acc-all .line {
    width: 150px;
    margin: 0 auto;
    clear: both;
    border-bottom: 1px solid #ccc;
}

#accessory .acc-all p:last-child {
    text-align: center;
    color: #aaa;
    margin-top: 18px;
}

#accessory .acc-all span {
    width: 13px;
    height: 13px;
    display: inline-block;
    background: url(../img/icons-1.png) no-repeat -177px -1014px;
    margin-left: 10px;
}

#accessory .acc-main {
    width: 1100px;
    margin: 0 auto;
}

#accessory .acc-right {
    width: 540px;
}

#accessory .acc-right img {
    width: 250px;
}

#accessory .acc-right div:first-child img {
    width: 520px;
}

#accessory .acc-right div:last-child img {
    height: 240px;
}

#accessory .acc-right div {
    float: left;
    margin: 10px 10px;
    border-bottom: 4px solid rgb(223, 223, 223);
    transform: all .3s;
}

#accessory .acc-right div:hover {
    border-bottom: 4px solid rgb(0, 146, 95);
    transform: translateY(-10px);

}

/* 尾部样式 */
#footer {
    height: 45px;
    background-color: rgb(45, 45, 45);
}

/* #footer .oppo {
    width: 98px;
    height: 15px;
    background: url(../img/icons-1.png) no-repeat 431px 0;
} */

#footer .icp {
    color: rgb(108, 130, 119);
}

#footer .footer-left div {
    float: left;
    margin: 20px 10px 0;
}

#footer ul li {
    float: left;
    line-height: 30px;
    margin: 15px 0 0;
}

#footer li a {
    color: rgb(178, 178, 178);
    padding: 0 15px;
}