Главная Обзор Помощь
Вход
lovecoding
/
J250913
10
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

html 代码

fanjialong 4 дней назад
Родитель
0d08af4b96
Сommit
cc17b80cc1
22 измененных файлов с 908 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 8 0
      html-demo/.idea/.gitignore
  2. 6 0
      html-demo/.idea/misc.xml
  3. 8 0
      html-demo/.idea/modules.xml
  4. 6 0
      html-demo/.idea/vcs.xml
  5. 13 0
      html-demo/_01_hello.html
  6. 31 0
      html-demo/_02_html基本语法.html
  7. 37 0
      html-demo/_03_html通用标签属性使用.html
  8. 66 0
      html-demo/_04_常用的html标签.html
  9. 28 0
      html-demo/_05_常用标签练习.html
  10. 66 0
      html-demo/_06_a标签.html
  11. 47 0
      html-demo/_07_列表.html
  12. 33 0
      html-demo/_08_列表练习.html
  13. 23 0
      html-demo/_09_img.html
  14. 181 0
      html-demo/_10_img 练习.html
  15. 33 0
      html-demo/_11_table.html
  16. 73 0
      html-demo/_12_table表格练习.html
  17. 241 0
      html-demo/_13_综合练习.html
  18. 8 0
      html-demo/html-demo.iml
  19. BIN
      html-demo/img/1.png
  20. BIN
      html-demo/img/2.png
  21. BIN
      html-demo/img/3.png
  22. BIN
      html-demo/img/iphone.png

+ 8 - 0
html-demo/.idea/.gitignore
Просмотреть файл 

@@ -0,0 +1,8 @@
 
+# Default ignored files
 
+/shelf/
 
+/workspace.xml
 
+# Editor-based HTTP Client requests
 
+/httpRequests/
 
+# Datasource local storage ignored files
 
+/dataSources/
 
+/dataSources.local.xml

+ 6 - 0
html-demo/.idea/misc.xml
Просмотреть файл 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectRootManager">
 
+    <output url="file://$PROJECT_DIR$/out" />
 
+  </component>
 
+</project>

+ 8 - 0
html-demo/.idea/modules.xml
Просмотреть файл 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/html-demo.iml" filepath="$PROJECT_DIR$/html-demo.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

+ 6 - 0
html-demo/.idea/vcs.xml
Просмотреть файл 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="VcsDirectoryMappings">
 
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
 
+  </component>
 
+</project>

+ 13 - 0
html-demo/_01_hello.html
Просмотреть файл 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>我是标题</title>
 
+</head>
 
+<body>
 
+我是fanjialongasdfasdfasdf <br/>
 
+<hr/>
 
+asdfasdfasdfsdfasdfasdfasdfsdf
 
+<h1>我是fanjialong</h1>
 
+</body>
 
+</html>

+ 31 - 0
html-demo/_02_html基本语法.html
Просмотреть файл 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<!--
 
+  这是就是html 的注释
 
+  xxx
 
+  xxxx
 
+
 
+  xxxx
 
+-->
 
+<!--
 
+标签当中属性不是乱写的, 每一个标签当中都有一些共有属性和独立的属性
 
+有一些属性所有标签都有: id   class  title   style
 
+ id  class : 主要作用为了帮我们快速定位到这个标签
 
+ id: 是必须唯一
 
+ class : 这里可以不唯一
 
+ title : 设置备注信息
 
+ style: 可以去给标签设置一些样式
 
+有一些属性只有这个表才具备 比如: color font 表有其他的没有
 
+-->
 
+<!--font字体标签-->
 
+<font color="red" id="xxx1" title="我是font标签" class="xx">我是html</font>
 
+<!--段落标签-->
 
+<p id="xxx" title="我是一个p 标签" class="xx">山东发斯蒂芬撒旦法师打发 收到发斯蒂芬萨达发斯蒂芬阿萨德发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</p>
 
+
 
+</body>
 
+</html>

+ 37 - 0
html-demo/_03_html通用标签属性使用.html
Просмотреть файл 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<!--style 里面写的是css 代码-->
 
+<!--style 当中想要找到某一个标签语法
 
+   id:  #id 的值
 
+   class: .class的值
 
+   元素:  p   找所有p 元素
 
+-->
 
+<style>
 
+   #p1{
 
+       background-color: chartreuse;
 
+   }
 
+
 
+   .p2{
 
+       background-color: red;
 
+       color: yellow;
 
+   }
 
+</style>
 
+<!--body 里面写的是html 代码-->
 
+<body>
 
+<!--
 
+   id
 
+   title
 
+   class
 
+   style: style 是设置css 央视
 
+-->
 
+<p id="p1">我是是阿斯顿发生多发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点沙发上都发啥打法</p>
 
+<p class="p2">我是是阿斯顿发生多发点沙发上都发啥打法</p>
 
+<p class="p2">我是是阿斯顿发生多发点沙发上都发啥打法</p>
 
+<p style="color: red">我是p</p>
 
+
 
+</body>
 
+</html>

+ 66 - 0
html-demo/_04_常用的html标签.html
Просмотреть файл 

@@ -0,0 +1,66 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<!--br
 
+姓名: zhangsan      张三颜色是红色
 
+
 
+aga: 18            18 颜色红色
 
+
 
+email: 123@qq.com  123@qq.com 红色
 
+-->
 
+姓名: <font color="red">范佳龙</font> <br> <br>
 
+年龄: <font color="red">18</font> <br> <br>
 
+邮箱: <font color="red">123@qq.com</font> <br> <br>
 
+<hr>
 
+<!--h1*6   table-->
 
+<!--<h1>我是标题1</h1>-->
 
+<!--<h2>我是标题2</h2>-->
 
+<!--<h3>我是标题3</h3>-->
 
+<!--<h4>我是标题4</h4>-->
 
+<!--<h5>我是标题5</h5>-->
 
+<!--<h6>我是标题6</h6>-->
 
+<!--<h1>二、HTML 标签</h1>-->
 
+<!--<h2>2.1HTML的基本语法</h2>-->
 
+<!--<h2>2.2常用Html标签</h2>-->
 
+<!--<h2>2.3超链接</h2>-->
 
+<!--<h2>2.4列表标签</h2>-->
 
+<!--<h3>无需列表</h3>-->
 
+<!--<h3>有需列表</h3>-->
 
+<!--<h3>自定义列表</h3>-->
 
+
 
+<p>当地时间1月6日，美国洛杉矶市长候选人、前洛杉矶联合学区总监奥斯汀·博伊特纳22岁的女儿艾米丽·博伊特
 
+    纳在医院去世，死因尚未公布。据悉，当天中午12点10分左右，艾米丽·博伊特纳被发现独自一人躺在路边，
 
+    其被紧急送往医院，但随即宣告不治身亡。‌‌
 
+</p>
 
+
 
+<p>当地时间1月6日，美国洛杉矶市长候选人、前洛杉矶联合学区总监奥斯汀·博伊特纳22岁的女儿艾米丽·博伊特
 
+    纳在医院去世，死因尚未公布。据悉，当天中午12点10分左右，艾米丽·博伊特纳被发现独自一人躺在路边，
 
+    其被紧急送往医院，但随即宣告不治身亡。‌‌
 
+</p>
 
+
 
+<p>xxxxxxx</p><p>123123123</p>
 
+
 
+<div>当地时间1月6日，美国洛杉矶市长候选人、前洛杉矶联合学区总监奥斯汀·博伊特纳22岁的女儿艾米丽·博伊特
 
+    纳在医院去世，死因尚未公布。据悉，当天中午12点10分左右，艾米丽·博伊特纳被发现独自一人躺在路边，
 
+    其被紧急送往医院，但随即宣告不治身亡。‌‌
 
+</div>
 
+
 
+<div>当地时间1月6日，美国洛杉矶市长候选人、前洛杉矶联合学区总监奥斯汀·博伊特纳22岁的女儿艾米丽·博伊特
 
+    纳在医院去世，死因尚未公布。据悉，当天中午12点10分左右，艾米丽·博伊特纳被发现独自一人躺在路边，
 
+    其被紧急送往医院，但随即宣告不治身亡。‌‌
 
+</div>
 
+
 
+<div>xxxxxxx</div><div>123123123</div>
 
+
 
+<span>当地时间1月6日，美国洛杉矶市长候选人、前洛杉矶联合学区总监奥斯汀·博伊特纳22岁的女儿艾米丽·博伊特
 
+    纳在医院去世，死因尚未公布。据悉，当天中午12点10分左右，艾米丽·博伊特纳被发现独自一人躺在路边，
 
+    其被紧急送往医院，但随即宣告不治身亡。‌‌</span><br>
 
+<span>当地时间1月6日，美国洛杉矶市长候选人、前洛杉矶联合学区总监奥斯汀·博伊特纳22岁的女儿艾米丽·博伊特
 
+    纳在医院去世，死因尚未公布。据悉，当天中午12点10分左右，艾米丽·博伊特纳被发现独自一人躺在路边，
 
+    其被紧急送往医院，但随即宣告不治身亡。‌‌</span>
 
+</body>
 
+</html>

+ 28 - 0
html-demo/_05_常用标签练习.html
Просмотреть файл 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>个人简历</title>
 
+</head>
 
+<style>
 
+  span{
 
+    color: red;
 
+  }
 
+  body{
 
+      background-color: #F0F5E9;
 
+  }
 
+</style>
 
+<body >
 
+<h1>个人简历</h1>
 
+<h2>我的信息</h2>
 
+<hr>
 
+姓名: <span>fanjialnog</span> &emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
 
+年龄: <span>18</span>         &emsp; &emsp; &emsp;&emsp; &emsp; &emsp; &emsp; &emsp; &emsp;&emsp; &emsp; &emsp;
 
+邮箱: <span>123@qq.com</span> &emsp; &emsp;&emsp; &emsp; &emsp;&emsp;<br><br><br>
 
+英语: <span>CET-4</span>      &emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
 
+手机号: <span>1111101</span>  &emsp;&emsp;&emsp; &emsp;&emsp;&emsp;<br><br>
 
+<hr>
 
+<h2>自我评价</h2>
 
+<p>本人具备扎实的专业基础与高效的执行力，对待工作严谨细致、责任心强，能够快速理解业务需求并落地执行。注重团队协作，善于沟通配合，能主动对接上下游完成工作衔接；面对问题勤于思考、积极复盘，持续优化工作方法提升效率。拥有良好的学习能力和适应能力，乐于接受新挑战，始终以积极饱满的状态投入工作，力求在岗位上创造切实价值，与团队共同成长。</p>
 
+</body>
 
+</html>

+ 66 - 0
html-demo/_06_a标签.html
Просмотреть файл 

@@ -0,0 +1,66 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <title>按钮样式a标签</title>
 
+  <style>
 
+    /* 重置a标签默认样式：去掉下划线、统一字体 */
 
+    a {
 
+      text-decoration: none; /* 去掉超链接默认下划线 */
 
+      font-family: "Microsoft YaHei", sans-serif; /* 统一字体，更美观 */
 
+      font-size: 14px; /* 按钮文字大小 */
 
+    }
 
+
 
+    /* 核心：a标签转按钮样式 */
 
+    a {
 
+      display: inline-block; /* 关键：让行内的a标签支持宽高、内边距、外边距 */
 
+      padding: 8px 16px; /* 按钮内边距：上下8px 左右16px，控制按钮大小 */
 
+      margin: 5px; /* 按钮之间的外边距，避免挤在一起 */
 
+      background-color: #4299e1; /* 按钮默认背景色（清新蓝，可自行修改） */
 
+      color: #ffffff; /* 按钮文字颜色（白色） */
 
+      border: none; /* 去掉默认边框 */
 
+      border-radius: 4px; /* 按钮圆角，让边角更柔和（值越大越圆） */
 
+      cursor: pointer; /* 鼠标悬浮时显示手型，符合按钮的交互习惯 */
 
+      transition: background-color 0.2s ease; /* 背景色过渡动画，hover时更丝滑 */
 
+    }
 
+
 
+    /* 鼠标悬浮在按钮上的样式（交互效果） */
 
+    a:hover {
 
+      background-color: #3182ce; /* 悬浮时背景色加深，有视觉反馈 */
 
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影，提升立体感 */
 
+    }
 
+
 
+    /* 可选：鼠标点击按钮时的按下效果 */
 
+    a:active {
 
+      background-color: #2b6cb0;
 
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 
+    }
 
+
 
+    #a1{
 
+      width: 1000px;
 
+      height: 800px;
 
+      background-color: red;
 
+    }
 
+    #a2{
 
+      width: 1000px;
 
+      height: 800px;
 
+      background-color: yellowgreen;
 
+    }
 
+
 
+  </style>
 
+</head>
 
+<body>
 
+<!--<a href="_01_hello.html">百度</a>-->
 
+<!--<a href="http://www.baidu.com">百度</a>-->
 
+<!--&lt;!&ndash;访问一个图片他可以是网上的一个链接 也可以本地的图片&ndash;&gt;-->
 
+<!--<a href="https://so1.360tres.com/t017d6555a87fb13623.jpg">周杰伦</a>-->
 
+<!--<a href="img/1.png">图片</a>-->
 
+<!--<a href="https://www.renwuji.com/wp-content/uploads/images/2022/12/16/6cf8e9d3ddaa42109abc41284e56adc0~noop_1jlttp0cn4y-480x320.jpg">美女</a>-->
 
+
 
+<!--<a href="http://www.baidu.com" target="_blank">百度一下</a>-->
 
+<a href="#n1">第一章</a> <br>
 
+<a href="#n2">第二章</a> <br>
 
+<a id="a1" name="n1" href="#">第一章节内容</a><br>
 
+<a id="a2" name="n2" href="#">第二章节内容</a>
 
+</body>
 
+</html>

+ 47 - 0
html-demo/_07_列表.html
Просмотреть файл 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+    <style>
 
+      ul {
 
+        list-style: none;  /* 去掉默认的圆点/数字项目符号 */
 
+        margin: 0;         /* 取消ul默认的外边距（避免整体偏移） */
 
+        padding: 0;        /* 取消ul默认的左侧内边距（核心缩进原因） */
 
+      }
 
+
 
+      ol {
 
+          list-style: none;  /* 去掉默认的圆点/数字项目符号 */
 
+          margin: 0;         /* 取消ul默认的外边距（避免整体偏移） */
 
+          padding: 0;        /* 取消ul默认的左侧内边距（核心缩进原因） */
 
+      }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+<!--无需列表 -->
 
+<ul>
 
+  <li>西游记</li>
 
+  <li>红楼梦</li>
 
+  <li>水浒站</li>
 
+  <li>三国演义</li>
 
+</ul>
 
+<hr>
 
+<!--有序列表-->
 
+<ol type="a" start="3">
 
+    <li>貂蝉</li>
 
+    <li>杨玉环</li>
 
+    <li>西施</li>
 
+    <li>王昭君</li>
 
+</ol>
 
+<hr>
 
+<!--自定义列表-->
 
+<dl>
 
+    <dt>中国的四大发明</dt>
 
+    <dd>火药</dd>
 
+    <dd>造纸术</dd>
 
+    <dd>指南针</dd>
 
+    <dd>印刷术</dd>
 
+</dl>
 
+</body>
 
+</html>

+ 33 - 0
html-demo/_08_列表练习.html
Просмотреть файл 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<style>
 
+  /*ul {*/
 
+  /*  list-style: none;  !* 去掉默认的圆点/数字项目符号 *!*/
 
+  /*  margin: 0;         !* 取消ul默认的外边距（避免整体偏移） *!*/
 
+  /*  padding: 0;        !* 取消ul默认的左侧内边距（核心缩进原因） *!*/
 
+  /*}*/
 
+</style>
 
+<body>
 
+<dl>
 
+  <dd>Java
 
+      <dl>
 
+          <dd>JavaSe</dd>
 
+          <dd>JavaEE
 
+              <dl>
 
+                  <dd>Struts</dd>
 
+                  <dd>Hibernate</dd>
 
+                  <dd>Spring</dd>
 
+              </dl>
 
+          </dd>
 
+          <dd>JavaME</dd>
 
+      </dl>
 
+  </dd>
 
+  <dd>html</dd>
 
+  <dd>汉语</dd>
 
+</dl>
 
+</body>
 
+</html>

+ 23 - 0
html-demo/_09_img.html
Просмотреть файл 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<!--img 图片标签
 
+  src: 图片地址  可以是本地的地址也可以是网上地址
 
+  alt: 是当图片加载不出来展示纤细
 
+  width:  宽度
 
+  heigth:  高度
 
+-->
 
+<img src="img/1.png"
 
+     width="100px"
 
+     title="xxx"
 
+     height="100px"
 
+     alt="这是一个美丽天空">
 
+</body>
 
+<button>按钮</button>
 
+
 
+<a href="http://www.baidu.com"><img src="img/3.png" width="100px" height="50px"></a>
 
+</html>

+ 181 - 0
html-demo/_10_img 练习.html
Просмотреть файл 

@@ -0,0 +1,181 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>苹果14pro商品卡片</title>
 
+  <style>
 
+    /* 全局样式重置：清除默认边距，统一字体 */
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+      font-family: "Microsoft YaHei", Arial, sans-serif;
 
+    }
 
+
 
+    /* 商品卡片容器：左图右文核心布局 */
 
+    .product-card {
 
+      display: flex; /* 启用Flex布局，子元素水平排列 */
 
+      align-items: flex-start; /* 顶部对齐，避免图片/文字高度不一致导致错位 */
 
+      gap: 24px; /* 图片与文字区域间距，比margin更灵活 */
 
+      width: 90%;
 
+      max-width: 800px; /* 限制卡片最大宽度，避免大屏下太宽 */
 
+      margin: 30px auto; /* 上下间距+水平居中 */
 
+      padding: 20px;
 
+      background-color: #fff;
 
+      border-radius: 12px; /* 圆角卡片，现代电商风格 */
 
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 轻微阴影，提升立体感 */
 
+    }
 
+
 
+    /* 左侧商品图片区域 */
 
+    .product-img {
 
+      flex: 0 0 280px; /* 固定图片宽度，不伸缩（0 0 宽度值） */
 
+    }
 
+    .product-img img {
 
+      width: 100%; /* 图片自适应容器宽度 */
 
+      height: auto; /* 保持图片比例，避免拉伸变形 */
 
+      border-radius: 8px; /* 图片圆角，与卡片风格统一 */
 
+      object-fit: cover; /* 确保图片填充容器且不裁剪关键内容 */
 
+    }
 
+
 
+    /* 右侧商品信息区域 */
 
+    .product-info {
 
+      flex: 1; /* 文字区域占据剩余所有空间 */
 
+      padding: 10px 0; /* 上下内边距，优化文字垂直间距 */
 
+    }
 
+
 
+    /* 商品标题样式 */
 
+    .product-title {
 
+      font-size: 22px;
 
+      font-weight: 600;
 
+      color: #1d1d1f; /* 苹果风格深灰色，避免纯黑刺眼 */
 
+      margin-bottom: 16px;
 
+      line-height: 1.3;
 
+    }
 
+
 
+    /* 商品价格样式：突出价格，吸引注意力 */
 
+    .product-price {
 
+      margin-bottom: 18px;
 
+    }
 
+    .product-price .current-price {
 
+      font-size: 28px;
 
+      font-weight: 700;
 
+      color: #ff3b30; /* 红色价格，电商常用强调色 */
 
+      margin-right: 12px;
 
+    }
 
+    .product-price .discount {
 
+      font-size: 14px;
 
+      color: #ff3b30;
 
+      background-color: #fff5f5; /* 浅红背景，突出优惠 */
 
+      padding: 2px 8px;
 
+      border-radius: 4px;
 
+    }
 
+
 
+    /* 商品标签样式：如"购物车界面""订单支付界面" */
 
+    .product-tags {
 
+      display: flex;
 
+      gap: 10px;
 
+      margin-bottom: 24px;
 
+      flex-wrap: wrap; /* 小屏时标签自动换行 */
 
+    }
 
+    .product-tags span {
 
+      font-size: 13px;
 
+      color: #6e6e73;
 
+      background-color: #f5f5f7;
 
+      padding: 4px 12px;
 
+      border-radius: 16px; /* 胶囊形标签，更精致 */
 
+    }
 
+
 
+    /* 按钮样式：购物车+立即购买，区分主次 */
 
+    .product-buttons {
 
+      display: flex;
 
+      gap: 16px; /* 按钮间距 */
 
+      margin-top: 20px;
 
+    }
 
+    .btn {
 
+      padding: 12px 0;
 
+      border-radius: 8px;
 
+      font-size: 16px;
 
+      font-weight: 500;
 
+      text-align: center;
 
+      cursor: pointer; /* 鼠标悬浮显示手型，提示可点击 */
 
+      transition: all 0.2s ease; /* 按钮交互动画，更丝滑 */
 
+      border: none;
 
+    }
 
+    /* 立即购买按钮：主按钮，颜色更醒目 */
 
+    .btn-buy {
 
+      flex: 1; /* 按钮自适应宽度 */
 
+      background-color: #ff3b30;
 
+      color: #fff;
 
+    }
 
+    .btn-buy:hover {
 
+      background-color: #e03024; /* 悬浮时加深颜色，有视觉反馈 */
 
+      box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
 
+    }
 
+    /* 加入购物车按钮：次按钮，浅色边框 */
 
+    .btn-cart {
 
+      flex: 1;
 
+      background-color: #fff;
 
+      color: #ff3b30;
 
+      border: 1px solid #ff3b30;
 
+    }
 
+    .btn-cart:hover {
 
+      background-color: #fff5f5;
 
+    }
 
+
 
+    /* 响应式适配：小屏幕（手机）下改为"上图下文" */
 
+    @media (max-width: 768px) {
 
+      .product-card {
 
+        flex-direction: column; /* 子元素垂直排列 */
 
+        padding: 16px;
 
+        gap: 16px;
 
+      }
 
+      .product-img {
 
+        flex: 0 0 auto; /* 取消固定宽度，图片自适应全屏 */
 
+        width: 100%;
 
+      }
 
+      .product-title {
 
+        font-size: 19px;
 
+      }
 
+      .product-price .current-price {
 
+        font-size: 24px;
 
+      }
 
+      .product-buttons {
 
+        flex-direction: column; /* 按钮垂直排列，方便点击 */
 
+      }
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+<!-- 商品卡片容器：包含左侧图片和右侧信息 -->
 
+<div class="product-card">
 
+  <!-- 左侧商品图片 -->
 
+  <div class="product-img">
 
+    <!-- 用占位图示例，实际替换为真实商品图链接即可 -->
 
+    <img src="img/iphone.png" alt="苹果14pro手机">
 
+  </div>
 
+
 
+  <!-- 右侧商品信息 -->
 
+  <div class="product-info">
 
+    <h2 class="product-title">苹果14pro / 苹果14proMax</h2>
 
+    <div class="product-price">
 
+      <span class="current-price">¥3079</span>
 
+      <span class="discount">已享受满199减120</span>
 
+    </div>
 
+    <div class="product-tags">
 
+      <span>iphone15 </span>
 
+      <span>iphone15pro</span>
 
+      <span>iphone16pro</span>
 
+      <span>iphone16pro max</span>
 
+    </div>
 
+    <div class="product-desc">
 
+      <p>搭载A16仿生芯片，6.1英寸超视网膜XDR显示屏，支持ProMotion自适应刷新率，全天候显示功能；后置4800万像素主摄，拍照画质细腻；多种配色可选，轻薄机身，手感出众。</p>
 
+    </div>
 
+    <div class="product-buttons">
 
+      <button class="btn btn-cart">加入购物车</button>
 
+      <button class="btn btn-buy">立即购买</button>
 
+    </div>
 
+  </div>
 
+</div>
 
+</body>
 
+</html>

+ 33 - 0
html-demo/_11_table.html
Просмотреть файл 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<table border="1" cellpadding="0" cellspacing="0" width="100%">
 
+  <tr>
 
+    <th>姓名</th>
 
+    <th>性别</th>
 
+    <th>年龄</th>
 
+    <th>电话</th>
 
+    <th>地址</th>
 
+    <th>邮箱</th>
 
+  </tr>
 
+  <tr>
 
+    <td>张三</td>
 
+    <td>男</td>
 
+    <td>18</td>
 
+    <td rowspan="2">110</td>
 
+    <td colspan="2">广州</td>
 
+  </tr>
 
+  <tr>
 
+    <td>lisi</td>
 
+    <td>男</td>
 
+    <td>19</td>
 
+    <td>广州</td>
 
+    <td>123@qq.com</td>
 
+  </tr>
 
+</table>
 
+</body>
 
+</html>

+ 73 - 0
html-demo/_12_table表格练习.html
Просмотреть файл 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <title>个人信息卡片</title>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+      font-family: "Microsoft YaHei", sans-serif;
 
+    }
 
+    /* 容器：模拟图中布局 */
 
+    .info-container {
 
+      width: 80%;
 
+      max-width: 700px;
 
+      margin: 50px auto;
 
+      display: grid;
 
+      /* 3列布局：头像列 + 标签列 + 内容列 */
 
+      grid-template-columns: 1fr 1fr 2fr;
 
+      gap: 1px; /* 模拟单元格分隔线 */
 
+      background-color: #e9ecef; /* 分隔线底色 */
 
+      border-radius: 8px;
 
+      overflow: hidden;
 
+    }
 
+    /* 通用单元格样式 */
 
+    .info-item {
 
+      padding: 20px;
 
+      background-color: #fff;
 
+      color: #333;
 
+      font-size: 16px;
 
+    }
 
+    /* 头像单元格：跨2行 + 浅蓝色背景 */
 
+    .avatar {
 
+      grid-row: 1 / 3; /* 占据第1-2行 */
 
+      background-color: #f0f8ff;
 
+      text-align: center;
 
+      font-weight: 500;
 
+    }
 
+    /* 标签单元格（姓名、年龄、工作内容） */
 
+    .label {
 
+      background-color: #fff; /* 姓名标签背景色 */
 
+      font-weight: 500;
 
+    }
 
+    /* 年龄单元格：改为和姓名一致的白色背景 */
 
+    .age-item {
 
+      background-color: #fff; /* 关键：和姓名背景统一 */
 
+    }
 
+    /* 工作内容：跨2列 */
 
+    .work-content {
 
+      grid-column: 2 / 4; /* 占据第2-3列 */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+<div class="info-container">
 
+  <!-- 头像（跨2行） -->
 
+  <div class="info-item avatar">头像</div>
 
+  <!-- 姓名标签 -->
 
+  <div class="info-item label">姓名</div>
 
+  <!-- 姓名内容 -->
 
+  <div class="info-item">zhangsan</div>
 
+  <!-- 年龄标签（背景改为白色） -->
 
+  <div class="info-item label age-item">年龄</div>
 
+  <!-- 年龄内容 -->
 
+  <div class="info-item">18</div>
 
+  <!-- 工作内容标签 -->
 
+  <div class="info-item label">工作内容</div>
 
+  <!-- 工作内容（跨2列） -->
 
+  <div class="info-item work-content">负责项目需求对接、文档编写与团队协作，参与产品功能优化与数据监测，保障项目高效推进</div>
 
+</div>
 
+</body>
 
+</html>

+ 241 - 0
html-demo/_13_综合练习.html
Просмотреть файл 

@@ -0,0 +1,241 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>商品列表页（央视风格）</title>
 
+  <style>
 
+    /* 1. 央视风格初始化：统一基础样式，符合官方简洁规范 */
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box; /* 全局盒模型，避免边距错乱 */
 
+      font-family: "Microsoft YaHei", Arial, sans-serif; /* 央视常用字体 */
 
+    }
 
+    body {
 
+      background-color: #f5f5f5; /* 浅灰背景，简洁不刺眼 */
 
+      color: #333333; /* 正文深灰色，符合官方阅读体验 */
 
+      font-size: 14px;
 
+      line-height: 1.6; /* 行高优化，提升可读性 */
 
+    }
 
+
 
+    /* 2. 央视版心布局：内容居中，左右留白，适配大屏 */
 
+    .container {
 
+      width: 90%; /* 响应式宽度 */
 
+      max-width: 1200px; /* 最大宽度，避免大屏过宽 */
 
+      margin: 0 auto; /* 水平居中，核心版心样式 */
 
+      padding: 20px 0;
 
+    }
 
+
 
+    /* 3. 标题样式：央视风格——粗体、居中、深色调 */
 
+    .page-title {
 
+      font-size: 24px;
 
+      font-weight: bold;
 
+      color: #222222;
 
+      text-align: center;
 
+      margin-bottom: 30px;
 
+      padding-bottom: 10px;
 
+      border-bottom: 2px solid #0066cc; /* 蓝色下划线，体现官方风格 */
 
+    }
 
+
 
+    /* 4. 商品列表容器：Flex 实现3列横向排列 */
 
+    .product-list {
 
+      display: flex; /* 启用Flex布局 */
 
+      flex-wrap: wrap; /* 超出自动换行，适配小屏 */
 
+      gap: 20px; /* 商品卡片间距，均匀分布 */
 
+      justify-content: space-between; /* 左右对齐，间距均匀 */
 
+    }
 
+
 
+    /* 5. 商品卡片样式：简洁卡片，信息层级清晰 */
 
+    .product-card {
 
+      flex: 0 0 calc(33.33% - 14px); /* 计算3列宽度（减去gap的均分间距） */
 
+      background-color: #ffffff; /* 白色卡片，干净清爽 */
 
+      border-radius: 8px; /* 轻微圆角，避免生硬 */
 
+      overflow: hidden; /* 裁剪图片/内容，保持卡片形状 */
 
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 淡阴影，提升质感不突兀 */
 
+      transition: box-shadow 0.2s ease; /*  hover过渡，更丝滑 */
 
+    }
 
+    /* 卡片hover效果：轻微加深阴影，提升交互感 */
 
+    .product-card:hover {
 
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 
+    }
 
+
 
+    /* 6. 商品图片：统一尺寸，避免拉伸 */
 
+    .product-img {
 
+      width: 100%;
 
+      height: 200px; /* 固定高度，保持卡片整齐 */
 
+      object-fit: cover; /* 填充容器，不裁剪关键内容 */
 
+      border-bottom: 1px solid #f0f0f0; /* 底部边框，分隔图片和文字 */
 
+    }
 
+
 
+    /* 7. 商品信息区域：内边距留白，信息层级分明 */
 
+    .product-info {
 
+      padding: 16px;
 
+    }
 
+    /* 商品标题：单行省略，避免换行错乱 */
 
+    .product-title {
 
+      font-size: 16px;
 
+      font-weight: 500;
 
+      color: #222222;
 
+      margin-bottom: 8px;
 
+      white-space: nowrap; /* 不换行 */
 
+      overflow: hidden; /* 隐藏超出部分 */
 
+      text-overflow: ellipsis; /* 超出显示省略号 */
 
+    }
 
+    /* 商品标签：小字体浅灰色，辅助信息 */
 
+    .product-tags {
 
+      font-size: 12px;
 
+      color: #666666;
 
+      margin-bottom: 12px;
 
+      display: flex;
 
+      gap: 8px;
 
+      flex-wrap: wrap;
 
+    }
 
+    .product-tags span {
 
+      background-color: #f0f7ff; /* 浅蓝色背景，呼应央视蓝色调 */
 
+      color: #0066cc;
 
+      padding: 2px 8px;
 
+      border-radius: 4px;
 
+    }
 
+
 
+    /* 8. 价格与销量：突出价格，销量辅助 */
 
+    .product-price-sales {
 
+      display: flex;
 
+      justify-content: space-between; /* 价格居左，销量居右 */
 
+      align-items: center;
 
+    }
 
+    .product-price {
 
+      font-size: 18px;
 
+      font-weight: bold;
 
+      color: #cc0000; /* 红色价格，醒目但不刺眼（央视风格不使用高饱和色） */
 
+    }
 
+    .product-sales {
 
+      font-size: 12px;
 
+      color: #666666;
 
+    }
 
+
 
+    /* 9. 响应式适配：小屏自动调整列数，避免拥挤 */
 
+    @media (max-width: 992px) {
 
+      /* 平板：2列布局 */
 
+      .product-card {
 
+        flex: 0 0 calc(50% - 10px);
 
+      }
 
+    }
 
+    @media (max-width: 576px) {
 
+      /* 手机：1列布局 */
 
+      .product-card {
 
+        flex: 0 0 100%;
 
+      }
 
+      .product-img {
 
+        height: 180px; /* 小屏缩小图片高度，节省空间 */
 
+      }
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+<!-- 央视风格版心容器 -->
 
+<div class="container">
 
+  <!-- 央视风格标题 -->
 
+  <h1 class="page-title">精选商品列表</h1>
 
+
 
+  <!-- 商品列表：3列横向排列 -->
 
+  <div class="product-list">
 
+    <!-- 商品1：雷锋帽 -->
 
+    <div class="product-card">
 
+      <img src="img/iphone.png" alt="冬季加厚保暖防寒雷锋帽子" class="product-img">
 
+      <div class="product-info">
 
+        <h3 class="product-title">Ceokue冬季加厚保暖防寒雷锋帽子男</h3>
 
+        <div class="product-tags">
 
+          <span>自营</span>
 
+          <span>保暖</span>
 
+        </div>
 
+        <div class="product-price-sales">
 
+          <div class="product-price">¥29.80</div>
 
+          <div class="product-sales">销量1000+</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 商品2：炉甘石香皂 -->
 
+    <div class="product-card">
 
+      <img src="img/iphone.png" alt="炉甘石香皂全身皮肤清洁抑菌止痒" class="product-img">
 
+      <div class="product-info">
 
+        <h3 class="product-title">炉甘石香皂全身皮肤清洁抑菌止痒沐浴</h3>
 
+        <div class="product-tags">
 
+          <span>抑菌</span>
 
+          <span>清洁</span>
 
+        </div>
 
+        <div class="product-price-sales">
 
+          <div class="product-price">¥4044.83</div>
 
+          <div class="product-sales">销量600+</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 商品3：三星Galaxy S -->
 
+    <div class="product-card">
 
+      <img src="img/iphone.png" alt="三星(SAMSUNG) Galaxy S" class="product-img">
 
+      <div class="product-info">
 
+        <h3 class="product-title">全球购三星(SAMSUNG) Galaxy S</h3>
 
+        <div class="product-tags">
 
+          <span>全球购</span>
 
+          <span>官方直降1%</span>
 
+        </div>
 
+        <div class="product-price-sales">
 
+          <div class="product-price">¥3617.00</div>
 
+          <div class="product-sales">销量1000+</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 商品4：五香烤花生 -->
 
+    <div class="product-card">
 
+      <img src="img/iphone.png" alt="25年新五香花生米山东" class="product-img">
 
+      <div class="product-info">
 
+        <h3 class="product-title">【半价抢2斤】25年新五香花生米山东</h3>
 
+        <div class="product-tags">
 
+          <span>半价</span>
 
+          <span>自然原香</span>
 
+        </div>
 
+        <div class="product-price-sales">
 
+          <div class="product-price">¥15.80</div>
 
+          <div class="product-sales">销量2万+</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 商品5：iPhone 14 Pro -->
 
+    <div class="product-card">
 
+      <img src="img/iphone.png" alt="Apple iPhone 14 Pro" class="product-img">
 
+      <div class="product-info">
 
+        <h3 class="product-title">拍拍二手 Apple iPhone 14 Pro 【24期免息】</h3>
 
+        <div class="product-tags">
 
+          <span>拍拍二手</span>
 
+          <span>京东物流</span>
 
+        </div>
 
+        <div class="product-price-sales">
 
+          <div class="product-price">¥3299.00</div>
 
+          <div class="product-sales">销量4000+</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 商品6：低价五香花生（补充6个商品，展示换行效果） -->
 
+    <div class="product-card">
 
+      <img src="img/iphone.png" alt="五香烤花生自然原香" class="product-img">
 
+      <div class="product-info">
 
+        <h3 class="product-title">五香烤花生自然原香休闲零食</h3>
 
+        <div class="product-tags">
 
+          <span>零食</span>
 
+          <span>低价</span>
 
+        </div>
 
+        <div class="product-price-sales">
 
+          <div class="product-price">¥9.56</div>
 
+          <div class="product-sales">销量9000+</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>
 
+</body>
 
+</html>

+ 8 - 0
html-demo/html-demo.iml
Просмотреть файл 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="GENERAL_MODULE" version="4">
 
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
 
+    <exclude-output />
 
+    <content url="file://$MODULE_DIR$" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

BIN
html-demo/img/1.png
Просмотреть файл


BIN
html-demo/img/2.png
Просмотреть файл


BIN
html-demo/img/3.png
Просмотреть файл


BIN
html-demo/img/iphone.png
Просмотреть файл