HTML第二次作业

已于 2024-07-18 19:24:00 修改
阅读量85 收藏
点赞数 2
文章标签： javascript 前端 html
于 2024-06-13 23:40:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80263909/article/details/139666735
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
    ul{
        overflow: hidden;
        background-color: rgb(6, 8, 42);
        border-radius: 25px;
        text-align: center;
    }
    li{
        display: inline-table;
    }
    li a {
        display: block;
        color: white;
        padding: 15px 16px;
        text-align: center;
        text-shadow: 20px 20px 20px white;
        text-decoration: none;
    }
 
    li a:hover {
        background-color: #80000074;
    }
    </style>
    </head>
    <body>
        <ul>
            <li><a href="">游戏1</a></li>
            <li><a href="">游戏2</a></li>
            <li><a href="">游戏3</a></li>
            <li><a href="">游戏4</a></li>
            <li><a href="">游戏5</a></li>
            <li><a href="">游戏6</a></li>
            <li><a href="">游戏7</a></li>
            <li><a href="">游戏8</a></li>
            <li><a href="">游戏9</a></li>
        </ul>
    </body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝商品页</title>
    <style>
        li{
            list-style-type: none;
            width: 196px;
            height: 328px;
            border: 1px solid #f2f2f2;
            margin: -3px;
            line-height: 1;
            padding-left: 20px;
            padding-top: 22px;
            padding-right: 20px;
            display: inline-block;
            
        }
        li:hover{
            border-color: red;
            
            
        }

        a{
            text-decoration: none;
            
            
           
        }

        .pro-introduce{
            font-size: 14px;
            color: #9b9b9b;
            line-height: 20px;
            padding-top: 10px;
        }

        .pro-price{
            font-size: 18px;
            color:red;
        }
        .pro-boss{
            font-size: 12px;
            color: #9b9b9b;
        }
        .pro-sale{
            border-top: 1px solid #9b9b9b;
            position: relative;
        }
        .pro-font{
            position: absolute;
            top:9px;
            right: 0;
            color: #9b9b9b;
            font-size: 12px;
        }
        .red{
            color: red;
        }
        .grey{
            color: grey;
        }
        .text{
            margin-left: 30%;
            border: 2px solid red;
            width: 450px;
            height: 30px;
        }
        .submit{
            width: 100px;
            height: 40px;
            background-color: red;
        } 
    </style>
</head>
<body>
</head>
<body>
    <div class="search">
            <form action="">
                <input type="text" class="text" placeholder="电脑">
                <input type="submit" class="submit" value="搜索">
            </form>
            <a class="red">一淘限时抢</a>
            <a class="grey">女衬衫</a>
            <a class="grey">香水</a>
            <a class="grey">笔袋</a>
            <a class="grey">口红</a>
            <a class="grey">男士T恤</a>
            <a class="grey">外套</a>
            <a class="grey">剃须刀</a>
            <a class="grey">书包</a>
        </div>
    <div>
        <ul>
            <li>
                <a href="https://detail.tmall.com/item.htm?abbucket=7&id=582748860741&ns=1&priceTId=213e36b717174028925277078e8353&spm=a21n57.1.item.68.2475523cME699G&sku_properties=20105:103646">
                    <img src="./1.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>酷睿i5十核i7六核八核RTX3060独显LOL吃鸡电脑主机游戏台式机组装直播电竞整机全套办公家用企业全新官方正品</span></div>
                    <div class="pro-price"><span>￥988</span></div>
                    <div class="pro-boss"><span>然硕数码专营店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 3000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?abbucket=7&id=688377655302&ns=1&priceTId=213e36b717174031014255960e8353&spm=a21n57.1.item.123.2475523cME699G">
                    <img src="./2.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>水冷i9级12核台式电脑主机全套RTX3060独显组装电竞游戏办公家用
                    </span></div>
                    <div class="pro-price"><span>￥2298</span></div>
                    <div class="pro-boss"><span>嘉莱宝一体机自营店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 2</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?abbucket=7&id=731674122704&ns=1&priceTId=213e36b717174025329114218e8353&spm=a21n57.1.item.13.2475523cME699G&sku_properties=20122:118104">
                    <img src="./3.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>设计师专用台式电脑主机CAD美工编程图形工作站PR视频剪辑3D渲染</span></div>
                    <div class="pro-price"><span>￥1988</span></div>
                    <div class="pro-boss"><span>广州同鑫金牌装机店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 27</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?abbucket=6&id=17282151516&ns=1&priceTId=213e36b717174024664987184e8353&spm=a21n57.1.item.12.2475523cME699G">
                    <img src="./4.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>【无线WiFi】创意设计师电脑主机i9 14900KF A5000 A2000影视后期视频剪辑专用建模渲染台式组装图形工作站</span></div>
                    <div class="pro-price"><span>￥10315</span></div>
                    <div class="pro-boss"><span>易图云天数码专营店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 1</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?abbucket=6&id=693908319825&ns=1&priceTId=213e36b717174023575606830e8353&spm=a21n57.1.item.1.2475523cME699G&sku_properties=20122:48202439">
                    <img src="./5.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>设计师专用电脑主机i9视频剪辑图形工作站渲染3D台式组装全套水冷</span></div>
                    <div class="pro-price"><span>￥4538</span></div>
                    <div class="pro-boss"><span>唯美星辰科技</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 34</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?abbucket=8&id=677849315571&ns=1&priceTId=2147816817173263798037914ec993&spm=a21n57.1.item.49.48ca523ceCmEKe">
                    <img src="./6.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>高配i7一体机电脑办公家用i5六核独显游戏型27寸大屏台式主机全套</span></div>
                    <div class="pro-price"><span>￥799</span></div>
                    <div class="pro-boss"><span>易美科电脑品牌店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 500+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?abbucket=8&id=729569876671&ns=1&priceTId=2147816817173262866382424ec993&spm=a21n57.1.item.48.48ca523ceCmEKe&sku_properties=20105:4209035">
                    <img src="./7.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>【12期免息/保价365天】满血十八核i7i9级电脑台式主机全套高配整机一体电竞4060游戏海景房家用办公多开组装</span></div>
                    <div class="pro-price"><span>￥1684</span></div>
                    <div class="pro-boss"><span>亿加源数码专营店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 2000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?abbucket=8&id=703091852795&ns=1&priceTId=213e36f117173233229648837e3f9b&spm=a21n57.1.item.7.48ca523ceCmEKe&sku_properties=5919063:23618894610">
                    <img src="./8.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>博仑帅34英寸一体机电脑游戏竞技直播办公家用4K屏设计剪辑高配独显台式整机全套</span></div>
                    <div class="pro-price"><span>￥3388</span></div>
                    <div class="pro-boss"><span>博仑帅旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 24</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?abbucket=8&id=21678780951&ns=1&priceTId=213e36f117173230577538516e3f9b&spm=a21n57.1.item.3.b4fc523ciZQUid">
                    <img src="./9.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>设计师专用电脑i9 14900KF A4500 A2000专业图形工作站3D建模渲染影视后期AI动画制作视频剪辑组装台式主机</span></div>
                    <div class="pro-price"><span>￥11099</span></div>
                    <div class="pro-boss"><span>伟峰友和数码专营店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 6</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?abbucket=8&id=710342515755&ns=1&priceTId=213e36f117173230289256515e3f9b&spm=a21n57.1.item.1.148e523cvhHFca">
                    <img src="./10.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>飞利浦品牌27寸家用一体机电脑2024新款高端高配办公台式主机学习游戏竞技全套2023小米苹果华为戴尔华硕惠普</span></div>
                    <div class="pro-price"><span>￥2799</span></div>
                    <div class="pro-boss"><span>飞利浦乐作舟专卖店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 51</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?abbucket=8&id=770972065092&ns=1&priceTId=213e36f117173229436431354e3f9b&spm=a21n57.1.item.4.48ca523ceCmEKe">
                    <img src="./11.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>全新24/27/32英寸2K曲面屏一体机电脑家用办公商务设计游戏台式机</span></div>
                    <div class="pro-price"><span>￥1799</span></div>
                    <div class="pro-boss"><span>玮普纳WPNA智能工厂店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 27</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?abbucket=8&id=709154194310&ns=1&priceTId=213e36f117173228799975265e3f9b&spm=a21n57.1.item.4.4e45523cuzqJ0g&sku_properties=20122:48202439">
                    <img src="./12.png" width="198px" height="198px">
                    <div class="pro-introduce"><span>酷睿i7设计师专用台式电脑主机图形工作站视频剪辑3D渲染建模组装</span></div>
                    <div class="pro-price"><span>￥3099</span></div>
                    <div class="pro-boss"><span>众诚达科技</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 100+</span></div></div>
                </a>
            </li>
        </ul>
    </div>
    </body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box"> 
        <h2>Login</h2>
        <div class="input-box">
            <label>账号</label>
            <input type="text">
        </div>
        <div class="input-box">
            <label>密码</label>
            <input type="password">
        </div>
        <div class="btn-box">
            <a href="#">忘记密码?</a>
            <div>
                <button>登录</button>
                <button>注册</button>
            </div>
        </div>
    </div>
</body>
</html>

2301_80263909
关注
遍历整个html文档 并打印出该html文档中的所有文本节点 属性节点 元素节点
焦雨晗
02-21 1621
<!-- //当整个窗体加载完毕之后 触发该匿名函数 window.onload = function(){ //document 获取根元素 var root = document.documentElement; //遍历所有的节点 iteratorNodes(root); document.write(msg); } function iteratorN
第二次作业.html
11-16
第二次作业.html
sdau启航第二次作业
qq_62725148的博客
05-22 1万+
笔记： Css在style标签下 选择器{样式} 给谁改样式{什么样式} <style> p{color: rgb(215, 72, 72);} </style> Color改变颜色font-size更改字体大小 Css主要由两部分组成选择器以及一条或多条声明 属性与属性之间要用：分割结尾用； 1.Css、样式格式代码风格： 展开型书写 用小写字母书写 属性值前面，冒号后面保留一个空格；选择器后面保留一个空格 2.选择器： 选择某个
JSP第二次作业_4小题
HWP
05-06 5096
本题包括4个JSP程序，one.jsp、two.jsp、three.jsp、error.jsp。 one.jsp具体要求如下： 要求one.jsp页面有一个表单，用户使用该表单可以输入一个1至100之间的整数，并提交给下一个页面；如果输入的整数在50至100之间（不包括50）就转向three.jsp，如果在1至50之间就转向two.jsp；如果输入不符合要求就转向error.jsp。要求forwa...
JSP第二次作业_3小题
HWP
05-06 2762
动态包含页面并传递数据。要求程序包含两个文件，主文件加载次文件，并将随机产生的50~100之间的数据传递给它，并且在页面上显示两个信息：该数据和这个数据的平方根。
JSP第二次作业_6小题
HWP
05-06 3047
题目描述： 6、猜数字游戏。本题包括4个JSP程序，inputGuess.jsp、resultGuess.jsp、small.jsp、large.jsp和success.jsp。 inputGuess.jsp的具体要求如下： 用户请求inputGuess.jsp时，随机分配给该用户一个1到100之间的数。该页面同时负责将这个数字存在用户的session对象中。该页面提供表单，用户可以使用该表单输入...
JSP第二次作业_1小题
HWP
05-06 3746
题目： 编写一个JSP程序，计算1！+2！+3！+4！+5！，并显示出结果。要求先声明计算阶乘的方法，再调用该方法，最后在页面上输出结果。 进阶要求，通过表单提交一个正整数，然后计算它的阶乘和。例如：输入3，就计算1！+2！+3！。 阶乘之和比较大，有些情况会超出int类型数据范围！ int的取值范围为： -2^31——2^31-1，即-2147483648——2147483647 我的代码： ...
JSP第二次作业_5小题
HWP
05-06 5380
题目描述： 5、编写两个JSP页面input.jsp和result.jsp。input.jsp页面提交一个数字给result.jsp页面，result.jsp页面使用response对象做出动态响应。 input.jsp的具体要求： input.jsp提供表单，用户在表单中输入一个数字，提交给result.jsp页面。 result.jsp的具体要求： result.jsp页面首先使用reques...
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
Java第二次作业
GamesDuan的专栏
03-10 1562
Java第二次作业 【程序11】 题目：有1、2、3、4四个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？ 【程序12】 题目：企业发放的奖金根据利润提成。利润(I)低于或等于10万元时，奖金可提10%；利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可可提成7.5%；20万到40万之间时，高于20万元的部分，可提成5%；40万到60万之间时高于4
结对第二次作业——编程实现
weizhi_heying的博客
03-26 1849
收获：结对编程的过程中会遇到很多困难，比如如何爬取数据，如何将爬取到的数据在网页上用美观的设计和格式展现出来，也会遇到意见不合的时候，但是遇到问题后共同想办法解决问题，共同沟通，慢慢的解开难题的过程是难忘的，也学到不少知识。这是我们设计的网页主页面，有很多特色功能例如自动下雨，左上角实时时间，播放视频和音频，图片自动轮播，按钮跳转到其他页面。222100201是一个很好的队友，会善于规划时间，会主动询问我的进度，也会帮我解决不会的问题。奖牌榜功能展示了排名，国家，金牌数。爬取数据保存为json文件。
《计算机文化基础》第二次作业.pdf
10-10
《计算机文化基础》这门课程的第二次作业涵盖了多个IT基础知识点，主要涉及计算机软件应用，尤其是Microsoft Office套件中的PowerPoint、Excel等组件的使用。以下是这些知识点的详细解释： 1. **文件扩展名**：扩展...
第二次作业—谭程（TS22070113A31TM）.html
11-24
第二次作业—谭程（TS22070113A31TM）.html
计算机应用基础(第二次作业).doc
04-21
根据提供的文档内容，我们可以推断出这份文档是关于“计算机应用基础”课程的第二次作业，主要涉及计算机网络的基础知识。接下来，我们将从标题、描述、标签以及部分内容中提炼出相关知识点。 ### 标题和描述 标题...
231041231 陈媛 第二次作业.docx
11-17
二、IndexServlet IndexServlet是一个Servlet组件，用于处理用户的登录请求。该Servlet的主要功能是： 1. 检查用户是否已经登录：如果用户已经登录，Servlet将显示欢迎信息，并提供退出链接。 2. 设置Cookie：如果...
如何搭建Vue脚手架
w6437286的博客
09-26 489
本文主要讲解如何搭建vue脚手架。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 255
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 243
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 471
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
学校官网HTML5模板二次开发教程与资源下载
资源摘要信息:"基于第三方HTML5模板二次开发的学校官网.zip" ### 1. HTML5模板二次开发概念 HTML5是第五代超文本标记语言，它在Web开发中扮演着基础角色，为网页内容提供了新的结构和元素，使得网页更加动态和响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

2301_80263909

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

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

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

打赏作者

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

抵扣说明：

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

余额充值