WEB前端作业三（3.14）

已于 2023-03-23 21:50:10 修改
阅读量85 收藏
点赞数
文章标签： 前端 css html Powered by 金山文档
于 2023-03-16 21:38:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63596823/article/details/129600692
版权

淘宝仿真

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>淘宝仿真</title>
        <style type="text/css">
            .goods{
                width: 220px;
                height: 360px;
                border: 1px solid #f40;
            }
            img{
                width: 220px;
            }
            .found{
                width: 220px;
                height:140px;
                /* border: 1px solid greenyellow; */
            }
            img,.found{
                display: block;
            }
            .found_1{
                width: 220px;
                border-top: 1px solid white;
                color: white;
                position: relative;
            }
            /* .found_1:hover{
                background-color: none;
            } */
            .fs>a{
                color: white;
                font-size: 12px;
                text-decoration: none;
            }
            .ft>a{
                color: white;
                font-size: 12px;
                text-decoration: none;
            }
            a:hover{
                font-size: 15px;
                font-weight: bold;
            
            }
            .found>.found_1:hover>.ts{
                display: block;
            }
            .fs{
                /* border: 1px solid #f40; */
                width: 110px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color:  rgba(231, 101, 25, 0.5);
                float: right;
            }
            .ft{
                border-right:1px solid rgba(255, 255, 255,0.5) ;
                width: 109px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: rgba(231, 101, 25, 0.5);
                float: left;
            }
            .ts{
                display: none;
                margin-top:-41px ;
                width: 220px;
                height: 40px;
                /* background-color: #f00; */
                position:absolute;
            }
            .price{
                /* border: 1px solid gray; */
                margin-left:3px;
                margin-right:3px;
            }
            .price>span{
                line-height: 20px;
                vertical-align: middle;
            }
            .price>span:first-child{
                color: #f40;
                font-size: 20px;
                font-weight: bold;
            }
            .price>span:nth-child(2){
                font-size: 12px;
                color: white;
                background-color: #f40;
            }
            .price>:last-child{
                float: right;
                font-size: 13px;
                color: #888;
            }
            #test{
                margin-left:3px;
                margin-right:3px;
            }
            #test>a{
                color: #444;
                font-size: 12px;
            }
            #test>a:hover{
                text-decoration: underline;
                color: #f40;
            }
            .store{
                /* border: 1px solid gray; */
                margin-left:3px;
                margin-right:3px;
                margin-top:7px
            }
            #qld{
                font-size: 13px;
                text-decoration: underline;
                color: #888;
            }
            #location{
                float: right;
                color: #888;
                margin-right: 10px;
            }
            .jl_pic{
                width: 41px;
                margin-left: 3px;
                /* height: 40px; */
                /* border: 1px solid red; */
            }
            .jl_pic>span{
                width: 18px;
                height: 19px;
                /* border: 1px solid rebeccapurple; */
            }
            #pic_1{
                float: left;
                background-image: url("pic/精灵图.png");
                background-repeat: no-repeat;
                background-position: -211px -198px;
            }
            #pic_2{
                float: right;
                background-image: url("pic/精灵图.png");
                background-repeat: no-repeat;
                background-position: -295px -160px;
            }
            #pic_3>a>img{
                border-radius: 50%;
                width: 12%;
                float: right;
                margin-top: -20px;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="goods">
                <img src="./pic/图.png" alt="">
                <div class="found">
                    <div class="found_1">
                        <div class="ts">
                            <div class="ft"><a href="#">找同款</a></div>
                            <div class="fs"><a href="#">找相似</a></div>
                        </div>
                    </div>
                    <div class="price">
                        <span>￥1999.00</span>
                        <span>包邮</span>
                        <span>0人付款</span>
                    </div>
                    <div id="test">
                        <a href="https://item.taobao.com/item.htm?spm=a230r.1.14.68.620862c7FOIK1C&id=528227410949&ns=1&abbucket=0#detail" target="_blank">
                            欧兰薇雅欧洲进口水晶珍珠水晶珍珠戒指女食指指环心形礼物
                        </a>
                    </div>
                    <div class="store">
                        <div style="width:120px;height: 30px;float: left;">
                            <div style="float: left;margin-top:7px ;">
                                <div style="width: 10px;height:3px;background-color: #f40;"></div>
                                <div style="width: 10px;height:3px;background-color: #f40;margin-top: 2px;"></div>
                                <div style="width: 10px;height:3px;background-color: #f40;margin-top: 2px;"></div>
                            </div>
                            <div style="float: right;margin-right: 13px">
                                <a id="qld" href="#">欧兰薇雅旗靓店</a>
                            </div>
                        </div>
                        <div id="location">
                            上海
                        </div>
                    </div>
                    <div class="jl_pic">
                        <span id="pic_1"></span>
                        <span id="pic_2"></span>
                    </div>
                    <div id="pic_3">
                        <a href="https://login.taobao.com/member/login.jhtml?redirectURL=https%3a%2f%2fs.taobao.com:443/search%2F_____tmd_____%2Fpage%2Flogin_jump%3Frand%3DS3WxGHAgAt756EpznwfNzJq2AFA2qBNla3j6EINUS8We9dazM_iKElp8DwVSHZUevpC41Bx7RzivXIj9RnZgdg%26_lgt_%3D0ddccd83f47917a83701f130c8f7e7af___215918___9b34959ea01b6c540cb4a3ae0cc41149___837b211a0c5c4d0311617da5fff37e25001413704de625b860e2518faad0f036d9321a11eb0afd6f25d97c393f8c76232377efde38d89c32791cf95738d6bbd8d4b6c45912e939ccecb04d5f09910d4cf0e031931b9132ad85013eb3be5f87fdfda1ffe6d0052b26010cff24765b937333be60e83f16310c86c494a16dd5d1b16c7f2de620667f2e22d717e3d5c8f4f1ef8b8415db5cc8cb7b25c3032c6b30b5%26x5referer%3Dhttps%253A%252F%252Fs.taobao.com%252Fsearch%253Fspm%253Da21bo.jianhua.201867-main.7.195f11d9T17R3I%2526q%253D%2525E7%2525BE%25258E%2525E5%2525A6%252586&uuid=0ddccd83f47917a83701f130c8f7e7af" target="_blank">
                            <img src="./pic/客服.png"  alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

小米页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>小米网页</title>
        <style type="text/css">
            .t_1{
                /* border: 1px solid red; */
                width: 280px;
                height: 200px;
                background-color:#5f5750;
            }
            .t_1>div{
                width: 90px;
                height: 82px;
                /* border: 1px solid green; */
                float: left;
                text-align: center;
            }
            a{
                font-size: 20px;
                text-decoration: none;
                color: white;
            }
            .img_1{
                opacity: 0.5;
                margin-top: 5px;
                margin-left: 5px;
                margin-right: 5px;
            }
            .img_1:hover{
                opacity: 1;
            }
            .k_1{
                opacity: 0.5;
                border-left: 1px solid white;
                margin-left: 10px;
            }
            .k_2{
                opacity: 0.5;
                border-left: 1px solid white;
                margin-top: 10px;
                margin-left: 10px;
            }
            .t_2{
                /* border: 1px solid red; */
                width: 280px;
                height: 200px;
            }
            .t_3{
                /* border: 1px solid red; */
                width: 280px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td class="t_1">
                        <div class="k_1">
                            <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank" >
                                <div class="img_1">
                                    <img src="./pic/1.png" alt="保障服务"><br>
                                    保障服务
                                </div>
                            </a>
                        </div>
                        <div class="k_1">
                            <a href="https://qiye.mi.com/" target="_blank" >
                                <div class="img_1">
                                    <img src="./pic/2.png" alt="企业团购"><br>
                                    企业团购
                                </div>
                            </a>
                        </div>
                        <div class="k_1">
                            <a href="https://www.mi.com/shop/order/fcode" target="_blank" >
                                <div class="img_1">
                                    <img src="./pic/F.png" alt="F码通道"><br>
                                    F码通道
                                </div>
                            </a>
                        </div>
                            <div class="k_2">
                                <a href="https://10046.mi.com/" target="_blank" >
                                    <div class="img_1">
                                        <img src="./pic/4.png" alt="米粉卡"><br>
                                        米粉卡
                                    </div>
                                </a>
                            </div>
                        <div class="k_2">
                            <a href="https://www.mi.com/a/h/16769.html" target="_blank" >
                                <div class="img_1">
                                    <img src="./pic/5.png" alt="以旧换新"><br>
                                    以旧换新
                                </div>
                            </a>
                        </div>
                        <div class="k_2">
                            <a href="https://recharge.10046.mi.com" target="_blank" >
                                <div class="img_1">
                                    <img src="./pic/6.png" alt="话费充值"><br>
                                    话费充值
                                </div>
                            </a>
                        </div>
                    </td>
                    <td class="t_2">
                        <a href="https://www.mi.com/shop/buy/detail?product_id=18075" target="_blank">
                            <img src="./pic/7.jpg" alt="" width="280" height="200">
                        </a>
                    </td>
                    <td class="t_2">
                        <a href="https://www.mi.com/shop/buy/detail?product_id=10050021" target="_blank">
                            <img src="./pic/8.jpg" alt="" width="280" height="200">
                        </a>
                    </td>
                    <td class="t_2">
                        <a href="https://www.mi.com/xiaomimixfold2" target="_blank">
                            <img src="./pic/9.jpg" alt="" width="280" height="200">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="t_3" colspan="4">
                        <div style="margin-top: 50px;border: 10px solid powderblue;">
                            <a href="https://www.mi.com/a/h/28256.html?sign=c7a145214e7de666a5e8e83d5120e20e" target="_blank">
                                <img src="./pic/10.webp" alt="" width="1350" height="200">
                            </a>
                        </div>
                    </td>
                    <!-- <td></td> -->
                    <!-- <td></td> -->
                </tr>
            </tbody>
        </table>
    </body>
</html>
RongChuJie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
web前端基础——第八章
ZiminLi的博客
12-30 191
web前端 JavaScript
网页前端设计-作业三(JavaScript)
qq_61727355的博客
08-20 3107
1 .普通（2分）如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？使用Math.round()方法。2 .普通（2分）如何创建与调用自定义名称的JavaScript函数？使用关键词function来创建自定义函数，例如： function welcome(){ alert("Welcome to JavaScript World"); } 函数可以通过使用函数名称的方法进行调用，例如welcome()。3 .普通（2分）请分别说出下列内容中变量x运算结果。
Web前端技术个人学习经验总结
智慧城市大脑
04-23 3522
目录：    1.2017-12-24（第一天Web项目）：    2.2017-12-25（第二天表格）：    3.2017-12-25（第二天框架及表单）：    4.2017-12-26（第三天CSS语言）：    5.2017-12-28（DIV+CSS）：    6.2017-12-29（JavaScript）:    7.jQuery:    8.表单验证+正则表达式+BootStr...
WEB前端：JavaScript基本知识点
qq_75040884的博客
07-12 44
document.write('${year}年${month}月${day}日${date}${hours}${minnutes}')/*document.write('我叫'+uname+',今年'+age+‘岁了’) or*/`)console.log(str.startswith('ni'))//以什么开头。console.log(str.split(' '))//以空格的方式字符拆开。console.log(str.endswith('ni'))//以什么结尾。
PHP、web前端开发-数据类型.pptx
12-16
在PHP和Web前端开发中，数据类型是编程的基础概念，它定义了变量可以存储的数据种类。在PHP中，数据类型分为标量类型、复合类型、特殊类型以及预定义的常量`null`。了解和熟练掌握这些数据类型对于编写高效且可靠的...
前端框架文档 v3.14.docx
11-30
【前端框架文档 v3.14.docx】的文档详细介绍了如何使用前端框架进行开发，主要针对Vue.js的环境搭建和基本开发流程进行了说明。以下是关键知识点的详细解析： 1. **基础知识**： - 基础知识部分推荐开发者先访问...
3D WebView for Windows and macOS Web Browser 3.14
05-05
《3D WebView for Windows and macOS Web Browser 3.14：Unity中的3D网页浏览解决方案》 在现代的游戏开发和互动应用中，集成Web浏览功能已经变得越来越常见。"3D WebView for Windows and macOS Web Browser 3.14...
libsvm3.14
02-07
libsvm 最新
poi 3.14需要的jar包
03-08
在标题和描述中提到的"poi 3.14需要的jar包"，是指使用Apache POI 3.14版本进行开发时所需的一系列Java库。这些jar包是开发人员用来在Java应用程序中读取、写入或操作Office文件所必需的依赖项。下面将详细介绍这些...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1075
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 853
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vue前端打包
weixin_63680330的博客
07-04 254
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1259
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
ESP32-Web-Server编程- 使用 mDNS 建立域名系统
wangyx1234的博客
07-02 238
1）本节首先介绍了 DNS 域名服务系统，然后引出了 mDNS（multicast DNS，组播 DNS）系统的基本原理。 2）在 ESP32 Web Server 系统中部署 mDNS 服务，并演示了通过建立的域名访问 Web 服务器的方法。
react自定义hooks---useCounter
weixin_73098736的博客
07-02 276
【代码】react自定义hooks---useCounter。
黑马点评学习过程汇总——Cookie \ Session \ Token的区别
weixin_45791946的博客
07-02 375
在后续的请求中，前端发往后端的请求中都携带token，后端拿到token后进行jwt的解密并验证signature，如果检验成功信息没有被篡改，就会放行。，自动存储session信息到cookie中。Token不依赖于session和cookie，对集群和前后端分离架构友好。前端发起登录请求到后端，后端对前端携带来的信息进行认证，认证成功后会生成。我们往session中存储用户信息，服务器端保存session并通过。头部，Payload负载，Signature签名 ）并以。（4）Session的弊端。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 80
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
JS混淆基本类型和原理
最新发布
朴拙科技的博客
07-06 493
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

RongChuJie

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

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

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

打赏作者

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

抵扣说明：

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

余额充值