设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 【web学习笔记】012-被安排的明明白白
返回列表 发新帖
查看: 2303|回复: 0

[学习笔记] 【web学习笔记】012-被安排的明明白白

[复制链接]
liuzhengyuan
发表于 2019-8-5 18:09:50 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 liuzhengyuan 于 2019-8-6 08:09 编辑

《零基础入门学习web开发》第12讲 被安排的明明白白 | 学习笔记


· 程序1：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>鱼C学编程 - 第011课 - abbr元素展示</title>
  5.         <meta charset="UTF-8"/>
  6.         <style>
  7.                 ul.a(list-style-type: square)
  8.         </style>
  9. </head>
  10. <body>
  11.         <p>无序列表：</p>
  12.         <ul>
  13.                 <li>coffee</li>
  14.                 <li>tea</li>
  15.                 <li>me</li>
  16.         </ul>
  17.         <p>有序列表：</p>
  18.         <ol>
  19.                 <li>html5 & css3</li>
  20.                 <li>JaveScript</li>
  21.                 <li>JQuery</li>
  22.                 <li>BootStrapt</li>
  23.                 <li>Vue</li>
  24.                 <li>PHP</li>
  25.         </ol>
  26.         <ol type="1" start="2" >
  27.                 <li>b</li>
  28.                 <li>c</li>
  29.                 <li>d</li>
  30.         </ol>
  31. </body>
  32. </html>
复制代码

· 运行效果1：
web-12-1.PNG


· 程序2：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>list-style-type演示</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8. <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9. <meta name="author" content="小甲鱼">
  10. <style>
  11.         ul.a {list-style-type: square;}
  12.         ul.b {list-style-type: disc;}
  13.         ul.c {list-style-type: circle;}
  14.         ul.d {list-style-type: none;}
  15.     </style>
  16. </head>
  17. <body>
  18. <ul class="a">
  19. <li>1</li>
  20. <li>2</li>
  21. <li>3</li>
  22. </ul>
  23. <ul class="b">
  24. <li>1</li>
  25. <li>2</li>
  26. <li>3</li>
  27. </ul>
  28. <ul class="c">
  29. <li>1</li>
  30. <li>2</li>
  31. <li>3</li>
  32. </ul>
  33. <ul class="d">
  34. <li>1</li>
  35. <li>2</li>
  36. <li>3</li>
  37. </ul>
  38. </body>
  39. </html>
复制代码

· 运行效果2：
web-12-2.PNG




· 程序3：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>list-style-type演示</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8. <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9. <meta name="author" content="小甲鱼">
  10. <style>
  11.         ul{list-style-image: url("https://ilovefishc.com/html5/html5/lesson12/test5/img/turtle.png");}
  12.     </style>
  13. </head>
  14. <body>
  15.         <ol type="I">
  16.                 <li>a</li>
  17.                 <ul>
  18.                         <li>1</li>
  19.                         <li>2</li>
  20.                         <li>3</li>
  21.                 </ul>
  22.                 <li>b</li>
  23.                 <li>c</li>
  24.         </ol>
  25.        
  26.         <dl>
  27.                 <dt>你好</dt>
  28.                 <dd>一个中文词汇</dd>
  29.         </dl>
  30. </body>
  31. </html>
复制代码

· 运行效果3：
web-12-3.PNG

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-3 11:03

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表