Advertisement

HTML+CSS仿制电脑端静态页面

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：ZIP

简介：
本项目为一个使用HTML和CSS技术模仿设计的电脑端静态网页作品，旨在展示前端基础布局与样式美化技巧。 在本项目中，“html + css仿电脑端静态页面”是一个旨在练习和展示HTML与CSS基本技能的任务。这个任务主要是为了帮助学习者应用他们所学的基础HTML标签和CSS样式来创建一个类似于实际电脑端网页的静态页面。 以下是该项目涉及的一些关键知识点： 1. **HTML（HyperText Markup Language）**：HTML是网页设计的基础，它定义了网页的结构和内容。在这个项目中，学习者可能会使用到以下常见的HTML标签： - ``：文档的根元素。 - ``：包含元信息，如字符编码、标题等。 - ``：定义网页的标题，显示在浏览器标签页上。 - `<body>`：网页的主要内容所在。 - `<header>`：通常用于页眉或导航部分。 - `<nav>`：定义导航链接。 - `<section>`：分隔页面的不同部分。 - `<article>`：包含独立的内容，如博客文章。 - `<aside>`：侧边栏或补充内容。 - `<footer>`：页脚信息。 - `<h1> - <h6>`：标题等级。 - `<p>`：段落。 - `<a>`：超链接。 - `<img>`：图像标签。 2. **CSS（Cascading Style Sheets）**：CSS用于控制网页的外观和布局。在这个项目中，可能会运用到以下CSS知识点： - 选择器：如类选择器（`.class`），ID选择器（`#id`），元素选择器（`element`）等。 - 盒模型：包括边距（margin）、填充（padding）、边框（border）和内容（content）。 - 文本样式：字体、大小、颜色、行高、对齐方式等。 - 背景：背景颜色、图片、重复方式、定位等。 - 布局：浮动（float）、定位（position）、Flexbox（弹性盒布局）或Grid（网格布局）。 - 过渡（Transition）：平滑地改变一个或多个CSS属性，例如元素的透明度或大小变化。 - 动画（Animation）：通过关键帧定义更复杂的动态效果。 - 伪类（Pseudo-classes）：如`:hover`用于定义鼠标悬停时的样式。 - 响应式设计：使用媒体查询（`@media query`）根据设备视口调整布局。 3. **过渡和动画**：这两者都是CSS3中的重要特性，可以为元素添加动态效果。过渡用于改变元素状态时平滑过渡，而动画则可以实现更复杂的定时和顺序变化。 4. **鼠标悬停效果（:hover）**：通过CSS伪类`:hover`，可以在鼠标指针位于某个元素上方时改变该元素的样式，常用于导航菜单、按钮等交互元素。 5. **作业与毕设应用**：这个项目非常适合作为学习成果展示，可以用于完成课程作业或者毕业设计。它能检验学习者对HTML和CSS基本概念的理解和实际应用能力。 通过实践这个项目，学习者不仅能够巩固HTML和CSS的基础知识，还能提高对网页布局和交互设计的理解，并为进一步构建更复杂、功能丰富的网页打下坚实基础。同时，这也是一个提升用户体验设计感的绝佳机会，因为良好的视觉呈现和交互体验是任何网页成功的关键。 </p></div> </div> <div data-v-88f98792="" class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div class="flex justify-center items-center mt-14 mb-7 text-gray-500 relative"><h2>全部评论 (<span>0</span>)</h2></div> <div class="w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div class="flex items-center mt-10 mb-5 justify-center text-gray-400">还没有任何评论哟~</div> </div> </div> </div> <aside data-v-88f98792="" class="col-span-4 md:col-span-1 animate__animated animate__fadeInUp"> <div data-v-88f98792="" class="sticky top-[5.5rem]"> <div data-v-88f98792="" class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div> <div class="flex flex-col items-center"> <div class="relative mb-4 mt-6"> <button class="px-4 py-2 rounded">点击登录</button> </div> <div class="flex justify-center gap-5 mb-2 dark:text-gray-400"> <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer"> <button class="text-sm" style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555"> 下载历史 </button> </div> <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer"> <button class="text-sm" style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555"> 积分购买 </button> </div> </div> </div> </div> </div> </div> </aside> </div> </main> </div> <div data-v-88f98792="" class="border z-50 cursor-pointer fixed bottom-2 right-2 md:bottom-10 md:right-10 inline p-3 bg-white hover:bg-gray-100 rounded dark:bg-gray-800 dark:hover:bg-gray-900 dark:border-gray-700" style="display:none"> <svg class="w-4 h-4 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4"></path> </svg> </div> <div class="el-overlay" style="z-index:2001;display:none"> <div role="dialog" aria-modal="true" aria-label="下载码下载" aria-describedby="el-id-9941-0" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2002;display:none"> <div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-1" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2003;display:none"> <div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-2" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2004;display:none"> <div role="dialog" aria-modal="true" aria-label="选择支付方式" aria-describedby="el-id-9941-3" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2005;display:none"> <div role="dialog" aria-modal="true" aria-label="下载次数充值" aria-describedby="el-id-9941-4" class="el-overlay-dialog"></div> </div> <footer data-v-88f98792="" class="bg-white mt-5 dark:bg-gray-800 text-right"> <div class="w-full mx-auto max-w-screen-xl py-1 px-4 flex justify-end"><span class="text-sm text-gray-500 dark:text-gray-400">© 2025 <a href="https://www.itadn.com/" class="hover:underline">技术社区</a> .All Rights Reserved.</span> </div> </footer> </main> <div class="customer-service"> <div class="icons"><img src="http://d.itadn.com/seoassets/customer-cb314396.png" alt="客服"></div> <span style="color:#838b8b;font-size:12px">客服</span></div> </div> </div> <script type="script" src="http://d.itadn.com/src/composables/echarts.min.js"></script> <div data-v-0e1787d0="" class="popup-container"> <div data-v-0e1787d0="" class="popup-content"> <div data-v-0e1787d0="" class="activity-image"><img data-v-0e1787d0="" src="http://d.itadn.com/seoassets/activecustomer-98ac7d5d.png" alt="客服" class="top-image"><img data-v-0e1787d0="" src="http://d.itadn.com/seoassets/close-5242d789.png" alt="关闭" class="top-right-close" style="width:40px"></div> </div> </div> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span><span style=color: #f73131>仿</span><span style=color: #f73131>制</span><span style=color: #f73131>电</span><span style=color: #f73131>脑</span><span style=color: #f73131>端</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span><span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_93643791512/B/1383299" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span><span style=color: #f73131>仿</span><span style=color: #f73131>制</span><span style=color: #f73131>电</span><span style=color: #f73131>脑</span><span style=color: #f73131>端</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span><span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目为一个使用HTML和CSS技术模仿设计的电脑端静态网页作品，旨在展示前端基础布局与样式美化技巧。 在本项目中，“html + css仿电脑端静态页面”是一个旨在练习和展示HTML与CSS基本技能的任务。这个任务主要是为了帮助学习者应用他们所学的基础HTML标签和CSS样式来创建一个类似于实际电脑端网页的静态页面。 以下是该项目涉及的一些关键知识点： 1. **HTML（HyperText Markup Language）**：HTML是网页设计的基础，它定义了网页的结构和内容。在这个项目中，学习者可能会使用到以下常见的HTML标签： - `<html>`：文档的根元素。 - `<head>`：包含元信息，如字符编码、标题等。 - `<title>`：定义网页的标题，显示在浏览器标签页上。 - `<body>`：网页的主要内容所在。 - `<header>`：通常用于页眉或导航部分。 - `<nav>`：定义导航链接。 - `<section>`：分隔页面的不同部分。 - `<article>`：包含独立的内容，如博客文章。 - `<aside>`：侧边栏或补充内容。 - `<footer>`：页脚信息。 - `<h1> - <h6>`：标题等级。 - `<p>`：段落。 - `<a>`：超链接。 - `<img>`：图像标签。 2. **CSS（Cascading Style Sheets）**：CSS用于控制网页的外观和布局。在这个项目中，可能会运用到以下CSS知识点： - 选择器：如类选择器（`.class`），ID选择器（`#id`），元素选择器（`element`）等。 - 盒模型：包括边距（margin）、填充（padding）、边框（border）和内容（content）。 - 文本样式：字体、大小、颜色、行高、对齐方式等。 - 背景：背景颜色、图片、重复方式、定位等。 - 布局：浮动（float）、定位（position）、Flexbox（弹性盒布局）或Grid（网格布局）。 - 过渡（Transition）：平滑地改变一个或多个CSS属性，例如元素的透明度或大小变化。 - 动画（Animation）：通过关键帧定义更复杂的动态效果。 - 伪类（Pseudo-classes）：如`:hover`用于定义鼠标悬停时的样式。 - 响应式设计：使用媒体查询（`@media query`）根据设备视口调整布局。 3. **过渡和动画**：这两者都是CSS3中的重要特性，可以为元素添加动态效果。过渡用于改变元素状态时平滑过渡，而动画则可以实现更复杂的定时和顺序变化。 4. **鼠标悬停效果（:hover）**：通过CSS伪类`:hover`，可以在鼠标指针位于某个元素上方时改变该元素的样式，常用于导航菜单、按钮等交互元素。 5. **作业与毕设应用**：这个项目非常适合作为学习成果展示，可以用于完成课程作业或者毕业设计。它能检验学习者对HTML和CSS基本概念的理解和实际应用能力。 通过实践这个项目，学习者不仅能够巩固HTML和CSS的基础知识，还能提高对网页布局和交互设计的理解，并为进一步构建更复杂、功能丰富的网页打下坚实基础。同时，这也是一个提升用户体验设计感的绝佳机会，因为良好的视觉呈现和交互体验是任何网页成功的关键。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span><span style=color: #f73131>制</span>作<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_52191037871/B/269778" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span><span style=color: #f73131>制</span>作<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目旨在通过HTML和CSS技术创建一个模仿静态版式的淘宝商品展示页面。设计中注重样式布局与美观性，并实现基本的商品信息结构化呈现。适合前端初学者练习网页布局及响应式设计技巧。 本资源为HTML初学者提供源码，并已在VSCode上测试通过。由于刚接触前端开发，难免会出现错误，希望各位网友能够指正。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span><span style=color: #f73131>制</span>作<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_23259435945/B/269782" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span><span style=color: #f73131>制</span>作<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目旨在通过HTML和CSS技术，构建一个模仿静态版淘宝网站的网页设计。演示了基础Web前端开发技能的应用，包括布局、样式美化及响应式设计等关键要素。 本资源为HTML初学者提供源码，并已在VSCode上测试通过。对于刚开始学习前端的朋友们来说，出现错误是在所难免的，希望各位网友能够指出并改正其中的问题。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_83202955848/B/269777" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目为一个模仿静态淘宝页面的设计作品，使用了HTML和CSS技术实现。通过该项目可以学习网页布局、样式设计以及响应式开发等技能。 本资源为HTML初学者提供源码，并已在VSCode上测试通过。由于刚学习前端开发，难免会出现错误，希望各位网友能够指正。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_63190714236/B/269779" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目为使用HTML和CSS技术仿制的一个静态淘宝商品页面，旨在提升网页设计与前端开发技能。 本资源为HTML初学者提供源码，并已在VSCode上测试通过。对于刚开始学习前端的朋友们来说，出现错误是正常的，请大家指正。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_18459532326/B/269780" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目为一个使用HTML和CSS技术构建的静态网页，旨在模仿淘宝网站的商品详情页设计与布局。通过该项目可以深入学习并实践前端基础技能。 本资源为初学HTML的朋友们提供了可正常运行的源码，并已在VSCode上进行了测试。对于刚开始学习前端的同学来说，出现错误是正常的，请大家多多指正。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_58109659884/B/269781" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目为一个使用HTML和CSS技术构建的静态网页设计作品，旨在模拟淘宝网站的商品展示页面。通过此实践，可以提升前端开发技能，特别是布局与样式设计能力。 本资源为初学HTML的用户提供了可正常运行的源码，并已在VSCode上进行过测试。由于刚开始学习前端开发，难免会出现一些错误，希望各位网友能够提出宝贵的意见与建议。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_11633525159/B/269783" target="_blank"><span style=color: #f73131>HTML</span>+<span style=color: #f73131>CSS</span>模<span style=color: #f73131>仿</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span>淘宝<span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目旨在通过HTML和CSS技术实现一个静态的淘宝商品详情页，模拟真实购物体验。设计注重细节与美观，展示网页布局及样式设计技巧。 本资源为HTML初学者提供源码，并已在VSCode上测试通过。对于刚开始学习前端的同学来说，出现错误是正常的，请大家帮忙指正。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>仿</span><span style=color: #f73131>制</span>QQ的<span style=color: #f73131>HTML</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span><span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_59787690152/B/9953" target="_blank"><span style=color: #f73131>仿</span><span style=color: #f73131>制</span>QQ的<span style=color: #f73131>HTML</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span><span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目为一个模仿腾讯QQ界面设计与基本布局的HTML静态网页。通过运用CSS和JavaScript技术实现网页美化及交互性增强，旨在提高前端开发技能，并深入理解现代Web标准。 使用HTML和CSS3动画来模仿QQ的静态页面，并且在设计过程中大量运用了CSS3动画效果。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>CSS</span>+DIV的<span style=color: #f73131>HTML</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span><span style=color: #f73131>页</span><span style=color: #f73131>面</span>" href="https://d.itadn.com/i0_96618608965/B/34045" target="_blank"><span style=color: #f73131>CSS</span>+DIV的<span style=color: #f73131>HTML</span><span style=color: #f73131>静</span><span style=color: #f73131>态</span><span style=color: #f73131>页</span><span style=color: #f73131>面</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本课程专注于教授使用CSS和DIV布局构建美观、响应式的HTML静态网页的技术，适合初学者入门。 这是期末HTML老师布置的任务。我超额完成了，做了三个项目。这些项目主要使用CSS+DIV制作（共3个项目）。在页面布局、代码规范以及命名等方面都清晰明了。 </div><!---->   </div> </li> </body> </html>