前端-demo（天猫静态页面）

最新推荐文章于 2024-06-10 22:16:06 发布
最新推荐文章于 2024-06-10 22:16:06 发布
阅读量2.9k 收藏 22
点赞数 2
分类专栏： 前端 文章标签： 前端 小白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37964302/article/details/84193224
版权
这篇博客主要介绍了如何使用HTML和CSS来构建一个天猫的静态页面。通过这个项目，前端新手可以学习到基本的HTML标记结构和CSS样式设置，包括公共样式(common1)和首页样式(index1)的应用。
摘要由CSDN通过智能技术生成

HTML样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/common1.css">
    <link rel="stylesheet" href="../css/index1.css">
</head>

<body>
    <!-- <div id="banner">
    <a href="#" style="cursor:pointer;">
        <img src="../img/banner.jpg" alt="加载失败的说明" title="图片的解释说明">
    </a></div> -->
    <a href="#" id="banner1"></a>
    <div id="menu">
        <div class="wrap">
            <div id="left">
                <span>喵，欢迎来天猫 </span>
                <a href="#">请登录</a>
                <a href="#">免费注册</a>
            </div>
            <!-- <div id="right">adasddsa</div> -->
            <ul id="right">
                <li>
                    <a href="#">我的淘宝<div class="arrow-mark"></div></a>
                    <ul class="list-menu">
                        <li><a href="#">已买到的宝贝</a></li>
                        <li><a href="#">已卖出的宝贝</a></li>
                    </ul>

                </li>
                <li>

                    <a href="#"> <i class="iconfont icon-daohang"></i>购物车</a>

                </li>
                <li>
                    <a href="#">&nbsp;&nbsp;收藏夹<div class="arrow-mark"></div></a>
                    <ul class="list-menu">
                        <li><a href="#">收藏的宝贝</a></li>
                        <li><a href="#">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="list-img">

                    <a href="#"><i class="iconfont icon-shouji"></i>手机版</a>
                    <div class="sub-qr"> <img src="../img/二维码.png" class="qr"></div>
                </li>
                <li>
                    <a href="#">淘宝网</a>
                </li>
                <li>
                    <a href="#">商家支持<div class="arrow-mark"></div></a>
                </li>
                <li>
                    <a href="#">网站导航<div class="arrow-mark"></div></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="search">
        <div class="logio"><img src="../img/2.gif"></div>
        <div class="search-box">
            <div class="clear-fix">
                <input type="text" class="search-txt" placeholder="搜索 天猫 商品/品牌/店铺">
                <button class="search-but">搜索</button>
            </div>
            <ul class="search-list">
                <li><a href="#">针织衫</a></li>
                <li class="red"><a href="#">连衣裙</a></li>
                <li><a href="#">四件套</a></li>
                <li class="red"><a href="#">摄像头</a></li>
                <li><a href="#">客厅灯</a></li>
                <li class="red"><a href="#">口红</a></li>
                <li><a href="#">手机</a></li>
                <li class="red"><a href="#">运动鞋</a></li>
                <li><a href="#">牛奶</a></li>

            </ul>
        </div>
    </div>
    <div class="inner-cont">
        <a href="#"><img src="../img/天猫超市.png" alt=""></a>
        <a href="#"><img src="../img/天猫国际.png" alt=""></a>
        <a href="#">
            天猫会员
        </a>
        <a href="#">
            电器城
        </a>
        <a href="#">
            喵鲜生
        </a>
        <a href="#">
            医药馆
        </a>
        <a href="#">
            营业厅
        </a>
        <a href="#">
            魅力惠
        </a>
        <a href="#">
            飞猪旅行
        </a>
        <a href="#">
            苏宁易购
        </a>
    </div>
    <div class="
最低0.47元/天 解锁文章
Super--rookie
关注
  • 2
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6302
h5(html5)+css3+移动端前端 知识点详细总结
天猫静态页面
04-11
这是纯纯的静态页面，大家千万要看清楚，看看html和css倒是有用。
网站静态页面demo
05-30
完整的静态页面案例，有需要可以下载查看
使用html+css+js实现一个静态页面（含源码）
最新发布
网页设计与制作
06-10 1636
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
写一个简单的静态html页面demo，包含幻灯片
愤怒的阿木木的博客
06-27 2102
* 样式定义 *//* 动态效果 */
仿天猫静态页面 登陆/注册/首页/天猫超市页/购物车/手机列表页 Tmall.zip
04-08
仿天猫的静态页面 包括登陆/注册/首页/天猫超市页/购物车/手机列表页 纯HTML和CSS 无js互动效果 学习前端一个月的编写成果 各位大佬不喜轻喷.
8个静态网页模版
01-13
8个静态页面的模版，有后台的也有前台的。可作为普通小webdemo的页面
react-ponitor.zip_DEMO_node_now88z_reviews88_价格监控
09-21
服务端请求Ponitor应用的测试demo，说明项目不仅有前端部分，还有与之交互的后端服务，用于处理价格监控的逻辑和通知。 标签中的“demo”表示这是一个演示版本，用户可以体验并了解应用的基本功能。"node"再次强调...
前端面试总结九
我是谁的博客
11-10 413
1.vue的diff算法 Diff 作用 Diff 的出现，就会为了减少更新量，找到最小差异部分DOM，只更新差异部分DOM就好了，这样消耗就会小一些，数据变化一下，没必要把其他没有涉及的没有变化的DOM 也替换了。 Diff 做法 Vue 只会对新旧节点中 父节点是相同节点 的 那一层子节点 进行比较，也可以说成是，只有两个新旧节点是相同节点的时候，才会去比较他们各自的子节点。 最大的根节点一开...
(原创)springboot+springsecurity+redis+jwt+vue+iframe 做一个前后端分离的SSO单点登陆鉴权系统 类似淘宝天猫单点登陆
热门推荐
xuexishaguo的博客
12-20 3万+
1 前言 单点登陆系统，简单说就是用户登陆了www.aaa.com之后，再登陆www.bbb.com，就不需要重新输入用户名密码进行登陆，中间会有一个www.sso.com的验证中心。这点类似于淘宝 ，天猫，当然淘宝的验证中心域名是login.taobao.com，和www.taobao.com是同一个域名。要做到无缝登陆，就需要iframe这个技术，淘宝天猫也是用的iframe，iframe还...
web前端demo
03-05
一个简单的前端demo 青春，一半明媚，一半忧伤。 它是一本惊天地泣鬼神的着作，而我们却读的太匆忙。 于不经意间，青春的书籍悄然合上，以至于我们要重新研读它时， 却发现青春的字迹早已落满尘埃，模糊不清
前端demo代码
04-19
前端代码，几十个不同的demo，每一个目录是一个样例，样例中又具体代码
weex 入门Demo 前端
01-10
weex 入门Demo 前端 weex 入门Demo 前端 weex 入门Demo 前端
自己做的前端小demo
07-02
绘制地图，等echart图表，用css进行前端布局,实现媒体查询,自适应,js实现数字的千分符,css 的3d旋转动作效果,ajax请求。
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
天猫HTMl静态页面
Mr_HongZong的博客
02-28 4375
Hi大家好，这是我之前搭建的静态页面HTML+CSS+JS（页面是仿照天猫实现的），放忘了，今天翻到了，就分享给大家！ 前端页面搭建，美化,特效其实比后端有意思，给客户是直接的体验！ ...
前端小demo
wind_notcare的博客
03-09 318
前端小demo，每日一练
html+css静态页面学习 首页demo
fengxue_snow的博客
08-13 1161
1、最终效果图 在这里插入图片描述 2、html结构代码 <div class="header"> <div class="top clearfix"> <a href="javascript:;" class="logo fl"> <img src="img/logo.jpg"> </a> &lt...
前端页面 前端静态页面demo
05-16
这是一个简单的前端静态页面demo，包含了HTML、CSS和JS代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>前端静态页面Demo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Welcome to My Page</h1> <p>This is a demo of a static web page using HTML, CSS, and JS.</p> <div class="container"> <div class="box red"></div> <div class="box green"></div> <div class="box blue"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { text-align: center; margin-top: 50px; } p { text-align: center; margin-bottom: 50px; } .container { display: flex; justify-content: center; align-items: center; height: 200px; } .box { width: 100px; height: 100px; margin: 10px; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } ``` JS代码： ``` var boxes = document.querySelectorAll('.box'); for (var i = 0; i < boxes.length; i++) { boxes[i].addEventListener('click', function() { this.classList.toggle('active'); }); } ``` 这个页面包含一个标题、一段文字和一个由三个彩色方块组成的容器。当用户点击一个方块时，它将会切换到“活动”状态。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值