鱼C论坛

 找回密码
 立即注册
查看: 1623|回复: 14

[系列教程] 0 0 1 7 - 文本与超链接

[复制链接]
最佳答案
213 
发表于 2017-1-12 12:08:43 | 显示全部楼层 |阅读模式
购买主题 本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-4-20 09:23:10 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>链接属性和字体样式类别</title>
  6.         <link href="0009CSS.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div id="container">
  10.         <h1>我爱鱼C</h1>
  11.         <p>让编程改变世界!<br/>Change the world by program!</p>
  12.         <a href="http://www.fishc.com/" style="color: blue; text-decoration: none">鱼C传送门</a>
  13.         <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" style="color: blue;text-decoration: none">HTML5-庖丁解牛</a>
  14.         <a href="http://bbs.fishc.com/home.php?mod=space&uid=426569&do=index" style="color: blue;text-decoration: none">传送门</a>
  15.         <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=595" target="_blank">
  16.                 <!--target:规定在何处打开链接文档。-->
  17.                 <section>
  18.                         <h3>JS-庖丁解牛</h3>
  19.                         <p>哇塞,好好玩儿,谁来谁知道</p>
  20.                 </section>
  21.         </a>

  22.         <p>三原色,<span style="color:red">红</span>
  23.                 <span style="color:blue">蓝</span>
  24.                 <span style="color: green">绿</span>
  25.         </p>
  26.         <p><em>欢迎</em>
  27.                 <small>来到</small>
  28.                 <br><strong><q>小天才养殖场</q></strong>
  29.         </p>
  30.         <!--em,斜体,语义加强
  31.                 strong,粗体,突出重要性。
  32.                 big,放大字体
  33.                 small,缩小字体-->
  34. </div>
  35. </body>
  36. </html>
复制代码
0013.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-20 09:54
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-1-26 14:56:41 | 显示全部楼层
本帖最后由 type_J 于 2017-1-26 15:05 编辑

这个span元素的应用,我有一个疑问。如果CSS中对p做了样式处理,color:black;  那在语句中的span会是什么效果?我回去试试了。~~

经过确认,是按span内样式执行的。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-1-26 16:50:23 | 显示全部楼层
type_J 发表于 2017-1-26 14:56
这个span元素的应用,我有一个疑问。如果CSS中对p做了样式处理,color:black;  那在语句中的span会是什么效 ...

你说的这个是选择器的优先级

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-1-26 20:00:01 | 显示全部楼层
不二如是 发表于 2017-1-26 16:50
你说的这个是选择器的优先级

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选 ...

学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
45 
发表于 2017-3-27 18:31:45 | 显示全部楼层
不二如是 发表于 2017-1-26 16:50
你说的这个是选择器的优先级

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选 ...

这应该不是选择器问题吧,两个都是同级别的标签。
这应该是"样式取决于最接近的标签的样式"吧。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-6-26 14:35:53 | 显示全部楼层
一档起步。
  1. <!doctype html>
  2. <html >
  3. <head>
  4.                 <meta  charset="utf-8">
  5.                 <title>文本和超链接</title>
  6.                
  7. </head>
  8. <body>
  9.         <div  id="a">
  10.           <h1>超链接样式</h1>
  11.           </hr />
  12.           <p>超链接样式修炼大法</p>
  13.           <a href="http://www.baidu.com/" target="_blank">
  14.                         <section>
  15.                                         <h1>百度传送门</h1>
  16.                                         <p>纵里寻她千百度,蓦然回首,她还在那个犄角旮旯里</p>
  17.                         </section>
  18.           </a>
  19.           <p>三原色,<span style="color:red">红</span>
  20.             <span style="color:blue">蓝</span>
  21.                 <span style="color:green">绿</span>
  22.           </p>
  23.           <p><em>欢迎</em><small>来到</small><br>
  24.           <strong><big>老司机部落联盟</big></strong><br>
  25.           <cite><big><q>fishman</q></big></cite>
  26.           </p>
  27.         </div>
  28. </body>
  29. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
老司机潜力  发表于 2017-6-26 18:20

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2017-7-9 10:29:57 | 显示全部楼层
本帖最后由 MSK 于 2017-7-9 10:40 编辑

交!作!业!


  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>文本与超链接</title>
  5.         <meta charset='utf-8'>
  6.     </head>
  7.     <body>
  8.         <h1>
  9.             <span style='font-size:30px'>
  10.             <strong>煎蛋最新资讯</strong>
  11.             </span>
  12.         <h1>
  13.         <hr />
  14.         <section style='font-size:15px'>
  15.             <nav>
  16.                 <ol type=1>
  17.                     <li>
  18.                         <article>
  19.                             <a href='http://jandan.net/2017/07/09/injecting-human-blood.html' target='_blank'>
  20.                                 <h3>瘾君子们注射人血以获得快感</h3>
  21.                             </a>
  22.                             <p><em><small>镜子大王 · 健康</small></em></p>
  23.                             <p><q><big>使用者可能认为以这种方式注射药物会产生更为强烈的感觉,或者这个人是想从血液中获得快感。</big></q></p>
  24.                             <figure>
  25.                                 <img src='http://pic.yupoo.com/jdvip/BQSJzdk5/custom.jpg' alt='图片'>
  26.                             </figure>
  27.                         </article>
  28.                     </li>
  29.                     <li>
  30.                         <article>
  31.                             <a href='http://jandan.net/2017/07/09/fml-1046.html' target='_blank'>
  32.                                 <h3>发霉啦小视频:神出鬼没的球</h3>
  33.                             </a>
  34.                             <p><em><small>Mike · 发霉啦</small></em></p>
  35.                             <p><q><big>发霉啦小视频4发~</big></q></p>
  36.                             <figure>
  37.                                 <img src='http://tankr.net/s/custom/DUW3.png' alt='图片'>
  38.                             </figure>
  39.                         </article>
  40.                     </li>
  41.                     <li>
  42.                         <article>
  43.                             <a href='http://jandan.net/2017/07/09/dog-4-2.html' target='_blank'>
  44.                                 <h3>半夜背后凉飕飕:高高狗-4</h3>
  45.                             </a>
  46.                             <p><em><small>喵熊汪太狼 · 故事</small></em></p>
  47.                             <p><q><big>高高狗来了,大家不用敲碗了!!</big></q></p>
  48.                             <figure>
  49.                                 <img src='http://tankr.net/s/custom/FQMV.jpg' alt='图片'>
  50.                             </figure>
  51.                         </article>
  52.                     </li>     
  53.                 </ol>
  54.             </nav>
  55.         </section>
  56.     </body>
  57. </html>
复制代码
turtle_看图王.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-14 00:10:16 | 显示全部楼层
今天继续来学习,目标是学到020!
017讲,交作业!!!
017.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-11 15:05:38 | 显示全部楼层
继续学习
<!DOCTYPE html>
<html>
<head>
                <meta charset='utf-8'>
                <title>文本与超链接</title>
</head>
        <body>
                <div id="a">
                        <h1>
                                <span style='font-size:50px'>
                                <span style="color:yellow">Dota2</span>
                                <span style="color:black">直播</span>
                        <h1>
                        <hr />
                        <section style='font-size:30px'>
                                <nav>
                                        <ol type=1>
                                                <li>
                                                        <article>
                                                                <a  target='_blank'>
                                                                        <h3>Dota2在线直播</h3>
                                                                </a>
                                                                <p><em><small>Dota2星计划</small></em></p>
                                                                <p><em><small>妹纸主播</small></em></p>
                                                                <p><em><small>中单solo</small></em></p>
                                                                <p><em><small>后期carry</small></em></p>
                                                                <p><q><big>zsmj直播间,快乐dota</big></q></p>
                                                        </article>
                                                </li>
                                        </ol>
                                </nav>
                        </section>
                </div>
        </body>
</html>
360截图20180311150522067.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-3-11 15:40

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 2018-4-30 13:08:48 | 显示全部楼层
  这兄弟完成的实例效果,我可以用一个h标签和几个p标签完成,不需要和他用那么多不同类的标签,这样会不会更好一点呢
***********************************************************************************
                           </article>
                                                </li>
                                        </ol>
                                </nav>
                        </section>
                </div>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 2018-7-13 23:01:11 | 显示全部楼层
交作业啦!
  1. <!DOCTYPE HTML>
  2. <head>
  3.     <meta charset='utf-8'>
  4.     <title>0017 文本格式和超链接</title>
  5. </head>
  6. <body>
  7.     <a href="http://www.baidu.com">普通度娘</a><br><br>
  8.    
  9.     <a href="http://www.baidu.com" target="_blank">新窗口度娘</a><br><br>
  10.    
  11.     <a href="http://www.baidu.com" target="_blank">
  12.         <img src="https://www.baidu.com/img/bd_logo1.png">
  13.         <h1 >百 <span style="color:black">熊掌</span> 度</h1>
  14.         <p><em>带图 </em><small>配有</small><strong>文字小弟</strong>的<big>度娘</big></p>
  15.     </a><br><br>
  16.    
  17. </body></html>
复制代码


0017.JPG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-9-25 00:27

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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