![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML&CSS
准前端工程师
我喜欢我。
展开
-
Web前端之网页导航----手把手教你做导航(图,代码)
之前的文章写了很多关于导航的,感觉每个导航总有一些差别,不全面,现在就系统点,基本上每个导航都是这样写的。试验要求:做成横排的导航,用CSS,手写代码,禁止用垃圾dreamweaver(你懂得)①说明:用无序列表写出导航的几个选项,浏览器显示如左图,代码为右。下同②说明: list-style: none;是将左边的小圆点去除;float: le原创 2012-11-27 21:26:45 · 12729 阅读 · 2 评论 -
再说margin
以为简单的东西其实里面学问大着呢!这两天看了一个大牛写的margin系列,真是感觉自己弱爆了。里面竟然还有些词汇我都看了解释都还不懂。所以今天试着仔细看下,但是和人家大牛的比肯定是小巫见大巫了。 这里我遇到什么就提什么,着重一些我以前没有太注意的东西。 margin属性适用于所有元素。but , 竖直方向(margin-top , margin-bottom)的属性对“非原创 2013-12-05 19:38:20 · 2159 阅读 · 0 评论 -
别再滥用 line-height 了
1) line-height 不能用在无 inline 元素的 block 元素内;2) line-height "有继承性", 对 block 元素使用是设定内部 inline 元素的最小高度来的;3) 不要给 "替换内联元素" 设置 line-height ,这是很不友好的行为(虽然 img 也算替换行内元素,但是给他设置没用,因为人家规范本来就不允许给替换内联元素加这玩意);根据原创 2013-12-08 12:54:57 · 2372 阅读 · 0 评论 -
第二次练习总结
文字下划线作业要求:文字变长,下划线变长。(有两个下划线,一个是div的,一个是p的)关键点float:left;列表一般都会想到用一些选择器让最后一个的border:none;这里提示另一种用法。负margin(所以要用border-top,margin-bottom也行,但是要考虑到两者的区别)。ul{overflow:hidden},li的高度也是关键原创 2013-05-29 12:09:20 · 1782 阅读 · 0 评论 -
nav练习总结
要求完成附件中的导航效果,中英文切换效果要求兼容所有浏览器;动画过渡效果高版本浏览器实现即可。第一个版本之sunorry第一个版本是用CSS Sprite实现,首先我制作的如下图片。其中要注意的是图片必须确定每个导航栏的宽度高度。实现过程外部div设置宽度,高度(高度为图片的一半,以便挡住下方);div里包括ul和li,a,然后使用text-indent: -2原创 2013-05-13 20:21:48 · 2221 阅读 · 0 评论 -
CSS margin研究
只有垂直方向才会出现margin重合body{ background: #CCC; } div{ background-color: blue; } p{ margin: 20px; background: red; color: white; }IE6和Chrome的表现效果是一样的。都是下面的样子。为什么不是下面这样原创 2013-05-06 12:16:40 · 2240 阅读 · 0 评论 -
CSS shorthand properties(CSS 缩写性质)
第一次自己试着翻译。①fontfont-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-family: serif;可替换成 font: italic bold 1em/1.5em serif;其设置顺序是font-style,font-variant,font-wei翻译 2013-02-25 22:09:06 · 2995 阅读 · 0 评论 -
做为一名在校学生而言,从其职业发展的角度出发,在学习 Web 前端开发的时候有必要花时间兼容 IE6、IE7 这些浏览器吗?
绝对没有必要。【更新:楼下那些说有必要的,麻烦你们切题清楚点,你们自己要兼容IE6你公司可能是为此付钱给你,但是提问者还是在校生,有人付钱让他学习兼容IE6吗?】目前(2012年10月)IE6、IE7的市场占有率即使在最小白的市场,份额也下降到了25%以下。考虑你还是在校生,意味着你进入可以承担较为独立的工作岗位时,至少还有2年以上时间,届时IE6、7的占有率估计至少将跌至10%以下,转载 2012-11-06 13:05:48 · 873 阅读 · 0 评论 -
Web前端之网页导航----搜导航狐邮箱(float)
原图我做的搜狐邮箱导航很简单,几十行代码搞定!就一个背景,一个li完事,这里主要说下float这个属性。①是块级元素,所以可以设置width和height,也会独占一行,用float后让其都在一行!②浮动元素会被移出文档流,不会影响到块级只会影响内联(通常是儿文本排列)。产生一个问题是:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”!重磅推荐原创 2012-11-06 13:35:27 · 1395 阅读 · 0 评论 -
Web前端之网页导航----豌豆荚
先上张原图这是我做的 做后基本一样,只是我没有写右边的文字。 接下来我就说明下里面我遇到的知识点。 ①豌豆荚是一个链接,只是用图片代替文字而已,里面重要的一句是text-indent: -9999px;意思是将文字缩进到左边网页外,再用一个logo的class用background替换背景。 ②小细节border-bottom: 1px solid #DFDFDF;原创 2012-10-22 22:06:41 · 954 阅读 · 0 评论 -
番外篇:自我调整
自从上周准备考六级以来,就一直不在状态。因为想着六级和JavaScript一起的,现在是弄得什么都没得到,很乱。 昨晚没电,阿梁宿舍很多人,我也第一次喝了白酒,大家一起喝酒吃东西聊天,里面一哥们突然跟我说我看你一直很刻苦,总能看到我自习,呵呵,原来在陌生人眼里我是这样的,真心不敢当,他是不知道我把时间都浪费了。话说我喝了后真心很是清醒,其实我一直是知道我这种状态是不行的,可是我还是维持了原创 2012-10-28 10:02:30 · 530 阅读 · 0 评论 -
Web前端之网页导航----126邮箱(关于position)
原图我做的这里主要讲讲position:absolute;和position:relative;①这里先看两个标签,,他们是html5标签, 标签定义文档的页眉(介绍信息), 标签定义导航链接的部分。我觉得html5也没什么,就是标签更语义化了?我不懂,乱说的,呵呵。②126logo和右边的“你的专业单子邮箱”都是用图片代替文字,右边的使用background-im原创 2012-11-01 22:29:33 · 1938 阅读 · 0 评论 -
Web前端之网页导航----创新工场
按惯例,先来张原图这是我做的①先从它的背景来说,之前做的豌豆荚使用background: #F2F2F2;但是你仔细看创新工场的上下不一样,是不是看上去很不一般,它的原理其实很简单background: url(header.png) repeat-x scroll left top transparent;就是一张图,图片上只有一条线,下面颜色深,然后 repeat-x,原创 2012-10-29 16:10:43 · 802 阅读 · 0 评论 -
一句话给准备入行前端的同学+外加CSS遗漏知识点
以忽略css为代码,去增加学js的时间,反而会带来反效果,这是很不得要领的傻作法。css知识是js编程的基础和前提条件,css知识越好,js编程就会越得心应手。 这句话是《编写高质量代码--web前端开发修炼之道》作者说的,真是一语惊醒梦中人啊!以此为鉴,好好反省自己最近的行为!下面是CSS遗漏知识点①overflow:hidden用法 作用:隐藏溢出原创 2012-11-18 18:03:22 · 826 阅读 · 0 评论 -
重回CSDN,关注前端
从现在开始,准备进军前端,现在还是菜鸟,不过我会不断更新,来使自己不断进步,加油!本人关注所有前端技术,希望半年后我会很感激今天所做的决定。原创 2012-10-21 22:04:53 · 603 阅读 · 0 评论 -
指定属性值,层叠和继承(b标准第六节)未完
1.指定,计算和实际值当浏览器(user agent,用户代理,暂且译为浏览器吧!)解析文档并生成文档树(document tree),它必须分配树中的每个元素,适用于目标媒体类型(media type)的每一个属性值。The final value of a property is the result of a four-step calculation: the value is d翻译 2013-12-05 14:25:52 · 2002 阅读 · 0 评论