我只是介绍学习的过程与方法，并不具体涉及多少具体知识。
入门级
一、学习使用网页制作软件
制作一个静态网页其实非常简单，你只需要使用Frontpage、Dreamweaver等所见即所得的网页制作工具就可以很快制作出一个静态页面。所以学习Frontpage、Dreamweaver(学其中一种其实就行了，功能都非常强，也非常容易上手)等网页制作软件的使用是你学习的第一步，这其实不难，只要你会WORD等文字编辑软件，学习Frontpage或者Dreamweaver的初步操作也就很轻松。
使用Frontpage或Dreamweaver编辑制作一个入门级的页面很简单，即使象WORD一样打上一段文字、插入一些图片就可以成为一个页面，但要制作一个布局合理，美观大方的页面就需要花些功夫（经验的积累），毕竟网页编辑比文字编辑软件要难以掌握。
1、网页最好是使用表格布局。所有的页面元素（文字、图片、FLASH等)全部建立在表格内,充分使用表格嵌套(表格里插入表格）来固定一些网页元素的位置，使得页面内容整齐、布局合理。整个网页最外层的表格最好设置宽度为760-780象素之间并居中（因为用户显示器的显示分辨率为800*600或者使1024*768的），网页属性中设置上边距为0。
2、注重颜色的搭配和各种网页元素之间的搭配。整个网站页面的色调应保持一致(统一风格），正文的背景色或背景图片的颜色尽量选较淡的颜色，正文的字体大小一般设置为9pt、宋体；字体颜色和背景颜色保持一定的落差，使得文字清晰可见。适当插入一些图片和FLASH等丰富页面内容的元素，使得网页活泼、可观性强，图片要根据内容保持适当的大小和位置，不要太多，也不要太拥挤。图片的风格尽量和网页的风格保持一致。
二、网页图像的布局和设计
1、在浩瀚的网络中多参考那些优秀的网站，逐步培养自己的网页设计风格；不断搜集整理大量网页素材（图片、FLASH等），使得自己在设计网页时左右逢源、得心应手。
2、学习PHOTOSHOP、FLASH等图像制作软件和FLASH动画的制作软件，仅仅靠网络上搜集的网页素材有时还是不能满足自己的需求的，要懂得编辑和制作属于自己的图片和动画。
3、主页面的LOGO或BANNER是整个网站内容的体现和象征，应着重设计好。
4、发扬精益求精的精神，不要疏忽任何不足之处，不要有将就、凑合着也行的心态对待你的作品。
三、学习IIS的安装和配置
IIS是微软的Web服务器组件，你可以通过“添加/删除程序”去安装IIS（SERVER版本默认已安装了），IIS的初级配置很简单，只需要配置主目录和默认文档就可以正常运行。IIS6.0稍微复杂一些，主要是ASP程序的权限开发、父路径的启用和MIME类型的添加等配置。
中级篇
一、学习HTML语言
1、当你初步掌握了Frontpage或者Dreamweaver后，你想继续深入的话必须学习HTML语言，HTML语言不是非常难，其实所有使用网页编辑软件设计的页面其实就是一个HTML文本文件，你可以经常对照你设计出来的页面和所对应的HTML之间参考，逐步从实践中熟悉和掌握。
2、 学习HTML过程建议为：学习HTML的总体结构->学习各种网页元素(文字、表格、行、列、图片、超级链等等）的HTML标签及其控制代码（这需要一定的时间)->经常对照实际网页和其对应的HTML代码从中领悟和读懂HTML。
3、学习HTML的目的不是要你使用HTML去设计网页(傻蛋才这么干)，而是为了进一步提升网页设计的效果和为今后的网页特效和动态网页的设计打下基础，你只要能读懂HTML就足够了。
二、学习CSS、JAVASCRIPT
CSS又叫层叠样式表单，是为了更加精确的控制各种网页元素而在HTML语言基础上发展起来的一种技术，可以认为CSS是HTML语言的扩展，CSS可以单独为一个文件，在主页中调用，也可以嵌入到HTML中。
JAVASCRIPT是一种脚本语言，有了它，可使网页变得生动。使用它的目的是与HTML超文本标识语言结合实现网页中的一些动态效果，它是通过嵌入或调入在标准的HTML语言中实现的（这一点同CSS相同）,JAVASCRIPT具有高级语言的特性，如果你熟悉一种高级语言，学习JAVASCRIPT不会很难。
三、掌握PHOTOSHOP和FLASH等图像制作和动画制作软件,设计出自己的东东自己的网页。
高级篇
高级篇主要是网络数据库的使用，关于网络数据库的搭建，可选方案很多，在这里只介绍ASP+ACCESS的搭配，毕竟是目前最流行的方式。虽然现在有了ASP.NET和JSP这样的新技术，但你学好ASP，你一定不会后悔的。
一、ACCESS是微软公司的一个数据库系统，是OFFICE软件中的一个组件，学习ACCESS只要学会创建和编辑数据库和表就可以了，不必花太多时间去深入研究。
二、ASP是一套微软开发的服务器端脚本环境,，学习ASP必须先学习VBSCRIPT脚本并且熟悉HTML，不然你根本没办法学下去。VBSCRIPT和JAVASCRIPT一样是一种脚本语言，VBSCRIPT其实不难，你如果学过VB就很容易入门。VBSCRIPT是VB的一个分支，遵循VB的语言规则，VBSCRIPT是ASP的默认脚本语言。VBSCRIPT有一定了解后，你就必须学习ASP的编程规则和相关知识了。在所有网络数据库编程中ASP应该是最简单的，但并不代表它很好学。学习ASP最好的方法是到网络中下载源码，逐步研究学习，充分动手才能逐步掌握，当然最好是买一本ASP书籍，书是奠定一定的理论基础，最关键的是实践，把十分之一的时间花在书本上，十分之九的时间花在实践上。
三、熟练掌握 SQL结构化查询语言，你只有把SQL语言的SELECT语句掌握了，当然SELECT语句是比较复杂的，使用他对数据库进行查询、修改、删除、增加等操作。
四、结合所学知识综合运用，逐步熟悉掌握。
总结
真正学好网站建设不是一件很容易的事，首要的是你的兴趣，学习理论和实践相结合，还是那句话，你把小部分的时间去学习理论，大部分时间自己去实践。学好网站建设所要学习的软件很多，我按学习顺序排列大致罗列与下（供参考）：
1、Frontpage、Dreamweaver（学其中1中也就可以了）
2、IIS的配置
3、HTML语言、CSS、JAVASCRIPT、PHOTOSHOP、FLASH
4、ACCESS数据库、SQL查询语言、VBSCRIPT、ASP
5、更深入的：PHP、ASP.NET（VISUAL BASIC.NET)、JSP、SQL SERVER
篇后语
以上所述的是本人学习的经过，本人现在也还在入门阶段，正在学习ASP编程知识。很多方面也只是有些了解。欢迎高手批评指针，需要交流的话，请发贴。
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的CSS隐藏页面元素的方法。用CSS隐藏页面元素有许多种方法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute
然后将位置设到不可见区域。
你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同，这些
不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。正在从事web前端工作的小伙伴们来和小编一起学习一下吧！
一、opacity
opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(boundingbox)而设计的。这意味着将opacity设为0
只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。
.hide{
opacity:0}
如果你打算使用opacity
属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它所有的内容会被读屏软件阅读，就像网页上的其他元素那样。换句话说，元素的行为就和它们不透明时一致。
我还要提醒一句，opacity属性可以用来实现一些效果很棒的动画。任何opacity属性值小于1
的元素也会创建一个新的堆叠上下文(stackingcontext)。
看下面的例子：
看@SitePoint提供的例子“用opacity隐藏元素”
当你的鼠标移到被隐藏的第2个的区块上，元素状态平滑地从完全透明过渡到完全不透明。区块也将cursor属性设置为了
pointer，这说明了用户可以与它交互。
二、visibility
第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity
属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。
这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了visibility
状态切换之间的过渡动画可以是时间平滑的(事实上可以用这一点来用hidden实现元素的延迟显示和隐藏——译者注)。
.hide{
visibility:hidden}
下面的例子演示了visibility与opacity有怎样的不同：
看@SitePoint提供的例子“用visibility隐藏元素”
注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为
visible即可(就如例子里面的.o-hidep——译者注)。尝试只hover在隐藏元素上，不要hover在p
标签里的数字上，你会发现你的鼠标光标没有变成手指头的样子。此时，你点击鼠标，你的click事件也不会被触发。
而在标签里面的
标签则依然可以捕获所有的鼠标事件。一旦你的鼠标移动到文字上，
本身变得可见并且事件注册也随之生效。
三、display
display属性依照词义真正隐藏元素。将display属性设为none
确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none
任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效。
不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它，就像操作其他的元素。
.hide{
display:none}
看下面的例子：
@SitePoint提供的例子“用display隐藏元素”
你将看到第二个块元素内有一个
元素，它自己的display属性被设置成block，但是它依然不可见。这是
visibility:hidden和display:none的另一个不同之处。在前一个例子里，将任何子孙元素visibility显式设置成
visible可以让它变得可见，但是display不吃这一套，不管自身的display值是什么，只要祖先元素的display是
one，它们就都不可见。
现在，将鼠标移到第一个块元素上面几次，然后点击它。这个操作将让第二个块元素显现出来，它其中的数字将是一个大于0
的数。这是因为，元素即使被这样设置成对用户隐藏，还是可以通过JavaScript来进行操作。
四、position
假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况(opacity和visibility影响布局，
display不影响布局但又无法直接交互——译者注)。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这
种办法的CSS：
.hide{
position:absolute
top:-9999px
left:-9999px}
下面的例子阐明了怎样通过绝对定位的方式隐藏元素，并让它和前面的那个例子效果一样：
看@SitePoint提供的例子“用position属性隐藏元素”
这种方法的主要原理是通过将元素的top和left
设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处(或者潜在的缺点)是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解，是因为你只是将元素移到可视区域外面让用户无法看到它。
你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建
自定义复选框和单选按钮时经常被使用。(用DOM模拟复选框和单选按钮，但用这个方法隐藏真正的checkbox和radio
元素来“接收”焦点切换——译者注)
五、clip-path
隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过clip属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做
clip-path。NitishKumar最近在SitePoint发表了“介绍clicp-path
属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。
记住，clip-path属性还没有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG
文件，浏览器支持度还要更低。使用clip-path属性来隐藏元素的代码看起来如下：
.hide{
clip-path:polygon(0px0px,0px0px,0px0px,0px0px)}
下面是一个实际使用它的例子：
看@SitePoint提供的例子“用clip-path属性隐藏元素”
如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过clip-path隐藏了。如果你点击它，它会移除用来隐藏的
class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多WordPress站点使用clip-path或者之前的
clip来实现专门为读屏软件提供的文字。
虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区
域之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。
结论
在这篇教程里，我们看了5种不同的通过CSS
隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。
以上就是小编今天为大家分享的关于Web前端工程师应该知道的CSS
隐藏页面元素的方法的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
回答于 2022-10-28 详情 该链接由问题回答方推荐
