Heim > Web-Frontend > H5-Tutorial > 大牛们鉴定下我网页制作的(html Div+css)属于什么水平?

大牛们鉴定下我网页制作的(html Div+css)属于什么水平?

WBOY
Freigeben: 2016-06-07 08:43:00
Original
1429 Leute haben es durchsucht

回复内容:

第一次模仿页面模仿的是百度输入法,那时候页面不这样,不过也差不多,一个nav就把我折腾死,float:left是什么鬼,padding, margin怎么用,position的absolute、relative有什么区别,为什么我设置了跟别人的效果就是不一样,其实真的讲起来,css方面你需要搞明白的不多
1. display
常用的display就两种,inline和block,div、p默认是block,span、a默认inline,你试试设置成这俩的东西有什么区别
2. position
默认static,可以设置的有relative、absolute和fixed,设置成后面3个可以激活top、bottom、left、right属性,就好像你在地板上铺积木一样,放不下就换行呗。
3. 盒模型
从外到内 margin、border、padding,再加上width、height、background,不过这些属性在display: inline下经常不work,做多了就会区分了
关于box-shadow、border-radius这些,用到自然就知道了,不是重点。
4. font相关
font-size(字号)、font-weight(加粗)、font-family(字体)、color(颜色)、line-height(行距,单行时设置成父元素高度可以用来做到在父元素内垂直居中)、text-align(用到的时候都是设置成center,可以做到inline元素水平居中,另外一提,block元素水平居中把margin-left和margin-right设置成auto就可以做到)这些是常用的
5. overflow
常用的有hidden或者scroll或者auto,当你把某个块级元素(display:block)设定宽或者高,内容多得放不下了咋办?隐藏还是滚动还是啥?基本这俩够用了,不够的时候去百度google一下,你就会学到神奇的css,次数多了就全知道了
6. float
这是个很好用的东西,可以把块级元素堆积在左边或者右边,用完记得clear一下(clear:both)
7. 伪类以及伪动态
:active :hove :focus

静态页面我随便总结了下,大概这些吧,如有遗漏,不好意思。。。。。。欢迎补充。。。我也不知道书上是怎么说的,不过上面的是我经常用的。
动态页面需要学习JS,静态页面估计你很快就可以搞定,那就学习js和jquery吧,操作dom什么的,说到底呢还是通过js来改变某些元素的css来实现动态效果。

模仿是没有用的,重点是要理解!!!理解!!!用上面的知识,不看网页原代码,自己写,分成一块一块写,能写出来,你就可以去学习JS了 作为新手,你已经做得非常漂亮了接下来提几个意见,我们一条一条来梳理
    大牛们鉴定下我网页制作的(html Div+css)属于什么水平? 大牛们鉴定下我网页制作的(html Div+css)属于什么水平? 大牛们鉴定下我网页制作的(html Div+css)属于什么水平? 大牛们鉴定下我网页制作的(html Div+css)属于什么水平?

    从第一张图来看,你似乎是使用了一个div来框住那个"NEW",但是和正品色魔张大妈对比很明显,你可以尝试添加一个大约2px的内边距(padding:2px).然后从你的第二张图来看,你的连接和红色按钮黏在一起了,和正版分开相比,应该差了一个左边的外边距(margin-left:5px).建议看一下h5的盒模型原理,适当添加内外编剧会很有利于布局.相关基础教程可以看
    w3cschool菜鸟教程
  1. 接下来是布局 大牛们鉴定下我网页制作的(html Div+css)属于什么水平?暂且不贴原图了,一个美观的网站首先要学会对齐.可以看到你在热门推荐栏目的最左边和右侧小版块并没有和最顶端的"首页","爆料"对齐,也就是说你缺少一个统一的页面宽度(设定一个统一宽度950px能适应大部分用户显示器的显示,当然如果想更进阶一点可以研究一下响应式布局,可以自动的适配屏幕宽度),在这个布局方面,你可以尝试在右边所有板块的父div加上一个靠右浮动(display:reltive;float:right)或者直接通过计算来设定死左右栏目宽度和边距.这里相关教程可以看上面那个网站,进阶一点可以研究一下bootstrap的流式布局Bootstrap中文网(一个中文教程网站)再高阶一点可以看flex-box布局HugeDomains.com(这个网站介绍很友好)
  2. 接下来是文字对齐 大牛们鉴定下我网页制作的(html Div+css)属于什么水平?这里原图我没有找到,但正常应该是靠左对齐(我猜?)应该使用文字对齐(text-align:left)
  3. 其他的问题暂时没有想到,就说一下楼主说的javascript问题.如果想做前端这一行那js是必须要学习的.建议直接买本犀牛书JavaScript学习指南 (豆瓣)(不过貌似新手上来就看着本实在有点吓人所以其实还可以买JavaScript: The Good Parts (豆瓣)这本,上面那本犀牛书的精简版略黑色幽默的书).网站的话可以去最上面的那个w3school来看,js这东西讲真靠一个手熟.
  4. 如果觉得js直接入门有压力,可以直接从jquery入手,语法简单封装严格效果碉堡,同样可以在bootcss.com找到入门教程.但是一个好的前端程序员可不能光会用jquery,最后熟悉了玩法还是得好好啃原生javascript
以上 曾经我也以为熟练掌握html和css,然后了解一点js就可以统治前端了。后来我发现我错了,被大厂面试的时候问的绝大多数都是js和算法相关,要说轻视js是以前的网页编辑,并不是现在html5的时代。html5之所以现在需求这么高,绝大多数原因是因为其逻辑可操作性的增强。我希望楼主不要停留在htmlcss实现上沾沾自喜,静态网页是被html5时代所抛弃的,而现在静态网页也仅仅是前端工程师入门的一小小步。html5时代,前端工程师有着很多的挑战,做为前端工程师也有责任维持着这个职位团体的技术水平。楼主加油↖(^ω^)↗。 做的怎么样,代码说了算。。。
你要放个在线demo啊,年轻人。 仿站,没有在线demo,不太好细说,但看着有些凌乱。
兼容性一般规避,少些hack。常见布局要熟悉。

还有,程序员是靠懒惰进步的。

css写烦了,上预处理器。html写烦了,上模板引擎。

jquery,入门很简单。学js时,买两本书吧。一本厚的,一本薄的。厚的用来查,薄的告诉你最佳实践。 PC、WAP页面切图是基础中的基础,DIV+CSS布局是基础,网站有链接么?从最基本的开始制作,我看到了你的踏实;从smzdm开始模仿,我看到了你的前卫。另外一点外观布局只是一部分,好的前端更加注重的是细节,尤其未成形或者有兼容性问题是绝不能拿出去的,因为会有更加专业的人去发现各种瑕疵。
不过对于初入行的来说,已经做的很好了,希望继续努力,在CSS3及JS方面可以有更多的扩展。
PS:浏览网站犹如品书,一千人读莎士比亚会看到一千个莎士比亚,那么我们看的网站,在各种环境下(OS、Browsers、Window Size……)都是不同的,需要多去观察。细节!细节! 没邀,厚着脸皮来答,也不是大牛.

嗯.
先给题主点积极的.

在目前互联网市场,前端工程师十分紧俏,钱景超级好.
会做html5基本可以拿到很多不错的offer了.

再来点打击楼主的.
虽然没见到楼主的作品,但是通过你的描述基本还是个门外汉的水平.
我之前面试过一个刚毕业的女孩子,U盘里准备了一堆仿各大电商的静态页,
感觉也是这么个水准,随便聊聊就让人走了.

所以总结下,给楼主两个思路:
1.以目前水平,继续看看网上视频,教程,厚着脸皮去投各种公司的前端实习岗位,如果成功,进去硬着头皮跟老大做点东西,多学多看.
2.找个线下的培训机构,老老实实的报个HTML5班,学成之后找个岗位培养经验.

另外.js,jquery是前端必须的. 啥我都不会 看起来,布局没有什么问题。前端入门了。
不过路还长。等到你能用angular写web app,就能跟我差不多工资了(4000,税前)。
呵呵哒。 请问,你做一个这样的网页多长时间?
没有喷的意思,
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage