项目之技术总结

没有这次的练习之前，在没有js情况下，我的认知中觉得css实现动画交互效果会很难，且效果也牵强，

就如点击弹出或显示内容都不可能现实的到，但通过这次练习，大大的改观了我对css的认识，在以前不

注重的伪类选择器中，原来大有作用在，且实现出的效果比js简单，如以下的:target伪类和:checked伪类。

target伪类


先来一个例子效果：

跳转至内容 1

跳转至内容 2

内容 1...

内容 2...


从中可以感受到target伪类的神奇效果。

Target经过多方面的资料查询，只要被a标签锚点选中就可以激活，然后激活的元素会被赋予激活后的属性，

但如果激活别的元素那么之前激活的就会被取消激活，就是说只能有一个元素获取激活属性。

这个伪类可以实现到Tab切换，而这个Tab切换在网页的使用率很高，还有也能实现到背景的切换。

Tab切换代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

.tabmenu {
    position:absolute;
    top:100%;
    margin:0;
}
.tabmenu li{
    display:inline-block;
}
.tabmenu li a {
    display:block;
    padding:5px 10px;
    margin:0 10px 0 0;
    border:1px solid #91a7b4;
    border-radius:0 0 5px 5px;
    background:#e3f1f8;
    color:#333;
    text-decoration:none;
}

.tablist {
    position:relative
    ;margin:50px auto;
    min-height:200px;
}

.tab_content {
        position: absolute;
        width:600px;
        height:170px;
        padding:15px;
        border:1px solid #91a7b4;
        border-radius:3px;
        box-shadow:0 2px 3px rgba(0,0,0,0.1);
        font-size:1.2em;
        line-height:1.5em;
        color:#666;
        background:#fff;
    }

#tab1:target, #tab2:target, #tab3:target {
        z-index: 1;
}
</style>
</head>
<body>
<div class="tablist">
    <ul class="tabmenu">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1" class="tab_content">tab1</div>
    <div id="tab2" class="tab_content">tab2tab2</div>
    <div id="tab3" class="tab_content">tab3tab3tab3</div>
</div>
</body>
</html>

效果例子：

  • tab1
  • tab2
  • tab3

tab1

tab2tab2

tab3tab3tab3

:checked伪类

:checked伪类的使用，这个伪类是匹配用户界面上处于选中状态的元素。(用于input type为radio与checkbox时)

而从它使用的元素类型可以看出它是使用在选择按钮这类的元素上，那么是在选中的状态才激发，那么是不是

可以想到使用在点击方面的效果，而在一个页面上无处不在的点击效果，所以它的使用范围更加广，而且这次

练习的项目的很多效果都要点击才能出效果，所以有了这个效果百分之99%的效果都可以实现到，还有css最难

实现的轮播图它也能做，那么下面来个常用的下拉菜单：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checked</title>
    <style>
    body{
        font-family: "微软雅黑";
    }
        .nav{
            position: relative;
            background:  #ccc;
            width: 140px;
            height: 205px;
        }
        #checkbox{
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .list{
            position: absolute;
            top: 28px;
            left: 10px;
            list-style: none;
            margin: 0;
            padding:0;
        }
        .list>li{
            border-left: 8px solid #9ab;
            border-right: 8px solid #9ab;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            margin: 8px 0;
            color: #888;
            width: 100px;
            text-align: center;
            background: #fff;
        }
        #checkbox ~ .list{
            opacity: 0;
            transition: all 0.3s;
        }
        #checkbox:checked ~ .list{
            opacity: 1;
        }

        label{
            cursor: pointer;
            background: #fff;
            width:100px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            border-left: 8px solid #9ab;
            border-right: 8px solid #9ab;
            text-align: center;
            display: inline-block;
            position: absolute;
            top: 8px;
            left: 10px;
        }
        label:before{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            content: "我是隐藏";
        }
        label:after{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            content: "";
        }
        #checkbox:checked~label:after{
            z-index: 3;
            content: "我是显示";
        }
        #checkbox:checked~label:before{
            content: "";
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="checkbox" id="checkbox">
        <label for="checkbox"></label>
        <ul class="list">
            <li>我是1</li>
            <li>我是2</li>
            <li>我是3</li>
            <li>我是4</li>
            <li>我是5</li>
            <li>我是6</li>
        </ul>
    </div>
</body>
</html>

点击效果例子：

checked

li{
border-left: 8px solid #9ab;
border-right: 8px solid #9ab;
font-size: 12px;
height: 20px;
line-height: 20px;
margin: 8px 0;
color: #888;
width: 100px;
text-align: center;
background: #fff;
}
#checkbox ~ .list{
opacity: 0;
transition: all 0.3s;
}
#checkbox:checked ~ .list{
opacity: 1;
}

label{
cursor: pointer;
background: #fff;
width:100px;
height: 20px;
font-size: 14px;
line-height: 20px;
border-left: 8px solid #9ab;
border-right: 8px solid #9ab;
text-align: center;
display: inline-block;
position: absolute;
top: 8px;
left: 10px;
}
label:before{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
content: "我是隐藏";
}
label:after{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
content: "";
}
#checkbox:checked~label:after{
z-index: 3;
content: "我是显示";
}
#checkbox:checked~label:before{
content: "";
}
-->

  • 我是1
  • 我是2
  • 我是3
  • 我是4
  • 我是5
  • 我是6

这个下拉菜单使用到:after和:before实现文字的切换，这样看起来更有感觉。

最后是之前没弄懂的兄弟选择器：

兄弟选择符 (E~F)是选中所有F兄弟元素，但它是选中E标签以下的所有F标签的兄弟选择器。

最后提一下兼容性问题：因为这是CSS3新特性，所以不兼容老版本的浏览器，例如IE678。。。

我的布局上的技术总结：

行内元素

我这里的行内元素是包含了display：inline和inline-block

因为inline-block包含了行内元素的特性

行内元素都有一个默认的vertical-align:baseline，而行内块级元素会受到

vertical-align:baseline的影响下面多出一点空白间隙。（如果出现下面空白就是这个问题，不过这个有时候是不会出现）

Vertical-align和line-height是有关联的，vertical-align的百分数是相对于line-height的，

如：line-height:50px;

Vertical-align:10%;  那么相对数字就是50*0.1=5

所以行内元素是有很多小问题的。

而解决的方法是转换层块级元素或设置vertical-align:为bottom的值或别的，不是默认的那个baseline就行，

或者改变（line-height这个暂时不懂）。

使用vertical-align垂直居中：

inline-block代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
    body{
        margin: 0;
    }
    .wrap{
        height: 100px;
        width: 100px;
    }
    .b{
        height: 100%;
        width: 1px;
        vertical-align: middle;
        display: inline-block;
        background: red;
    }
    .a{
        font-size: 14px;
        background: skyblue;
        display: inline-block;
        vertical-align: middle;
        width: 99px;
    }
    /* 只有当两个内联块级元素在同行时才起作用，所以不要把另一个元素挤下去 */
    </style>
</head>
<body>
<div class="wrap">
    <div class="a">
    <img src="vote01.jpg" width="50" alt="">
    </div><div class="b"></div>

</div>
</body>
</html>

它实现的原理是在盒子放两个inline-block盒子然后把定位居中的盒子设置vertical-align: middle;

还有把它的宽度改成0，那样它就可以不占位置，这种事取巧的方式，这个很笼统的介绍一下。

总结完毕！

时间： 2024-12-24 05:09:30

项目之技术总结的相关文章

公司某项目前端技术积累

最佳实践 BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt 前期技术选型 BootStrap + Backbone.js + require.js + jquery插件 ExtJS Angular.js BootStrap + jquery + jquery插件 前端技术选型总结: 之所以选择 BootStrap + jquery + jquery插件 的原因是因为ExtJS或Angular.js这种大而全的MVC框架,学习成本较

Gradle3.0自动化项目构建技术精讲+实战

第1章 课程介绍本章主要向大家介绍本课程的整体规划,包括课程收获,适合人群,课程章节安排等,通过本章的学习,可以让大家对课程有一个整体认知. 第2章 gradle快速入门本章会从整体上讲解一下gradle相关概念,让大家明白groovy与gradle, DSL的关系,以及清楚gradle的语法采用的就是groovy的核心语法,避免后面的学习出现概念上的疑惑. 第3章 开发环境搭建本章主要带领大家完成开发环境搭建,包括环境变量配置以及开发环境搭建,为我们后续的开发打下坚实的基础. 第4章 Grad

简历上如果出现过于高大上的项目，反而过犹不及：再论如何通过项目引出技术

我看了前几天些的博文,分析若干没面试机会和没体现实力的简历,就想起了做技术面试官时的一些往事. 我见过有些简历,上面列出的项目描述非常高大上,比如用到了xx机器学习技术,或者在一个项目里基本用全了分布式组件,或者是项目名是xx金融量化系统.再看工作经历,往往就3年经验.而工作经验在5年左右的候选人,在简历中的项目描述往往就是比较朴实,一般见不到这类情况. 在简历中,乃至在面试过程中,项目描述往往仅仅是个载体,第一用来证明自己在项目里确实用到相关经验,第二可以用项目描述打下伏笔,在面试过程中进一步

13.1-全栈Java笔记:打飞机游戏实战项目|AWT技术|MyGameFrame

简介和项目目标 通过游戏项目学习整个Java基础知识体系,我们做了精心的设计,让每一章知识都能获得应用. 比如:多线程用来实现动画效果.容器实现对于多发炮弹的存取和处理.常用类等等的应用. 寓教于乐,让大家迅速入门,更希望通过喜闻乐见的小游戏,让大家爱上编程,爱上"程序员". 老鸟建议 很多朋友会疑惑:"游戏项目,又不能拿到企业面试中,为什么要讲?" 这是一种太过于功利的想法.就像,我们说:"今天吃个馒头,又不是长高,为什么要吃呢?" 游戏项目的

项目分享技术大会总结

大家好,请看ppt,今天我将讲的是angularjs基本运用和项目实战,首先我们先想一下前端的jquery技术已经这么强了,为什么还需要angularjs框架,它有哪些好的地方和哪些不足的地方还需要弥补的,下面我简单的运用一下angularjs的框架的例子: <!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> <script src="angular.js&

株洲小巨蛋项目之技术总结

在做株洲小巨蛋这个项目的时候遇到了很多技术上的问题,下面我把这些问题给总结下来. 1.多行文本如何垂直居中? 如果是单行,直接设置行高与父元素高度一样即可 height: 300px; line-height: 300px; 悲观是瘟疫,乐观是甘霖 但如果多行呢?这么设置并不能使多行文字都垂直居中,反而容易使文本溢出. 悲观是瘟疫,乐观是甘霖;悲观只能产生平庸,乐观才能造就卓绝 那如何设置呢?这里用到了两个命令 display:table-cell(多行固定高度居中) vertical-alig

关于此次团队项目中技术选型问题

关于此次软件项目的开发,我们设计了一个软件应用型的项目.显然,我们的项目跟市场上的主力军项目来比,就像一个刚出蛋壳的小鸡,很多地方都有可能出现纰漏.但是,在信息技术多元化发展的今天,我们必须给予项目技术层面足够多的关注,不然的话,吃亏的只能更加是自己.下面是此次项目开发中的关于技术选型方面的历程: 最初我们打算的项目是网站型的项目,因为网站性的项目访问量可能会比较大,而且还总是受到网络速度的影响,所以我们在选择框架时在前端WEB层中选择了Model View Controller(MVB).之所

我的部分项目和技术文章索引

我的书<深入应用C++11--代码优化与工程级应用> 我在github上的开源项目高性能易用的http server框架高性能易用的序列化/反序列化库header-only形式的C++11基础库C++11封装的高效易用的sqlite库C++11并行任务库 我发表在<程序员>杂志上的文章索引:从4行代码看右值引用 2015.1月A刊 泛化之美--C++11可变参数模版的妙用 2015.2月A刊 C++11模版元编程 2015.2月B刊 C++11模版元编程的应用 2015.3月A刊

【转】vue项目重构技术要点和总结

vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决方案如下: 1.通过vue.set方式赋值 Vue.set(数据源, key, newValue) 2. 通过Array.prototype.splice方法 数据源.splice(indexOfItem,1, newValue) 3.修改数据的长度 数据源.splice(newLength) 4.