本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您
回复内容:
第一次模仿页面模仿的是百度输入法,那时候页面不这样,不过也差不多,一个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了 作为新手,你已经做得非常漂亮了接下来提几个意见,我们一条一条来梳理
- 接下来是布局
暂且不贴原图了,一个美观的网站首先要学会对齐.可以看到你在热门推荐栏目的最左边和右侧小版块并没有和最顶端的"首页","爆料"对齐,也就是说你缺少一个统一的页面宽度(设定一个统一宽度950px能适应大部分用户显示器的显示,当然如果想更进阶一点可以研究一下响应式布局,可以自动的适配屏幕宽度),在这个布局方面,你可以尝试在右边所有板块的父div加上一个靠右浮动(display:reltive;float:right)或者直接通过计算来设定死左右栏目宽度和边距.这里相关教程可以看上面那个网站,进阶一点可以研究一下bootstrap的流式布局Bootstrap中文网(一个中文教程网站)再高阶一点可以看flex-box布局HugeDomains.com(这个网站介绍很友好)
- 接下来是文字对齐
这里原图我没有找到,但正常应该是靠左对齐(我猜?)应该使用文字对齐(text-align:left)
- 其他的问题暂时没有想到,就说一下楼主说的javascript问题.如果想做前端这一行那js是必须要学习的.建议直接买本犀牛书JavaScript学习指南 (豆瓣)(不过貌似新手上来就看着本实在有点吓人所以其实还可以买JavaScript: The Good Parts (豆瓣)这本,上面那本犀牛书的精简版略黑色幽默的书).网站的话可以去最上面的那个w3school来看,js这东西讲真靠一个手熟.
- 如果觉得js直接入门有压力,可以直接从jquery入手,语法简单封装严格效果碉堡,同样可以在http://www.bootcss.com找到入门教程.但是一个好的前端程序员可不能光会用jquery,最后熟悉了玩法还是得好好啃原生javascript




从第一张图来看,你似乎是使用了一个div来框住那个"NEW",但是和正品色魔张大妈对比很明显,你可以尝试添加一个大约2px的内边距(padding:2px).然后从你的第二张图来看,你的连接和红色按钮黏在一起了,和正版分开相比,应该差了一个左边的外边距(margin-left:5px).建议看一下h5的盒模型原理,适当添加内外编剧会很有利于布局.相关基础教程可以看
w3cschool菜鸟教程
你要放个在线demo啊,年轻人。 仿站,没有在线demo,不太好细说,但看着有些凌乱。
兼容性一般规避,少些hack。常见布局要熟悉。
还有,程序员是靠懒惰进步的。
css写烦了,上预处理器。html写烦了,上模板引擎。
jquery,入门很简单。学js时,买两本书吧。一本厚的,一本薄的。厚的用来查,薄的告诉你最佳实践。 PC、WAP页面切图是基础中的基础,DIV+CSS布局是基础,网站有链接么?从最基本的开始制作