QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1379|回复: 13

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

[复制链接]
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是 发表于 2017-1-12 12:08:43 137913 | 显示全部楼层 |阅读模式
购买主题 已有 25 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 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
最佳答案
0 
累计签到:26 天
连续签到:1 天
type_J 发表于 2017-1-26 14:56:41 | 显示全部楼层
本帖最后由 type_J 于 2017-1-26 15:05 编辑

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

经过确认,是按span内样式执行的。
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是  楼主| 发表于 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{...}
最佳答案
0 
累计签到:26 天
连续签到:1 天
type_J 发表于 2017-1-26 20:00:01 | 显示全部楼层
不二如是 发表于 2017-1-26 16:50
你说的这个是选择器的优先级

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

学习了
最佳答案
44 
累计签到:532 天
连续签到:1 天
wei_Y 发表于 2017-3-27 18:31:45 | 显示全部楼层
不二如是 发表于 2017-1-26 16:50
你说的这个是选择器的优先级

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

这应该不是选择器问题吧,两个都是同级别的标签。
这应该是"样式取决于最接近的标签的样式"吧。
最佳答案
0 
累计签到:127 天
连续签到:1 天
晓月56 发表于 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^_^

查看全部评分

最佳答案
30 
累计签到:158 天
连续签到:1 天
MSK 发表于 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
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-14 00:10:16 | 显示全部楼层
今天继续来学习,目标是学到020!
017讲,交作业!!!
017.jpg
最佳答案
0 
累计签到:119 天
连续签到:1 天
likesunshine 发表于 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^_^

查看全部评分

最佳答案
2 
累计签到:20 天
连续签到:2 天
华丽转身123 发表于 2018-4-30 13:08:48 | 显示全部楼层
  这兄弟完成的实例效果,我可以用一个h标签和几个p标签完成,不需要和他用那么多不同类的标签,这样会不会更好一点呢
***********************************************************************************
                           </article>
                                                </li>
                                        </ol>
                                </nav>
                        </section>
                </div>

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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

    移动客户端下载(未启用)
    微信公众号

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

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.3 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-6-21 12:55

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