2021-11-28 html日记

    多日没有写过简书了,在此补充。

    经过这几日的网页制作学习,我掌握了html的部分语法,并学会了css的使用方法,能制作基本的网页样式,使网页不再单调,能够有更多的色彩。

    关于css的使用我了解到了两种方式,一种是内嵌css(通过再html中head属性内输入<stytle> </stytle>标签内嵌css指令),一种是外部引用css指令文件(通过在外部文件夹中创建css格式的css指令集,再通过html的<link type="text/css" rel="stytle..." herf="#">指令引用css指令集)。这两种方式都可以产生同样的效果,虽然论方便性来说,内嵌是更为方便的,但是老师却推荐我们使用外部引用的方式,也没有告诉我们原因,但据我推断,使用这种方式可能是为了更好的管理代码,将两种代码分开,对于以后我们走上工作,程序愈加复杂的时候方便别人以及我们的调试。还有可能是为了安全性,我曾因为好奇用开发者工具打开了b站的源代码,我发现其中的代码我大部分都能看懂但是我敢肯定通过这些代码肯定是完不成这样庞大的网站,这是我就会想起来了css的外部引用,或许像这种大型网站都是采用了外部引用的方法,而使用这种方法会使别人无法轻易的获取b站的css源代码,而被窃取劳动成果。

    而在这几天的css使用中我也遇到了一个极其微小的错误但是却让我迷茫了2天都未曾解决的小问题,在此分享出来,希望后人少走弯路。

    问题是这样的,css中有个代码 :hover 他的作用是为网页上的元素赋予鼠标移动上去的格式变动,他的基本应用是:

                                        a : hover {color=" red ";}

    它的作用是是鼠标悬停的超链接颜色变为红色,这是这个语法最基本的应用,但我的作业是


二级标签变化格式一级标签也会变换格式

    面对这样的问题我找了很多方法,我通过不停的变换关键词在网络上搜寻,但是一无所获,网络上关于hover的应用讲解基本都是如上所说的,这时我就开始懊悔在课上的打盹行为了,或许我要的关键信息就在我打的某个盹中呢。我不得不照抄课本上的css代码期待得到同样的效果,但事与愿违,当我鼠标移上去时我想要其产生的效果根本就没有发生,这肯定是书本上的css标签与我的html文件是不完全重合的原因。

    书上的代码是这样的:

                                    #name li.blue:hover h4{

                                                   ........

                                                   .........   

                                        }

-----------------------------------------------------------------------------------------------------

<div id="name">

    <li class="blue">

            <h4>. . . . . </h4>

                    .......

                     . . .. .. 

                     . .. . .. 

</div>

-----------------------------------------------------------------------------------------------------

    突然,我灵光一线,我突然理解了hover这个代码的含义,希望容许我详细讲讲:

            hover这个代码或许还有更深层的含义他的语意应当是这样子的

            [鼠标移动至的区域]:hover [格式改变的区域]{

                             区域内改变的格式

}

            如果hover代码的语义真的是这样的话,那课本上的代码就容易解读多了,所以我带着这样的想法回到了dw重新尝试了一遍,果然如我所想,hover的使用方法果然是如此一般,这困扰了我两天的代码就这样被我解决了,我一时舒畅无比,一个这么小小的问题,竟然会阻挠我这麽多天,这使我意识到了自己能力的不足,以及细节的重要性,还有最重要的一个感悟!上课不要打瞌睡!!!

      

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、CSS笔记: 点击链接后退页面: 回到上一个网页 ——修改placeholder提示的样式: 1.除IE外通用...
    倚剑闯天涯_阅读 4,286评论 1 2
  • 第1章 html基本结构 认识HTML: html不是一种编程语言,是一种标志语言 标记语言是由一套标识标签组成的...
    不喝可乐_7889阅读 3,926评论 0 0
  • 1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种? CSS样式加载一共有四种方式: 1、行...
    没糖_cristalle阅读 4,262评论 0 0
  • 第一个网页 Emmet插件:自动生成HTML代码片段 注释 注释为代码的阅读者提供帮助,注释不参与运行 在HTML...
    炎鸿阅读 3,715评论 0 0
  • 一、 前端介绍 HTML: 用来勾勒出页面的结构和显示的内容 CSS: 用来美化页面的 JavaScript:给页...
    MrSaint王阅读 2,563评论 0 0

友情链接更多精彩内容