ife task0001页面实现细节问题总结
2015-04-15 09:55
253 查看
好久没写css了,突然对重构页面陌生了许多。不过也没什么,前面几个月一直扩充知识面,偏重了理论技术学习,结果还不算遗憾。昨天重拾css,针对问题做点总结:
而且针对不同页面都具有header和footer的公有样式,我们也可以把该样式写入一个common.css文件中。
在丢失css文件的时候,页面呈现是这样的:
很明显:使用a标签,我们可以在页面丢失样式的时候,依然可以点击a链接,继续刷新页面,计算出接下来要展示的瀑布流图片。
header的右上角有一个github图标,直观看上去似乎没有文字,但是实际上我们应该要考虑更多。尤其是web语义化,,另一方面当窗口缩小或者github图标加载失败的时候,还是应该给读者提供一个URL,方便点击进入,这时候文字的设置用到text-indent,暂时挤开。
ul:unorder list
当丢失css文件的时候,ol可以显示数字,直观地呈现出排行情况。
文件结构如下:
注释:其中蓝线的与HTML同级,表示写入HTML里面的,与后台数据库有关,而红线的表示背景图片。
以前我学习不深入的时候,比如两列,三列,四列浮动,也经常用的float,最后清除浮动,感觉比较简单。但是针对瀑布流,兼容性好的是绝对定位。
JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能。
今天也采用了绝对定位方法,其中在CSS文件中写入position:absolute,而在HTML文件中加大写入了行内样式。
我们要实现的效果是这样的:
初看的时候,我很纠结,我一直在想着绝对定位,但是这样肯定不行。因为以后万一出现其他的列表项呢,(已有的列表项有个人介绍,联系方式,教育经历,实习经历)。
根据web语义化思想,应该把每一个列表项(蓝线部分所示:包含上面的img,左边的标题,还有右边的详细内容)看做一个独立的section,而全局应该是流布局,高度自适应。
比较干扰的是中间一条灰色竖线,这个其实可以用作背景填充一个5*1的png图片,然后repeat-y,同时水平居中。
中间灰色竖线的背景填充:(图片里面黄色框圈起来的部分)
注意:当浏览器宽度小于980px时候,右边的github图标应该是被隐藏起来的。
而实际显示的效果是:nav菜单文字没有,而出现了github图标。
********
要实现的效果如下:
具体实现采用了滤镜:
感谢百度EFE前端技术培训学院,给了我动力和目标去做好重构,前端前端,勇往直前,继续努力!
一、语义化方面
1.HTML5新标签使用
标签方面:用到语义化的HTML5新标签。在header头部引入了一个HTML5.js文件后,我们可以兼容使用新型的HTML5标签。例如:header、footer、navel、article、section、aside等而且针对不同页面都具有header和footer的公有样式,我们也可以把该样式写入一个common.css文件中。
<header> <div class="wrapper"> <nav> <a href="index.html">首页</a><a href="blog.html">文章</a><a href="gallery.html">作品</a><a href="about.html">关于</a> </nav> <a class="header-logo" href="index.html">青青flye</a> </div> <a class="git" href="https://github.com/QingFlye">我的GitHub</a> </header> <article class="blog-1"> <img src="img/img1.jpg" alt="插图" width="300" height="180"> <p>关于兴趣:首先,这些人并不是对正在做的事情没有兴趣,而是没能力把目前正在做的事情做好。</p> <p>你没办法对那件事情没兴趣。往往并不是有兴趣才能做好,而是做好了才有兴趣</p> <p>没有人喜欢自己做不好的事情。每个人都会不自觉地尽量回避自己的短处……只要一件事儿你能做好,并且做到比谁都好,或者至少比大多数人好</p> </article>
2.关于瀑布流下拉:在图片末尾,有一个指示图标:表示更多,合理的做法也应该用a标签。
在丢失css文件的时候,页面呈现是这样的:
很明显:使用a标签,我们可以在页面丢失样式的时候,依然可以点击a链接,继续刷新页面,计算出接下来要展示的瀑布流图片。
3.关于没有文字而带有图标的链接(例如github图标)
header的右上角有一个github图标,直观看上去似乎没有文字,但是实际上我们应该要考虑更多。尤其是web语义化,,另一方面当窗口缩小或者github图标加载失败的时候,还是应该给读者提供一个URL,方便点击进入,这时候文字的设置用到text-indent,暂时挤开。
<header> <div class="wrapper"> <nav> <a href="index.html">首页</a><a href="blog.html">文章</a><a href="gallery.html">作品</a><a href="about.html">关于</a> </nav> <a class="header-logo" href="index.html">青青flye</a> </div> <a class="git" href="https://github.com/QingFlye">我的GitHub</a> </header>
text-indent: -9999px;/*github图标是链接,添加文字"我的github",增强语义化*/
4.排行表用ol
第一点:排行表最好用ol,而不是ul
ol:order listul:unorder list
当丢失css文件的时候,ol可以显示数字,直观地呈现出排行情况。
第二点:有点强迫症,就是丢失css文件的时候,为了防止原来排列在一行的不同内容紧挨在一起影响阅读,最好加上 
例如下面:<div class="aside-list chart"> <h1>人气排行榜</h1> <ol> <li><s>1</s><span class="level"><span class="p100"> 100% </span></span><span class="title">ui.tree</span>e </li> <li><s>2</s><span class="level"><span class="p80"> 80% </span></span><span class="title">util.trim</span> </li> <li><s>3</s><span class="level"><span class="p60"> 75% </span></span><span class="title">app.todo</span> </li> <li><s>4</s><span class="level"><span class="p40"> 40% </span></span><span class="title">ui.table</span> </li> <li> <s>5</s><span class="level"><span class="p25"> 25% </span></span><span class="title">ui.addClass</span> </li> </ol> </div>
二、表现与数据分离思想
在做页面过程中,要用到两种图片,一种是写在HTML里面的img,另外一种是写在css里面用作背景图片的。不同的应用情况要放入不同的img文件夹,不能混为一谈。文件结构如下:
注释:其中蓝线的与HTML同级,表示写入HTML里面的,与后台数据库有关,而红线的表示背景图片。
三、布局方面
1.瀑布流
瀑布流布局,布局方面主要有两种方式。一种使用float,另一种是绝对定位方法。以前我学习不深入的时候,比如两列,三列,四列浮动,也经常用的float,最后清除浮动,感觉比较简单。但是针对瀑布流,兼容性好的是绝对定位。
绝对定位
优点
方便添加数据内容,窗口变化,列数/数据块都会自动调整;缺点
需要实现知道数据块高度,如果其中包含图片,需要知道图片高度;JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能。
今天也采用了绝对定位方法,其中在CSS文件中写入position:absolute,而在HTML文件中加大写入了行内样式。
<article class="clearfix bg-red" style="width: 160px;top:246px; left:530px"> <img src="img/img2.png" alt=""/> <s>G</s> <h1>晴天</h1> <p>今天阳光多么灿烂,我们的学校破破烂烂,100个同学99个笨蛋,10个老师光吃不干。</p> </article>
2.三列等高自适应布局
这里我用jsbin做了一个简单的demo:http://jsbin.com/loqugejuyu/1/edit?html,css,output我们要实现的效果是这样的:
1)难点:如何实现高度自适应
2)解决办法:子元素全部float,用负margin,父元素overflow。
原理:子div padding-bottom:2000px; 把自己的盒子向下推开 变高了;margin-bottom:-2000px; 让父div可以向上收缩到内容实体的高度,含内容实体高度最高的子div把父div的收缩挡住了,所以看上去3个div高度相等。<div class="blog"> <div class="wrapper clearfix"> <article class="blog-1"> <img src="img/img1.jpg" alt="插图" width="300" height="180"> <p>关于兴趣:首先,这些人并不是对正在做的事情没有兴趣,而是没能力把目前正在做的事情做好。</p> <p>你没办法对那件事情没兴趣。往往并不是有兴趣才能做好,而是做好了才有兴趣</p> <p>没有人喜欢自己做不好的事情。每个人都会不自觉地尽量回避自己的短处……只要一件事儿你能做好,并且做到比谁都好,或者至少比大多数人好</p> </article> <article class="blog-1"> <img src="img/img1.jpg" alt="插图" width="300" height="180"> <p>只要一件事儿你能做好,并且做到比谁都好,或者至少比大多数人好,你没办法对那件事情没兴趣。</p> <p>往往并不是有兴趣才能做好,而是做好了才有兴趣</p> </article> <article> <img src="img/img1.jpg" alt="插图" width="300" height="180"> <p>没有人喜欢自己做不好的事情,只要一件事儿你能做好</p> <p>并且做到比谁都好,或者至少比大多数人好,你没办法对那件事情没兴趣。往往并不是有兴趣才能做好,而是做好了才有兴趣</p> </article> </div> </div>
.blog { background: #eee; } .blog .wrapper { background: #eee; padding-bottom: 30px; margin-bottom: 100px; overflow: hidden;//一定要加上,否则高度无限长 zoom: 1; } .blog article { width: 320px; background: #fff; margin-top: 10px; float: left; display: inline; padding-bottom: 2000px;//子把自己的盒子向下推开变高了;margin-bottom:-1000px; margin-bottom: -2000px; } .blog article img { width: 300px;//即使CSS设置了`width/height`属性也为图片添加`width/height/alt`属性,这样可以避免在极端情况下出现问题。 height: 180px; margin: 10px 10px 15px; } .blog article p { padding: 0 30px; text-indent: 2em; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; }
3.不规则的时光轴形状布局
初看的时候,我很纠结,我一直在想着绝对定位,但是这样肯定不行。因为以后万一出现其他的列表项呢,(已有的列表项有个人介绍,联系方式,教育经历,实习经历)。
根据web语义化思想,应该把每一个列表项(蓝线部分所示:包含上面的img,左边的标题,还有右边的详细内容)看做一个独立的section,而全局应该是流布局,高度自适应。
比较干扰的是中间一条灰色竖线,这个其实可以用作背景填充一个5*1的png图片,然后repeat-y,同时水平居中。
<section class="call-detail"> <h1>联系方式</h1> <ul> <li>电话:12345689999</li> <li>QQ:233489580</li> <li>邮箱:2947902740@qq.com</li> </ul> </section>
中间灰色竖线的背景填充:(图片里面黄色框圈起来的部分)
main { background: url("img/bg-y.png") repeat-y 50% #ffffff;//水平居中,白色背景为底色,竖直方向铺满repeat-y padding-bottom: 30px; margin-bottom: 30px; }
四、兼容方面
1.github图标没有实现屏幕宽度小于980隐藏
1)原因分析
先看题目要求:页面实际内容宽度为980px,头部背景、大图、底部背景均为100%宽,当浏览器宽度低于980px时,页面宽度不变,允许出现横向滚动条。右上角的Github图标在浏览器低于980px时消失
注意:当浏览器宽度小于980px时候,右边的github图标应该是被隐藏起来的。
而实际显示的效果是:nav菜单文字没有,而出现了github图标。
2)解决办法:
方法一:子父都加上同一背景,并且设置不同z-index.
.wrapper { width: 980px; margin: 0 auto; } header { background: #522a5c; position: relative; zoom: 1; } header .wrapper { height: 80px; background: #522a5c; position: relative; z-index: 10; }
方法二:给父级元素添加:min-width:980px;zoom:1;
min-width属性在IE6下不认识,可以通过zoom:1触发haslayout。********
2.屏幕宽度小于980px时候,背景显示不完全
1)原因分析
效果如下:2)解决办法
对宽度100%的父级元素和宽度为980px的容器设置同一背景,而且均居中。注意不能设置高度,高度要随内容自适应。//header部分 header { background: #522a5c; position: relative; zoom: 1; } header .wrapper { height: 80px; background: #522a5c; position: relative; z-index: 10; } //artic部分 .personal { background: #fff; position: relative; } .personal .wrapper{ background: #ffffff; padding-bottom:200px; }
五、技巧方面
1.透明度渐变的实现
题目要求:希望实现白色为底,实现自上到下的关于透明度渐变:70%->50%(75%位置)->0要实现的效果如下:
具体实现采用了滤镜:
_background: #fff; /*filter: alpha(opacity=70);*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B3FFFFFF', endColorstr='#00FFFFFF', GradientType=0); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
2.日历表
可以用ul、ol、table实现。但是日历不像是一个列表,而更像是一个表格,似乎用table更加整齐。而且由于背景没有完全填充,似乎缩小了一圈,可以在td里面嵌套span,加上padding,实现缩小一圈的背景。<table> <tr class="line"> <th><</th> <th colspan="5">2015.04</th>//年.月跨了五栏 <th>></th> </tr> <tr> <td><span>M</span></td>//padding对table无效的,用span标签,可以方便添加padding,缩小填充的背景 <td><span>T</span></td> <td><span>W</span></td> <td><span>T</span></td> <td><span>F</span></td> <td><span>S</span></td> </tr> <tr> <td><span>1</span></td> <td><span>2</span></td> <td><span>3</span></td> <td><span class="active">4</span></td> <td><span>5</span></td> <td><span>6</span></td> <td><span>7</span></td> </tr> </table>
感谢百度EFE前端技术培训学院,给了我动力和目标去做好重构,前端前端,勇往直前,继续努力!
相关文章推荐
- 软件工程课程设计问题总结——医院门诊系统(五):判断用户实现的特定页面跳转
- C++技术问题总结-第8篇 STL内存池是怎么实现的
- jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题
- spring+quartz实现定时任务遇到问题总结(bean无法注入)
- 移动端web页面使用position:fixed问题总结
- shell几点细节问题总结
- action中的list在JSP页面如何显示问题的总结补30号的
- 软件工程课程设计问题总结——医院门诊系统(二):jsp中验证码的实现&设置验证失败不提交表单
- 软件工程课程设计问题总结——医院门诊系统(四):后台获取下拉列表的值并在页面中显示
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- JAVA和MySQL实现分页和页面跳转指定当前显示页数的问题
- UITableView实现删除功能 后刷新页面遇到的问题。
- 那些用QQ互联实现pc网页登录 app应用登录统一账户的细节问题
- 15.odoo入门——工作遇到的odoo的一些细节和javascript实现数据库操作后跳转页面
- 总结移动端页面开发时需要注意的一些问题
- OpenGL鼠标拾取的实现:终于搞定(包括细节问题)
- [置顶] OpenGL鼠标拾取的实现:终于搞定(包括细节问题)
- JS如何实现在页面上快速定位(锚点跳转问题)
- 页面乱码问题总结
- DrawerLayout实现侧滑布局问题总结