前端知识总结
文章平均质量分 84
包含前端知识的总结以及一些项目的实战练习
guai_guai_guai
这个作者很懒,什么都没留下…
展开
-
周报:浅谈对豆瓣网页实战的注意事项
在实现代码的过程中,我们会重复性的使用一些特殊样式,比如左浮动右浮动,或者对雪碧图的同意设置等,可将他们均写在common.css中这样当其他网页也需用这些特殊样式时,直接引用css文件即可,当然每个网页中都会有该网页独特的重复的样式,这些样式可写在作者样式里,注意标注为首页通用样式,防止和该网页中其他部分css代码混淆。设置+86右边框时,注意观察,他的边框并未充满,这时只需要将高度减小,因为垂直居中,所以line-height也要相应减小,但定位top值就要变成减小的值/2.原创 2023-12-02 12:11:38 · 893 阅读 · 0 评论 -
项目11:豆瓣首页-页脚 完结撒花!
这次我们就来制作豆瓣首页的最后一部分页脚。同样,页脚也在container中,页脚分为左区域和右区域,左区域里是多个p元素与a元素结合完成的,还要插入一些图片,右区域里里有几个横向菜单,以及一张图片。原创 2023-11-30 12:00:00 · 355 阅读 · 0 评论 -
项目实战7:豆瓣首页-小组
我们就继续开始制作豆瓣网页吧,这次是小组读书部分。原创 2023-11-27 12:00:00 · 334 阅读 · 1 评论 -
项目实战9:豆瓣首页-音乐
豆瓣首页分为三个部分:aside-left,aside-right以及main。原创 2023-11-30 08:00:00 · 416 阅读 · 0 评论 -
项目实战5:豆瓣时间和视频
这一部分可分为左栏(aside-left)和main ,由于之前已经设置过aside-left相关元素,所以直接引用类名即可这里的豆瓣时间是一个a元素,之前已经统一给a元素设置过字体颜色,如果此时只给title设置颜色,a元素的颜色并不会继承父元素,故要想让这里的a元素改变颜色,只要再重新设置一个类名dark-color即可,将其类名加到a元素上此时效果就显现出来啦,而且鼠标指上去的效果也没变喔!紧接着就是旁边的热点内容,这个样式已经在上篇做过了,故在这里直接复制粘贴即可。原创 2023-11-24 12:00:00 · 355 阅读 · 1 评论 -
项目实战四:豆瓣首页-热点区域
接下来要制作的就是热点区域了,首先是间隔性的背景颜色的改变,这里考虑用nth-child(even)原创 2023-11-24 11:00:00 · 877 阅读 · 1 评论 -
项目实战6:豆瓣首页-豆瓣电影
电影区域分为左栏,主区域以及右栏,左栏有标题和菜单,标题和之前写过的样式相同首先是left-menu区域,不考虑任何东西的情况下,可能会直接写多个a元素,原创 2023-11-26 12:00:00 · 789 阅读 · 1 评论 -
项目实战8:豆瓣首页-读书
首先是aside-left,此部分与之前电影部分结构相同,直接将其移过来并适当改变文字即可,此部分与之前不同的是多了一个menu-adv区域,此区域由两个a元素构成,第一个a元素里放一个span元素,为其填充背景图,第二个a元素放文字内容。同样,还是将整个读书区域放在类名为section的div盒子里,以便背景颜色的显现,接着是container,book-area,整体还是分为之前写过样式的aside-left,aside-right以及main。我们可以发现此区域里所有的a元素与之前统一设。原创 2023-11-28 12:00:00 · 390 阅读 · 1 评论 -
周报:css相关扩展知识
linne-height:normal,默认值,使用文字默认的gap,在谷歌浏览器中,Arial字体使用默认的gap值,他有默认行高如果line-height与font-size一致,则gap值就会成为负值,多行文本排列时,行与行之间会发生重叠。请注意,虽然 <object>元素是一种强大的嵌入元素,但在某些情况下,使用更简单的元素,如 <img>、<audio> 或 <video>可能更为合适,具体取决于嵌入的内容类型。子元素首先继承父元素的行高属性,然后根据各种因素重新计算实际的行高值。原创 2023-11-25 15:21:17 · 914 阅读 · 0 评论 -
项目实战10:豆瓣首页-豆品和同城
继续之前的操作,section,container,clearfix,常规操作,接着分左栏区域,右栏区域以及主区域,左栏里又有标题,右栏里有两个标题,标题之间有插有一个广告图片,广告图片下方又有一行文字,这行文字我们用a元素将其包裹,主区域里还是标题+item-list。在这里我再说一说主区域里图片与文字的位置关系吧,这里是文字环绕图片,给文字添加overflow:hidden,使其创建BFC,避开浮动盒子即可,设置图片的margin-right来设置图片与文字之间的距离。原创 2023-11-30 09:00:00 · 345 阅读 · 0 评论 -
定位3: 轮播图
今天我们就继续练习定位吧!首先还是创建重置文件以及轮播图.css接着就创建html文件:先创建一个类名为banner(轮播图常用类名)的div盒子,这个盒子的大小只是展现出来的图片大小。原创 2023-11-10 21:06:58 · 63 阅读 · 1 评论 -
周报:HTML&CSS进阶及项目要点复习
通过前几周对html和css基础的学习,我对前端的认识又更加丰富和深刻了,本周我主要是学习了HTML和CSS进阶部分以及对CSS基础中一些项目的复习与巩固。首先我就先聊聊我所学习的有关HTML和CSS进阶部分的知识吧。原创 2023-11-18 11:36:39 · 120 阅读 · 1 评论 -
项目二 浮动练习
这次,我们主要通过浮动来练习以下网页样式 : 同样,先创建一个movies.html以及css文件(包括reset.css和movies.css)将网页名字改为“正在热映--猫眼电影”首先将页面分为三部分,页头,主区域(main)和页尾页头:(在这里页头涉及定位的知识,就先不分析页头了,下一次的博客中会有关于定位的项目喔)main: 页尾: 首先设置main,整体行高1.5接着将main分为上下两部分:上:下:这里应该就会有人疑问:为什么分为上下两部分,而不是四部分呢,大家注意观察一下,“下”部分整体宽度一原创 2023-11-07 20:58:13 · 71 阅读 · 0 评论 -
项目实战2:豆瓣首页-注册区域
横幅(login)区域:我们将以上部分做成一个新的页面(iframe),之后将该页面嵌入在主页面即可接着我们将短信注册和密码登录两个界面放至类名为container的div的盒子中首先构造短信注册(类名为login的div),注册里又可分为三部分,选择区域,表单区域,原创 2023-11-23 12:00:00 · 38 阅读 · 0 评论 -
项目实战1:豆瓣首页-页头
经过对前端html和css的基础和进阶的学习,我对前端也有了更深的理解,在这里我就利用所学知识来进行一次豆瓣首页的项目实战吧!原创 2023-11-22 21:50:08 · 36 阅读 · 0 评论 -
前端入门(HTML核心基础和CSS基础)
元素的使用是根据内容的类型决定,不能根据元素会产生什么样的样式效果来决定,有时浏览器会对某种元素有默认的样式,为了使用户在不同的浏览器产生同样的效果,这时就需要重置浏览器的默认效果,之后再用CSS设置统一的样式来增强用户的体验感。浏览器默认的设置 中 14px。2. 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块(为定位元素的父元素的边框里面),若找不到,则它的包含块为整个页面。绝大部分情况下:盒子的包含块,为其父元素的内容盒,相当于子元素安放在父元素的内容区,会随父元素的移动而移动。原创 2023-11-04 00:07:14 · 94 阅读 · 0 评论 -
定位练习2 :弹出层
首先还是创建出一个重置css文件和自定义css文件(弹出层.css)在这里我们先练习弹出层有关样式,所以在这里我们模拟一下网页图片做出后的效果吧(插入网页图片)通过上图可观察出,弹出层出现时,周围好像变暗了 ,像一片阴影遮住了整个网页,这其实是设置了背景颜色透明(遮罩层(类名为modal)),首先我们就先创造一个div盒子作为遮罩层,该遮罩层有以下特点。原创 2023-11-09 22:08:39 · 59 阅读 · 1 评论 -
项目实战3:豆瓣首页-横幅区域
接下来就是。原创 2023-11-23 19:22:13 · 329 阅读 · 0 评论 -
背景图练习
今天我们试着做以下内容吧(图片素材是随便找的,整体视觉效果可能不太好,主要看做法喔)同样,先创建重置样式和index.css,再在html中引入两个css文件,首先,先在body里插入一张背景图片(background:url(./图片路径)no-repeat)。原创 2023-11-11 17:33:36 · 34 阅读 · 1 评论 -
定位练习 1:二级菜单
这次就尝试制作以下二级菜单吧首先还是先准备好reset.css以及二级菜单.css,之后在设计自己的样式时,名字最好用英文来表示。先将二级菜单中的元素结构设计出来。原创 2023-11-08 22:46:56 · 85 阅读 · 0 评论 -
项目1:常规流练习
接着设置header字体及样式以及原文地址及链接的样式,设置原文地址样式时,最好别用元素选择器,项目中同种元素很多,为了避免混淆,最好使用类选择器,在这里就设置原文地址class为original-link。之后为头部设置样式 ,背景颜色,文字颜色,文字居中(可继承,子元素最终会继承该样式),设置完背景颜色之后会发现原本的白色已然被覆盖,那是因为外部article的高度是自适应的,适应其内容,故白色背景会被覆盖。先将设计稿分为几个区域,分别对每个区域进行html和样式的设计,先看整个深色区域,原创 2023-11-06 00:22:42 · 48 阅读 · 0 评论 -
周报:静态页面(酷狗首页)的制作-下
本周呢还是主要进行了酷狗剩余页面的完成,后半部分的网页结构非常相似,吸取了上次的教训之后,我添加了许多通用样式,再对特殊的样式进行修改,写代码的速度真的快了许多,而且心理上也没有任何压力。在这里我就说说其中一个样式的制作吧!样式效果如下:这里利用了固定定位和绝对定位以及字体图标的应用对于下方宽度不占满的边框,我是使用一个新的元素,设置其宽高,背景颜色以及居中设置的,当然,这只是我的想法,肯定也有很多更简便更好的方法实现。原创 2023-12-16 00:00:00 · 482 阅读 · 0 评论 -
HTML以及CSS相关知识总结(一)
在<head>标签内,可以通过<meta>标签的charset属性规定HTML文档应该使用哪种字符编码,一般情况下,统一使用"UTF-8"编码,即万国码,基本包含了全世界所有国家需要用到的字符。由以上代码可知,尽管ID选择器的权重比元素选择器的权重大,但p元素仍然使用了元素选择器的样式,因为ID选择器为父元素的样式,而p元素对于父元素的样式为继承,权重为0,故元素选择器的样式占上方。网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致,因此在布局前,首先清除·网页元素的内外边距。原创 2024-01-21 12:18:43 · 1731 阅读 · 0 评论 -
周报:静态页面(酷狗首页)的制作-上
在前端领域学习了HTML和CSS有关知识后,我开始进行对常见网页制作的练习了,本次我尝试制作的是酷狗首页。以下为酷狗首页的样例:不难发现,酷狗首页和豆瓣首页有很多相似之处,练习酷狗首页就相当于我对常规页面制作的巩固复习吧。创建项目之后,首先就是将css文件与html文件分开,css文件包括重置样式,作者样式和通用样式,在这里我先补充一个之前豆瓣首页中我没总结过的相关效果的做法吧。原创 2023-12-10 12:52:49 · 1131 阅读 · 0 评论