前端基础学习分享

用a标签制作一个按钮为主线，然后围绕这个按钮，做一些效果样式等操作。附件中可以下载CSS参考手册。

一、工具

工欲善其事必先利其器。我们首先需要准备好调试工具，这里我就简单介绍几种，firefox、chrome以及IE。

1.firefox

我们用到的是firebug，非常好用，工具-》附加组件。这里有一篇firebug教程。

安装好后按F12就可以直接调试了：

2.chrome

chrome的调试工具默认就是自带的，也是按F12就可以出来，但这个调试工具还带了个手机的模拟器，可以用来调试手机页面。

3.IE

IE有许多版本，而一台电脑上面默认安装的只能是一个版本的IE，这个时候就需要IETester来协助了，它能模拟多个版本的IE，不过后面我在调试的时候发现，CSS模拟的还不错，但JS有时候模拟的就不对，所以用这个调试CSS还可以，以后如果要调试JS的话，就自己装个虚拟机来调试吧。里面也带了个调试工具，但不是很好用。

IE8以后，浏览器也会自带调试工具，那个就好用很多了，也能实时修改CSS属性。

4.fiddler

它是一个非常强大的http(s)协议分析工具。如果你需要查看在手机上打开页面时，查看所产生的http请求，那么用这个工具是不错的选择，《使用Fiddler调试手机页面请求 》介绍配置fiddler，让其也能监测手机的请求。

二、基础CSS

先推荐几个以后常用的网站：

  1. 可以在caniuse上查询各种兼容性。
  2. html5test可以检测当前访问的浏览器对HTML5特性的支持程度。
  3. html5readiness以时间纬度展示所有浏览器HTML5特性的可用性。
  4. HTML5 Boilerplate，最流行的web开发前端模版
  5. Mozilla开发者网络(MDN)，在这里能够查到最新最全的资料，有些页面是英文的

1.不添加任何样式，朴素的效果如下：

　　蓝色，下划线，这些都是a标签默认的样式，很多情况下，标签的默认样式是需要重置的。有网友整理了浏览器标签的默认样式，《HTML标签CSS属性默认值汇总》。在我写的另外一篇文章中，展示了一段重置的CSS代码，查看reset.css。

　　一则，重置后浏览器的兼容性能更好

　　二来，有些默认属性是很多余的，例如下面的这个下划线，很多地方都不需要这个样式

　　HTML代码如下，标签都会自己的特有属性，例如下面的href。

<a href="#" title="点击按钮">按钮</a>

　　在w3school网站上可以看到各个标签的详细属性，有些属性是支持HTML5的浏览器才能使用的，例如下图所示，有个icon的就是HTML5独有的。

2.去除默认样式，改变字体颜色大小，背景等

CSS代码如下：

　　.btn{
                text-decoration:none;
                color:#FFF;
                font-size:20px;
                line-height:30px;
                background-color:#27a9e3
            }

几个常用属性，奥妙无穷。从CSS参考手册中可以查看到：

color可以有多种指定方式：Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent。

font-size的单位可以是px、em、pt或者是rem。这里《CSS中强大的EM》比较详细的介绍了em。

background在CSS3中又多了几个新属性background-clip、background-size等

一个简单属性的赋值可以是多种的，不同场合用哪种方式比较合适，这是需要调试的，这里只做一个简单的抛砖引玉，有兴趣的可以去按需深入研究下。

3.让按钮更美观——补白

上面那张图中的按钮比较丑，字跟边都帖在一起啦。得内补白一下。

.btn2{
    padding:10px
}

效果如下所示，虽然只加了一个属性，但是效果明显要好很多了。

补白是在页面布局中经常用到的属性，分为外补白【margin】和内补白【padding】。

下面这张图我是加了margin的，上下左右四个方向都加了，但是上面的外边距在我的firefox中失效了。

这里就要提一下，一些属性在某些场合是失效的，有些情况是不同内核的浏览器显示的不一样，有些可以，有些不行；有些情况是所有浏览器都不行。

这种时候就要通过搜索引擎来搜索了，网上肯定有很多人碰到过相关的问题。

.btn2{
    padding:10px;
    margin:10px
}

网上找了张比较立体感的示意图：

这里顺便提下CSS hack技术：

如果你仅仅是要一种浏览器显示正确，那可以完全忽略这段介绍，如果不是，那你可以阅读下。

由 于不同厂商的流览器或某浏览器的不同版本（如IE6- IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现 效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

这是一种比较次的方法，只有在万不得已的情况下才使用。很多时候是可以避免出现这种情况的。

有网友整理了一套hack方法——《CSS hack方式一览》。

从statcounter上获取到的最新浏览器统计记录：

4.来个两行按钮，每行显示三个按钮

.btn3{
    padding:10px;
    margin:10px
}

的确是两行，三列了，但是明明加了margin了，上下还是贴在一起了。这里就涉及到一个知识点。

html中有块级元素与行内元素之分，a标签默认是行内元素，而行内元素的一些特性导致了上面的结果。

这里有篇介绍两者区别的文章《行内元素与块级元素的区别和常用标签》

我先简单的介绍下两者的特点：

1.块级元素【Block-level element 】

块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。

2.内联元素【Inline element】

文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。

1）通过属性display可以将元素变成块级、内联或内联块元素等。这三个比较常用，它还有好几个值可以选择。

.btn3{
    padding:10px;
    margin:10px;
    display:inline-block
}

立刻立竿见影，好看了许多。

2）页面在一行上面，经常是用float浮动来做的

.btn3{
    padding:10px;
    margin:10px;
    float:left
}

与上面的比起来，有个细微的差别，那就是按钮之间的右艰巨小了一点。

这个是由于inline-block造成的，因为inline-block元素之间是有间隙的，有些布局的情况是不允许有间隙的，宽度间距都是算好的，突然来个不能计算的间隙很容易让布局变形。网上有很多具体的解决方法，例如《inline-block元素间间隙产生及去除详解》

float浮动的用法也是很有讲究的，我这里只是做个简单展示，很多情况下，浮动完后是需要清除的。清除的方法也有很多，网上也是一大堆，例如《些年我们一起清除过的浮动》

5.把按钮放到靠左30px，离上面40px的位置

果断用position定位，这东西有些地方妙用一下，还是很有用处的。

首先要将按钮的父标签设置为position:relative，然后a标签设置为position:absolute。

网上有个关于position的系列文章《CSS 相对|绝对(relative/absolute)定位系列》可以参考下。

.container2{
    position:relative;
    height:100px
}
.btn4{
    position:absolute;
    top:40px;
    left:30px;
    padding:10px;
}

下面的图片布局样式很普通，左边一张图，右边一些说明文字。

我以前布局的话就会用float浮动，给图片和文子两块区域设置为float:left来布局，最后还得做清除浮动。

现在的话我可以用position定位，把图片设置为position:absolute，这样右边的文字区域就能简单的用margin-left来指定位置，避免使用浮动。

顺带说下，下图中的旅行两个字也是用定位来设置的。

6.给按钮做个移上去变色的效果

这里涉及到CSS选择器的概念，将使用:hover来达到效果。

.btn5:hover{
    background-color:#faa732
}

我以前写过一篇随笔，记录了这些选择器，《CSS选择器的一些记录》。

顺带说下，你可以在css3.info网站上面可以测试当前浏览器对CSS选择器的兼容程度。测试不包括:hover，:active， :focus，:selection，:visited，:link。

fortawesome是一个字体库，里面的CSS代码中就大量用了选择器。例如下面的那个手指icon，CSS我只摘取了部分。

.icon-hand-down:before {
    content: "\f0a7";
}
[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none !important;
  background-position: 0% 0%;
  background-repeat: repeat;
}

:before与:after这两个选择器，使用的场景也非常多。在网上搜索下，会有一大堆相关资料，挑自己感兴趣的研究吧。

三、CSS3与HTML5

接下来讲一些CSS3与HTML5的特性，最近这个东西特别的火。

1.给按钮加个圆角

如果是以前，那就得切图啦，切几个圆角，然后贴在指定的位置，特费神费事。但自从有了border-radius，让这一切变的so easy。

.btn6{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    padding:10px;
}

-webkit与-moz这是私有前缀，早期的firefox或chrome浏览器只认这些私有前缀的CSS3属性。

-moz-对应 Firefox, 
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer

2.给按钮加个阴影

丑是丑了点，这里只做个演示，给个思路。

.btn7{
    -webkit-box-shadow: 0 0 10px 10px #000000;
    box-shadow: 0 0 10px 10px #000000;
    padding:10px;
}

现在网上有很多在线调试CSS3代码的小工具，这个就是在线调试的。例如CSS3 Generator。

这里顺带便再分享几个在线调试工具：

  1. CSS Gradient Generator
  2. Gradients、Shadows、CSS Transforms、CSS Text Stroke

  3. 自己制作icon
  4. 自适应图片
  5. 傻瓜化的矩阵变形工具
  6. CSS3 背景渐变图案
  7. Ultimate CSS Gradient Generator
  8. 国外的fontawesome，国内的iconfont
  9. 丰富的css3动画效果

3.来个高大上的动画按钮

以前记录过《CSS3动画的属性》，现在搬出来看看，参考一下。

随便搞了个效果，代码就一大堆。移到中间的时候就变大，移到两边再恢复。

.animation1{
                -moz-animation-duration: 3s;
                -moz-animation-name: slidein;
                -moz-animation-iteration-count: infinite;
                -moz-animation-direction: alternate;

                -webkit-animation-duration: 3s;
                -webkit-animation-name: slidein;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;

                -o-animation-duration: 3s;
                -o-animation-name: slidein;
                -o-animation-iteration-count: infinite;
                -o-animation-direction: alternate;

                -ms-animation-duration: 3s;
                -ms-animation-name: slidein;
                -ms-animation-iteration-count: infinite;
                -ms-animation-direction: alternate;

                animation-duration: 3s;
                animation-name: slidein;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
            @keyframes slidein {
                from {margin-left:50%}
                50% {font-size: 300%;margin-left: 25%;width: 150%;}
                to {margin-left:0;}
            }
            @-moz-keyframes slidein {
                from {margin-left:50%}
                50% {font-size: 300%;margin-left: 25%;width: 150%;}
                to {margin-left:0;}
            }
            @-webkit-keyframes slidein {
                from {margin-left:50%}
                50% {font-size: 300%;margin-left: 25%;width: 150%;}
                to {margin-left:0;}
            }
            @-o-keyframes slidein {
                from {margin-left:50%}
                50% {font-size: 300%;margin-left: 25%;width: 150%;}
                to {margin-left:0;}
            @-ms-keyframes slidein {
                from {margin-left:50%}
                50% {font-size: 300%;margin-left: 25%;width: 150%;}
                to {margin-left:0;}
            }

4.现在来说说HTML5

这里就先不做演示了，就点一下。我现在也正在研究那些特性。

1）canvas 元素

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。使用 HTML5 canvas 绘制精美的图形。

例如下面这个，可以用鼠标来拖放。模拟衣服撕扯动画，这效果已经亮瞎了我的眼。

2）数据存储

像Cookie一样，这些数据不会因为你打开新网站，刷新页面，乃至关闭你的浏览器而消失。

而与Cookie不同的时，这些数据不会每次随着HTTP请求被发送到服务器端(当然如果你需要这么做，你可以自己编程实现 ）

因为这是HTML5规范的一部分，这一接口会被浏览器原生支持，不用依赖任何第三方插件。

在caniuse网站上查看local storage兼容性。

3）HTML5离线应用

使用它的本地缓存机制可以将应用所需的资源文件都缓存到本地，从而实现应用的离线使用。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

4）WebSocket

HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。

附件下载：

CSS参考手册下载

w3school-html5.chm

示例代码下载

时间： 2024-10-03 11:03:04

前端基础学习分享的相关文章

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

前端每周学习分享--第2期

1. 项目工具相关 1.1. ESLint代码检测工具 ESLint属于一种QA工具,是一个ECMAScript/JavaScript语法规则和代码风格的检查工具,可以用来保证写出语法正确.风格统一的代码. ESLint旨在完全可配置,它的目标是提供一个插件化的javascript代码检测工具. 更多 1.2. nginx Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器,Nginx,它的发音为"engine X",是一个高性能的HTTP和反向代理服务器,同时也是一个 IMA

前端基础学习一

一.html学习 web通信的本质就是浏览器作为客户端发送请求,服务端通过socket对象接受请求并相应的过程 例子: #!/usr/bin/python # --*-- coding:utf-8 --*-- import socket def main():     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)     sock.bind(('127.0.0.1', 8081))     sock.listen(5)     

Bigger-Mai 养成计划，前端基础学习之HTML

HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: 写Html文件(充当模板的作用)@@@@ 数据库获取数据,然后替换到html文件的指定位置(web框架) 3.本地测试 找到文件路径,直接浏览器打开 pycharm打开测试 4.编写Html文件 doctype对应关系 html标签,标签内部可以写属性 注释:  <!-- 注释的内容 --> 20个标签 原文地址:https://www.cnblogs.com/mm-jj/p/10283700.html

前端基础学习--CSS3创建简单的网页动画 – 实现弹跳球动

基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将使用 Flexbox 布局,把球放到页面中间,尺寸为 100px * 100px,背景色为橘×××. CSS 代码: body { display: flex; /* 使用Flex布局 */ justify-content: center; /* 水平居中 */ } .ball { width: 100px;

前端基础学习css

一.伪类 anchor用于控制链接效果 a:link (没有访问过的链接),定义链接的常规状态 a:hover(鼠标放在链接上的状态),用于控制显示效果 (常用) a:visited(访问过的链接) ,能清楚判断访问过的链接 a:active(在鼠标按下时的状态) 例子: Title.{             : : : }         .{             : : : }         .:.{             : }         :{             ::

Bigger-Mai 养成计划，前端基础学习之CSS

在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择区 #i1{ background-color: #2459a2; height: 48px; } - class选择器 ****** .名称{ ... } <标签 class='名称'> </标签> - 标签选择器 div{ ... } 所有div设置上此样

前端基础学习-css实现波浪线及立方体

这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html <div class="card-list"> <div class="wave-container"> <div class="wave"></div> <!-- 实现波浪线的div --> <div cla

前端基础学习-CSS实现柱形图

CSS在处理排版之强大,没有做不到,只有想不到.下面我们将一同实现一个柱状图. 先打好一个具体的框架.我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充. <ul class="chart"> <li><em>使命召唤</em><span>: </span><strong>35%</strong></li> <li><em&