ife task0001页面实现细节问题总结

时间：2022-11-14 16:19:30

好久没写css了，突然对重构页面陌生了许多。不过也没什么，前面几个月一直扩充知识面，偏重了理论技术学习，结果还不算遗憾。昨天重拾css,针对问题做点总结：

一、语义化方面

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标签。

ife task0001页面实现细节问题总结

在丢失css文件的时候，页面呈现是这样的：

ife task0001页面实现细节问题总结

很明显：使用a标签，我们可以在页面丢失样式的时候，依然可以点击a链接，继续刷新页面，计算出接下来要展示的瀑布流图片。

3.关于没有文字而带有图标的链接（例如github图标）

ife task0001页面实现细节问题总结

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

ife task0001页面实现细节问题总结

第一点：排行表最好用ol，而不是ul

ol：order list
ul:unorder list
当丢失css文件的时候，ol可以显示数字，直观地呈现出排行情况。

ife task0001页面实现细节问题总结

第二点：有点强迫症，就是丢失css文件的时候，为了防止原来排列在一行的不同内容紧挨在一起影响阅读，最好加上&nbsp

例如下面：


<div class="aside-list chart">
            <h1>人气排行榜</h1>
            <ol>
                <li><s>1</s><span class="level"><span class="p100">&nbsp;100%&nbsp;&nbsp;</span></span><span class="title">ui.tree</span>e
                </li>
                <li><s>2</s><span class="level"><span class="p80">&nbsp;80%&nbsp;&nbsp;</span></span><span class="title">util.trim</span>
                </li>
                <li><s>3</s><span class="level"><span class="p60">&nbsp;75%&nbsp;&nbsp;</span></span><span class="title">app.todo</span>
                </li>
                <li><s>4</s><span class="level"><span class="p40">&nbsp;40%&nbsp;&nbsp;</span></span><span class="title">ui.table</span>
                </li>
                <li>
                    <s>5</s><span class="level"><span class="p25">&nbsp;25%&nbsp;&nbsp;</span></span><span class="title">ui.addClass</span>
                </li>
            </ol>
        </div>

二、表现与数据分离思想

在做页面过程中，要用到两种图片，一种是写在HTML里面的img，另外一种是写在css里面用作背景图片的。不同的应用情况要放入不同的img文件夹，不能混为一谈。
文件结构如下：
ife task0001页面实现细节问题总结

注释：其中蓝线的与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
我们要实现的效果是这样的：
ife task0001页面实现细节问题总结

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.不规则的时光轴形状布局

ife task0001页面实现细节问题总结

初看的时候，我很纠结，我一直在想着绝对定位，但是这样肯定不行。因为以后万一出现其他的列表项呢，（已有的列表项有个人介绍，联系方式，教育经历，实习经历）。
根据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图标应该是被隐藏起来的。
ife task0001页面实现细节问题总结
而实际显示的效果是：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)原因分析

效果如下：
ife task0001页面实现细节问题总结

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
要实现的效果如下：
ife task0001页面实现细节问题总结

具体实现采用了滤镜：

  _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，实现缩小一圈的背景。
ife task0001页面实现细节问题总结


                    <table>
                        <tr class="line">
                            <th>&lt</th>
                            <th colspan="5">2015.04</th>//年.月跨了五栏
                            <th>&gt</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前端技术培训学院，给了我动力和目标去做好重构，前端前端，勇往直前，继续努力！

标签：

相关文章