一加手机官网全代码html.css

最新推荐文章于 2024-08-30 03:11:19 发布
最新推荐文章于 2024-08-30 03:11:19 发布
阅读量1.7k 收藏 10
点赞数 1
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57774021/article/details/125237826
版权
这篇博客分享了一加手机官网的HTML和CSS重构过程，旨在供读者参考和学习。内容包括新建HTML文件、应用两个CSS样式来构建页面布局。
摘要由CSDN通过智能技术生成

仅供参考，互相学习

实现大概就是这样，这里只选取三张图片

 

 

 新建一个html

<!DOCTYPE html>
<html lang="zh-CH">
<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>一加手机官网 -OnePlus 9系列，总有故事 被影像看见。</title>
  <!-- title图标 -->
  <link rel="icon" href="https://image01.oneplus.cn/shop/202003/19/677/7fa57f35c179bad9cc9f18e2dd9b1d40.ico?v=20200219" type="image/x-icon"/>
  <!-- icon图标 -->
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2475652_d2fwu36alp.css">
  <script src="http://at.alicdn.com/t/font_2475652_d2fwu36alp.js"></script>
  <!-- 本地css -->
  <link rel="stylesheet" href="css/index.css">
   <link rel="stylesheet" href="css/common.css">
</head>
<body>
  <!-- 顶部导航开始 -->
  <div class="header">
    <div class="nav" style="height: 45px;">
    <!-- logo部分开始 -->
      <div class="nav-left">
        <a href="#">
          <i class="iconfont icon-yijia"></i>
          <span>ONEPLUS</span>
        </a>
      </div>
      <!-- logo部分结束 -->
      <div class="nav-center">
        <ul class="h-nav-item">
          <li class="item-content">
            <a href="#">手机
              <span>New</span>
            </a>
            <div class="hidden-item-phone">
              <ul class="hidden">
                <li class="hidden-item">
                  <a href="#">
                    <span class="new">New</span>
                    <img src="img/10pro-l.jpg" alt="">
                    <p>OnePlus 9 Pro 5G</p>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <span class="new">New</span>
                    <img src="img/9R_Lake Blue.jpg" alt="">
                    <p>OnePlus 9 5G</p>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <img src="img/9WinterMist.jpg" alt="">
                    <P>OnePlus 8T</P>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <img src="img/9pro-L.jpg" alt="">
                    <P>OnePlus 8 Pro</P>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <img src="img/9rt.jpg" alt="">
                    <p>OnePlus 8</p>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="item-content">
            <a href="#">OnePlus Watch
              <span>New</span>
            </a>
          </li>
          <li class="item-content">
            <a href="#">配件</a>
            <div class="hidden-item-phone">
              <ul class="hidden">
                <li class="hidden-item">
                  <a href="#">
                    <span class="new">New</span>
                    <img src="img/Nav-ace-L.jpg" alt="">
                    <p>50W 无线充电器</p>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <img src="img/Buds-N-pc.jpg" alt="">
                    <P>OnePlus Buds Z</P>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <img src="img/BudsZ2_Navigation.jpg" alt="">
                    <P>OnePlus Buds</P>
                  </a>
                </li>
                <li class="hidden-item">
                  <a href="#">
                    <img src="img/Buds_Pro.jpg" alt="">
                    <p>城市旅行者背包</p>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="item-content">
            <a href="#">商城</a>
          </li>
          <li class="item-content">
            <a href="#">品牌</a>
          </li>
          <li class="item-content">
            <a href="#">服务</a>
          </li>
          <li class="item-content">
            <a href="collect.html">论坛</a>
          </li>
        </ul>
      </div>
      <div class="nav-right">
        <div href="#" class="nav-right-left">
          <i class="iconfont icon-yonghu"></i>
      <!-- 隐藏用户部分开始 -->
          <div class="hidden-user">
            <a href="#">
              <ul class="hidden-item">
                <li>订单</li>
                <li>账户</li>
                <li>推荐有礼</li>
                <li>
                  <a href="login.html"> 登录</a>
                </li>
              </ul>
            </a>
          </div>
          <!-- 隐藏用户部分结束 -->
        </div>
        <div href="#" class="nav-right-right">
          <i class="iconfont icon-gouwudaizi-"></i>
          
          <!-- 隐藏购物部分开始 -->
          <div class="hidden-gouwudai">
            <div class="hidden-text">
              <p>还差 ￥ 99.00 免邮</p>
            </div>
            <div class="goods">
              <div class="goods-box">
                <i class="iconfont icon-gouwudaizi-"></i>
                <p>您的购物车里没有商品！</p>
              </div>
            </div>
            <div class="box-bottom-text">
              <div class="text-border-box">
                <div class="text-border">
                  <p>购物车</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 隐藏购物部分结束 -->
        </div>
      </div>
    </div>
  </div>
  <!-- 顶部导航结束 -->

<!-- 图片内容开始 -->
  <div class="section">
    <img src="img/acepc-new.jpg" alt="">
    <div class="item-des">
      <p class="font-headline">OnePlus 9R 5G</p>
      <p class="font-subheading-t">硬核伙伴 实力集结</p>
      <p class="font-subheading-b">4 月 15 日 14:00 线上发布</p>
      <a href="#" class="item-more-top">
        了解详情
      </a>
    </div>
  </div>
  <div class="section">
    <img src="img/cello-lan-L.jpg" alt="">
    <div class="item-des">
      <p class="font-subheading-t">总有故事 被影像看见</p>
      <p class="font-headline">OnePlus 9Pro 5G</p>
      <p class="font-subheading-b">购机享两年官方质保服务。</p>
      <p class="price">¥ 4999 起</p>
      <a href="#" class="item-more-bottom">
        立即购买
      </a>
      <div class="learn-more">
        <a href="#">
          <span>了解产品</span>
          <i class="iconfont icon-dayu"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="section">
    <img src="img/Ace-L.jpg" alt="">
    <div class="item-des">
      <p class="font-subheading-t">总有故事 被影像看见</p>
      <p class="font-headline">OnePlus 9 5G</p>
      <p class="font-subheading-b">购机享两年官方质保服务。</p>
      <p class="price">¥ 3799 起</p>
      <a href="#" class="item-more-bottom">
        立即购买
      </a>
      <div class="learn-more">
        <a href="#">
          <span>了解产品</span>
          <i class="iconfont icon-dayu"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="section">
    <img src="img/cello-lan-L.jpg" alt="">
    <div class="item-des">
      <p class="font-subheading-t">带上去表现</p>
      <p class="font-headline">OnePlus Watch</p>
      <p class="font-subheading-b">手工抛光打磨 | 至长 14 天续航 | 110+ 运动模式  | 300+ 城市 <br> 地铁公交卡</p>
      <p class="price">¥ 999 起</p>
      <a href="#" class="item-more-bottom">
        立即预定
      &l
最低0.47元/天 解锁文章
okkkk666
关注
专栏目录
oppo官网首页html代码里,仿oppo官网手机商城建站模板html源码
weixin_32021363的博客
06-07 2149
OPPO仿建站模板html下载资源下载此资源下载价格为4D币，请先登录资源文件列表codedown123-0802-27/css/base.css,569codedown123-0802-27/css/style.css,8549codedown123-0802-27/img/1.jpg,273693codedown123-0802-27/img/10_23.jpg,10886co...
手机网站html源码
02-12
10几个手机网站源码，适合于移动端前端页面的开发与设计。
一加官网 一加官网首页 OnePlus
m0_55832273的博客
04-12 1539
此网页为静态网页 未使用JavaScript 使用了弹性盒子（flex）来布局 使用了SCSS（后有CSS）方法不唯一 仅供参考 [类名和注释均为随便起的，可能不太规范 仅供参考]。 HTML部分 <!DOCTYPE html> <html lang="zh-CH"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt.
Java+SSM+Vue手机官网源码+论文
最新发布
计算机毕业设计
08-30 772
代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹 赠送开题报告模板，帮助书写开题报告。开发软件：Eclipse、MyEclipse、IDEA都可以运行。⬇️文章末尾可以获取联系方式，需要源码或者演示视频可以联系⬇️。后端：Java+SSM框架。
手机网页(HTML+CSS)
2302_78381559的博客
06-11 697
前言本篇博客就不给大家讲解了，直接上代码💓 个人主页：普通young man-CSDN博客⏩ 文章专栏：若有问题 评论区见📝。
一加手机工程指令及部分其他手机
qq_45426487的博客
11-25 8633
转载：一加手机工程模式 指令 代码大全
一加手机 安卓代码 摄像头配置
05-17
摄像头配置
手机文档中的html代码,html代码什么意思？
weixin_42349277的博客
06-03 357
超文本标记语言(标准通用标记语言下的一个应用，外语缩写HTML)，是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML代码也就是HTML语言编写的文本。HTML文本是由HTML命令组成的描述性文本。HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。...
30个html5手机网站源码
02-28
30个html5手机网站源码，初学者学习比用，内含多个行业的源码
手机版html极速代码,index.html
weixin_31369469的博客
06-17 343
二当家的官网网站后台管理系统 if("ontouchend" in document) document.write(""+"");$(function(){var cid = $('#nav_list> li>.submenu');cid.each(function(i){$(this).attr('id',"Sort_link_"+i);})})jQuery(document)...
用HTML写一个简陋的一加官网
07-08
在本项目中，我们打算创建一个简易版的一加（OnePlus）官网，只使用HTML和CSS两种基础技术。HTML（HyperText Markup Language）是用于构建网页结构的语言，而CSS（Cascading Style Sheets）则负责定义这些网页的样式...
手机wap网页代码参考css
02-11
手机wap网页代码参考css，包含常用标签规范写法
最新手机版网站源码
07-22
手机网站源码，简洁大气，适合各类中小型企业做宣传站。
手机打开PC网站跳转至手机网站代码
06-20
手机用户端用手机打开PC网站跳转至手机网站代码
手机html界面大全
03-16
适用手机的60多个html、js前台界面模版,拿去用即可，不用花费时间自己写了
分享30个html5手机网站模板源码
05-18
最近有很多网友问我有没有手机网站和html5网站的模板源码，刚开始的时候没有，收集了一段时间就收藏了30个，整理好第一时间分享给大家，不需要资源分就可以下载，希望分享30个html5手机网站模板源码这个资源可以帮到大家。。。
打造简陋版一加官网：HTML与CSS入门实战
在本节内容中，我们将深入了解如何使用HTML和CSS来构建一个简单的网页，这个网页将模拟中国智能手机品牌一加（OnePlus）的官网界面。虽然名为"简陋"，但我们将确保它包含基本的结构和样式的实现。在构建过程中，我们...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6570
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)
linxuan0821的博客
01-26 2016
如何用html写一个电商网页主页 前言 目前我还在学习这个初阶段,如果有错误的地方或者没有做好的地方,还请诸位大佬指正,我会虚心学习,多谢了 正文 里面的东西 后面我会详细讲解内容 ps 这里是html代码 效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>电商</title> <link rel="stylesheet" type
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

okkkk666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值