接上篇：前端必看的8个HTML+CSS技巧（下）

文：https://blog.csdn.net/TriDiamond6/article/details/105222289

5. 图片视差效果

这个超级炫酷的效果在官网中非常的受欢迎，这种效果可以给用户带来视觉冲击，也给我们的网站带来了活力。普通的网页图片会跟随着网页一起滑动，但是视觉差效果图就会固定在底部，只有图片所在的窗口上的元素会移动。

仅使用CSS

对你没有看错，这个效果只需要用到CSS就能轻易的实现！我们只要使用一个CSS背景图的属性background-attachment: fixed，这个特性会把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

实现理论：

一、在含有图片的元素中加入background: url()和background-size: cover（第二个属性适用于定义图片为封面，可以让图片大小自动适应，在很大的屏幕也会显示完整的图片）
二、然后附加固定背景图的属性background-attachment: fixed
三、最后给这个元素加入一个高度height: 100%或者任意的高度height: 400px

就那么简单哦！不用怀疑，马上上代码，大家都可以自己去试试哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>这里填写一堆文字就可以了，尽量多一点哦</p>
</div>

CSS

.wrapper {  
  height: 100wh;
}
.parallax-img {  
  background-attachment: fixed;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-size: cover;  
  height: 100%;  
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {  
  font-size: 20px;  
  padding: 1.5rem 3rem;  
  min-height: 1000px; 
  // 当你的文字内容不够，也能撑出足够的高度来看到效果，当然如果你文字足够多，就不需要了
}

知识总结

background-attachment: fixed — 把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
background-size: cover — 可以让图片大小自动适应，在很大的屏幕也会显示完整的图片。

使用CSS + JavaScript

有些童鞋可能没有被这个震撼到或者还是觉得不够刺激。那我们再来一个高级例子，上面的例子在滑动的时候图片是固定死的。如果我们加上JavaScript的助力，我们可以让窗口的图片缓慢的跟随这个页面滑动，使得效果更有动力和更有冲击感。

实现理论

首先讲一下排版，因为我们需要在我们滑动页面的时候使用JavaScript偏移图片，所以我们需要给图片一个CSS属性让我们可以让图片可以根据一个速度来往上或者往下移动。这个例子里面我们让所有图片包裹在一个div里面，class名为block。这个div给予相对定位属性position: relative，这个时候我们就可以在里面加入图片，然后让图片绝对定位position: absolute在这个div盒子里面。

但是图片是可能很大的，我们需要把图片不超出我们定义个盒子，所以我们的div同时也给予了overflow: hidden和一个高度height: 100%。这样图片超出div盒子就会被隐藏。

布局代码如下：

<div class="block">  
  <img    src="https://unsplash.it/1920/1920/?image=1005"    data-speed="-1"    class="img-parallax"  />  
    <h2>视差速度 -1</h2>
</div><div class="block">  
<img    src="https://unsplash.it/1920/1920/?image=1067"    data-speed="1"    class="img-parallax"  />  
  <h2>视差速度 1</h2>
</div>

html, body{  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
  font-family: 'Amatic SC', cursive;
}
.block{  
  width: 100%;  
  height: 100%;  
  position: relative;  
  overflow: hidden;  
  font-size: 16px;
}
.block h2{  
  position: relative;  
  display: block;  
  text-align: center;  
  margin: 0;  
  top: 50%;  
  transform: translateY(-50%);  
  font-size: 10vw;  
  color: white;  
  font-weight: 400;
}
.img-parallax {  
  width: 100vmax;  
  z-index: -1;  
  position: absolute;  
  top: 0;  
  left: 50%;  
  transform: translate(-50%,0);  
  pointer-events: none
}

实现这个布局，在你滑动的时候，图片是不会移动的。因为最后一步就是加入JavaScript的辅助，让图片活起来。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
  </script><script>
// 循环获取每一个图片元素
$(".img-parallax").each(function () {  
  var img=$(this);  
  var imgParent=$(this).parent();  
  function parallaxImg() {    
    var speed=img.data("speed"); /
    / 获取每张图片设置了的偏移速度    var imgY=imgParent.offset().top; // 获取图片盒子所在的Y位置    var winY=$(this).scrollTop(); // 获取当前滑动到的位置    var winH=$(this).height(); // 获取浏览器窗口高度    var parentH=imgParent.innerHeight(); // 获取图片盒子的内高度    // 浏览器窗口底部的所在位置    var winBottom=winY + winH;     // 当前图片是否进入浏览器窗口    if (winBottom > imgY && winY < imgY + parentH) {      // 运算图片需要开始移动的位置      var imgBottom=(winBottom - imgY) * speed;      // 运算出图片需要停止移动的位置      var imgTop=winH + parentH;      // 获取从开始移动到结束移动的%（根据开始与结束像素 + 移动速度）      var imgPercent=(imgBottom / imgTop) * 100 + (50 - speed * 50);    }    img.css({      top: imgPercent + "%",      transform: "translate(-50%, -" + imgPercent + "%)",    });  }  $(document).on({    scroll: function () {      parallaxImg();    },    ready: function () {      parallaxImg();    },  });});</script>

知识总结

position: relative — 相对定位。
position: absolute — 绝对定位。
overflow: hidden — 如果需要，内容将被剪裁以适合填充框。不提供滚动条。

6. 裁剪图像的动画

在有CSS3之前裁剪图片实现也是颇有难度的。现在我们有了两个非常方便简单的CSS3属性可以实现裁剪，那就是object-fit和object-position, 这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比。

当然我们可以使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。但是因为有了CSS3的属性，我们不只可以裁剪，我们还可以用裁剪的属性来做图片的动态效果。

为了让我们的例子更加简单，我们这里使用了<input type="checkbox">复选框元素，这样我们就可以使用:checked的伪类来触发启动效果。所以在例子里面我们完全不需要JavaScript的协助。

实现原理：

一、首先给予图片一个宽高height: 1080px，width: 1920px。
二、然后用CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图片设定一个新的宽高，这里我们给宽高各自500像素：width: 500px，height: 500px。
三、然后我们加上了过渡效果和时间让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例，这样就大功告成了！

我们来看看完成的代码：

勾选裁剪图片 
  <input type="checkbox" />
    <br />
    <img  src="https://img-blog.csdnimg.cn/2020032122230564.png"  alt="Random"/>

input {  
  transform: scale(1.5); 
  /* 只是用来放大复选框大小 */  
  margin: 10px 5px;  
  color: #fff;
}
img {  
  width: 1920px;  
  height: 1080px;  
  transition: 0s;
}
/* css选择器锁定复选框被选中时的状态 */
input:checked + br + img {  
  width: 500px;  
  height: 500px;  
  object-fit: cover;  
  object-position: left-top;  
  transition: width 2s, 
  height 4s;
}

知识总结

object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。

transition — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

7. 混合模式（Blend）

如果有使用过Photoshop的同学对blend混合模式应该是非常熟悉了，我们都知道混合模式是非常强大，也是p图时非常常用的一个功能。但是你们有没有想象过可以在浏览器的CSS中直接使用呢？对我们不需要设计师给我们做图，我们前端也可以实现混合模式了。

在CSS中我们不只可以对background背景加入混合模式，我们可以对任何一个元素的自带背景加入混合模式，让你可以做出很多之前没有想过的效果和排版。

往一个元素加入混合模式，我们只需要使用到一个CSS属性mix-blend-mode即可。

简单实现原理：

首先我们只需要加一个h1标题标签

<h1>混合模式：颜色减淡</h1>

然后我们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge，但是要注意的是我们需要给body和html加入背景颜色background: white，要不你会发现这个效果会无效。因为h1我们没有给颜色，会自动往上级继承，并且混合模式是针对背景颜色的过滤，所以body和html需要有背景颜色才行。

h1 {   
  mix-blend-mode: color-dodge;   
  font-family: yahei;   
  font-size: 5rem;   
  text-align: center;   
  margin: 0;    
  padding: 20vh 200px;   
  color: #D1956C; 
} 
html, body {   
  margin: 0;   
  background-color: white; 
} 
body {   
  background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);   
  background-repeat: no-repeat;   
  background-size: cover;   
  min-height: 100vh;   
  overflow: hidden; 
}

换换背景图和h1标签的字体颜色就可以弄出各种不同的特效了。

知识总结

mix-blend-mode — CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

8. 瀑布流布局

CSS Grid和Flexbox让我们可以更简便，更容易和更快的实现各式各样的响应布局，并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。

虽然这些新出的布局方式可以让我们解决很多以前的布局难题，但是像瀑布流布局这种，就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。

其实最好实现瀑布流布局的办法就是用CSS的列属性套件，这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流，就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置，所以现在有了列属性就可以使用纯CSS实现了。

实现原理：

实现这个布局，首选我们需要把所有的内容先包裹在一个div元素里面，然后给这个元素column-width和column-gap属性。

然后，为了防止任何元素被分割到两个列之间，将column-break-inside: avoid添加到各个元素中。

神奇的效果就完美实现了，零JavaScript。

我们来看看代码：

<div class="columns">  
  <figure>    
  	<img src="https://source.unsplash.com/random?city" alt="" />  
    </figure>  
	<figure>    
    <img src="https://source.unsplash.com/random?night" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?developer" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?building" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?water" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?coding" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?stars" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?forest" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?girls" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?working" alt="" />  
  </figure>
</div>

.columns {  
  column-width: 320px;  
  column-gap: 15px;  
  width: 90%;  
  max-width: 1100px;  
  margin: 50px auto;
}
.columns figure {  
  display: inline-block;  
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  
  column-break-inside: avoid;  
  border-radius: 8px;
}
.columns figure img {  
  width: 100%;  
  height: auto;  
  margin-bottom: 15px;  
  border-radius: 8px;
}

知识总结

column-width — CSS属性建议一个最佳列宽。列宽是在添加另一列之前列将成为最大宽度。

column-width — 该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。

column-break-inside — 设置或检索对象内部是否断。

总结

我希望这8个前端小技巧和特效对大家有帮助，或多或少有吸收一点新的前端知识。这篇文章提到的内容，其实很多都是值得深挖和学习的。有一些例子我做的比较简单，但是其实是有无限的可能性。喜欢前端的童鞋们，让我们继续在前端领域中一起深挖，让我们的热爱无限的燃烧起来吧！

在最后我想给大家讲一下我对前端的热爱和态度。

回想前端这几年，发展真的是突飞猛进，从前端排版，HTML5+CSS3做H5页面，到前端组件化，各种UI框架满天飞。

一开始我随着热潮用起了UI框架，起初觉得特别方便，来一个新的项目就直接上一个UI框架，研发速度也非常快。但是久而久之就觉得前端开发变成了处理数据，对接接口，实现交互。

某天在阅览国外的一些前端设计和框架的时候，我突然发现国内多数的前端开发者都不再怎么使用CSS3做出一些很好玩的布局和特效了。现在市面上的系统和页面都是千篇一律，普遍都是用一些知名的UI框架搭建系统和APP，基本自己动手去排版已经少之又少。前端已不再是以前的前端，缺少了灵魂。

但是我们回想一下，我们刚刚开始学习前端的时候，让我们最有成就感，觉得前端特别有意思的那种感觉。就是那种让我们觉得神乎奇迹，不可思议的布局，特效和交互。那种感觉自己成功实现了很优美，很炫酷的页面和特效的感觉，让我们越做越来劲，越做越是兴奋。

但是在某些公司，研发部都是要求快速开发，UI设计部门也是受到时间的控制和限制，所以逐步走进了UI框架的限制之中。都是围绕这一些UI框架来设计和开发系统和应用。

作为一名热爱前端的开发者，我还是坚持在绝大多数的项目中，自己排版和实现页面交互特效。然后使用UI框架作为辅助，主要是用来减轻一些小组件和常用组建的快速实现。（可以说我是比较追求完美和外貌协会的程序员）

————————————————

版权声明：本文为CSDN博主「三钻」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/TriDiamond6/article/details/105222289

SS

盒子模型

1. 盒模型分为标准盒模型和怪异盒模型(IE模型)

2. box-sizing：content-box //标准盒模型

3. box-sizing：border-box //怪异盒模型

4. 标准盒模型：元素的宽度等于style里的width+margin+border+padding宽度

如下代码，整个宽高还是120px

div{
 box-sizing: content-box;
 margin: 10px;
 width: 100px;
 height: 100px;
 padding: 10px;
}

5. 怪异盒模型：元素宽度等于style里的width宽度

如下代码，整个宽高还是100px

div{
 box-sizing: border-box;
 margin: 10px;
 width: 100px;
 height: 100px;
 padding: 10px;
}

注意：如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-sizing是什么，最好在引用reset.css的时候，就对border-sizing进行统一设置，方便管理

rem与em的区别

1. rem是根据根的font-size变化，而em是根据父级的font-size变化

2. rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px

3. em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=3D24px

CSS常用选择器

1. 通配符：*

2. ID选择器：#ID

3. 类选择器：.class

4. 元素选择器：p、a 等

5. 后代选择器：p span、div a 等

6. 伪类选择器：a:hover 等

7. 属性选择器：input[type=3D”text”] 等

css选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

CSS新特性

1. transition：过渡

2. transform：旋转、缩放、移动或者倾斜

3. animation：动画

4. gradient：渐变

5. shadow：阴影

6. border-radius：圆角

绝对定位和相对定位的区别

1. position: absolute
绝对定位：是相对于元素最近的已定位的祖先元素

2. position: relative
相对定位：相对定位是相对于元素在文档中的初始位置

水平垂直居中

1. Flex布局

1). display: flex //设置Flex模式

2). flex-direction: column //决定元素是横排还是竖着排

3). flex-wrap: wrap //决定元素换行格式

4). justify-content: space-between //同一排下对齐方式，空格如何隔开各个元素

5). align-items: center //同一排下元素如何对齐

6). align-content: space-between //多行对齐方式

2. 水平居中

1). 行内元素：display: inline-block;

2). 块级元素：margin: 0 auto;

3). Flex: display: flex; justify-content: center

3. 垂直居中

1). 行高=3D 元素高：line-height: height

2). flex: display: flex; align-item: center

2.8. Less,Sass,Styus三者的区别

1. 变量

1). Sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。

2). Less 声明变量用『@』开头，其余等同 Sass。

3). Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。

2. 作用域

1). Sass：三者最差，不存在全局变量的概念

2). Less：最近的一次更新的变量有效，并且会作用于全部的引用！

3). Stylus：Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效；

3. 嵌套

三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同

4. 继承

Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass，两者如出一辙。 Less 则又「独树一帜」地用伪类来描述继承关系；

5. 导入@Import

6. Sass 中只能在使用 url() 表达式引入时进行变量插值

$device: mobile;
@import url(styles.#{$device}.css);

7. Less 中可以在字符串中进行插值

@device: mobile;
@import "styles.@{device}.css";

8. Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现

device="mobile"
@import "styles." + device + ".css"

9. 总结

1). Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css，所以它可能学习起来更容易。

2). Sass 和 Compass、Stylus 和 Nib 都是好基友。

3). Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过When等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus

4). Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用

link与@import区别与选择

<style type="text/css">
 @import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" />

1). link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css；

2). 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载；

3). @import需要 IE5 以上才能使用；

4). link可以使用 js 动态引入，@import不行

多行元素的文本省略号

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical

什么是BFC?

BFC全称 Block Formatting Context 即块级格式上下文，简单地说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界

如何触发BFC

1. float不为 none

2. overflow的值不为 visible

3. position 为 absolute 或 fixed

4. display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则是什么

1. BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界

2. 计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）

3. BFC的区域不会与float的元素区域重叠

4. BFC内部的元素会在垂直方向上放置

5. BFC内部两个相邻元素的margin会发生重叠

BFC的应用场景

1. 清除浮动：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷

2. 避免某元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠

3. 阻止外边距重叠：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

2.15. CSS3有哪些新特性？

1. 圆角（border-radius:8px）

2. 新增各种CSS选择器、伪类（经常用到 :nth-child）

3. 文字渲染（Text-decoration）

4. 转化为简写属性，可设置text-decoration-color, text-decoration-style, text-decoration-line三个属性，默认值为currentcolor solid none。

5. 透明色 & 透明度（opacity）

6. 旋转（transform）

7. 旋转 rotate，缩放 scale，倾斜 skew，平移 translate

8. 动画(animation) & 过渡效果(transition)

9. 阴影（box-shadow, text-shadow）

10. 新的布局方式，如多列布局 multi-columns 、弹性布局 flexible box 与网格布局 grid layouts

11. 线性渐变（gradient）

12. 多背景（background-image可以设置多个url或linear-gradient）

13. 媒体查询(@media MDN) (可以看看这个)

14. 边框可以设置图片（border-image）

说一下CSS3的flex box（弹性盒布局模型）

1. 什么是flex box?

1). CSS3新增布局。

2). Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

3). 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

4). 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。

5). 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

6). 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便地用来做局中，能对不同屏幕大小自适应。

7). 在布局上有了比以前更加灵活的空间。

2. 应用场景?

1). 水平垂直居中

2). 一边定宽，一边自适应

3). 多列等分布局

4). sticky footer

用纯CSS创建一个三角形的原理是什么？

节分享了利用css居中的五种方法，现在我们开始创建一个简单但是有趣的网站。最终的样子是这样的：

步骤一

以语义化标签开始是很好的。下面是我们的页面构成：

#floater (to push the content into the middle)

#centred (the centre box)

#side

#logo

#nav (unordered list <ul>)

#content

#bottom (for copyright, etc.)

这是我用到的 xhtml 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>A Centred Company</title>

</head>

<body>

<strong><span>A</span> Company</strong>

</div>

<li><a href="#">Products</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

<h1>Page Title</h1>

<p>Holisticly re-engineer value-added outsourcing after

process-centric collaboration and idea-sharing. Energistically

simplify impactful niche markets via enabled imperatives. Holisticly

predominate premium innovation after compelling scenarios.

Seamlessly recaptiualize high standards in human capital with

leading-edge manufactured products. Distinctively syndicate

standards compliant schemas before robust vortals. Uniquely

recaptiualize leveraged web-readiness vis-a-vis out-of-the-box

information.</p>

<h2>Heading 2</h2>

<p>Efficiently embrace customized web-readiness rather than

customer directed processes. Assertively grow cross-platform

imperatives vis-a-vis proactive technologies. Conveniently empower

multidisciplinary meta-services without enterprise-wide interfaces.

Conveniently streamline competitive strategic theme areas with

focused e-markets. Phosfluorescently syndicate world-class

communities vis-a-vis value-added markets. Appropriately reinvent

holistic services before robust e-services.</p>

</div>

<p>Copyright notice goes here</p>

</div>

</body>

</html>

步骤二：

现在我们开始用一些基本的 CSS 来给页面添加样式。把以下代码放入在我们的 html 页面顶部被引入的 style.css。

html, body {

margin: 0;

padding: 0;

height: 100%;

}

body {

background: url('page_bg.jpg') 50% 50% no-repeat #FC3;

font-family: Georgia, Times, serifs;

}

#floater {

position: relative;

float: left;

height: 50%;

margin-bottom: -200px;

width: 1px;

}

#centered {

position: relative;

clear: left;

height: 400px;

width: 80%;

max-width: 800px;

min-width: 400px;

margin: 0 auto;

background: #fff;

border: 4px solid #666;

}

#bottom {

position: absolute;

bottom: 0;

right: 0;

}

#nav {

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 70%;

padding: 20px;

margin: 10px;

}

#content {

position: absolute;

left: 30%;

right: 0;

top: 0;

bottom: 0;

overflow: auto;

height: 340px;

padding: 20px;

margin: 10px;

}

#centered {

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

h1, h2, h3, h4, h5, h6 {

font-family: Helvetica, Arial, sans-serif;

font-weight: normal;

color: #666;

}

h1 {

color: #f93;

border-bottom: 1px solid #ddd;

letter-spacing: -0.05em;

font-weight: bold;

margin-top: 0;

padding-top: 0;

}

#bottom {

padding: 10px;

font-size: 0.7em;

color: #f03;

}

#logo {

font-size: 2em;

text-align: center;

color: #999;

}

#logo strong {

font-weight: normal;

}

#logo span {

display: block;

font-size: 4em;

line-height: 0.7em;

color: #666;

}

p, h2, h3 {

line-height: 1.6em;

}

a {

color: #f03;

}

在我们能够把 content 垂直居中之前， body 和 html 应该被拉伸到 100％的高度。由于 height

在 padding 和 margin 之内，所以我们要把它们设成 0 以防止因为很小的 margin 出现滚动条。

floater 的 margin-bottom 是 content 高度(400px)的一半， -200px。

现在可以看到一下效果：

#centred 的宽度为 80％。这可以市网页随着显示器的大小而变化。一般称作流体布局。设置 min-width 和

max-width 以避免网页过大或者过小。但是 IE 不支持 min/max-width。显然可以用固定宽度来代替。

因为 #centred 是相对定位的，在它里面我们可以用绝对定位来定位元素。设置 #content 的 overflow:auto;

以避免滚动条的出现。IE 不怎么喜欢 overflow:auto; 除非我们指定高度(不是 top 和 bottom 的定位，也不是％)

因此我们给它指定高度。

步骤三

最后要做的就是再添加点样式，让页面好看点。从目录开始吧。

#nav ul {

list-style: none;

padding: 0;

margin: 20px 0 0 0;

text-indent: 0;

}

#nav li {

padding: 0;

margin: 3px;

}

#nav li a {

display: block;

background-color: #e8e8e8;

padding: 7px;

margin: 0;

text-decoration: none;

color: #000;

border-bottom: 1px solid #bbb;

text-align: right;

}

#nav li a::after {

content: '?';

color: #aaa;

font-weight: bold;

display: inline;

float: right;

margin: 0 2px 0 5px;

}

#nav li a:hover, #nav li a:focus {

background: #f8f8f8;

border-bottom-color: #777;

}

#nav li a:hover::after {

margin: 0 0 0 7px;

color: #f93;

}

#nav li a:active {

padding: 8px 7px 6px 7px;

}

需要注意的是 #centred 的圆角。 CSS3 中，应该有 border-radius 属性来设定圆角的半径(可参考 CSS3之旅: border-radius(圆角) – 糖伴西红柿)。现在的流行的浏览器都还不支持，除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前缀.

水平居中经常用，其实垂直居中也很有用的。平时用的最多的应该是上节讲的方法五了，算是个小技巧吧。谁还有更好的方法吗，欢迎留言交流。

在线咨询

上一篇：electron自定义窗口和右键菜单样式
下一篇：为前端工程之崛起而编程！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

接上篇：前端必看的8个HTML+CSS技巧（下）

5. 图片视差效果

使用CSS + JavaScript

7. 混合模式（Blend）

8. 瀑布流布局

总结

SS

盒子模型

rem与em的区别

CSS常用选择器

css选择器权重

CSS新特性

绝对定位和相对定位的区别

水平垂直居中

2.8. Less,Sass,Styus三者的区别

link与@import区别与选择

多行元素的文本省略号

什么是BFC?

如何触发BFC

BFC的渲染规则是什么

BFC的应用场景

2.15. CSS3有哪些新特性？

说一下CSS3的flex box（弹性盒布局模型）

用纯CSS创建一个三角形的原理是什么？

您的项目需求