本文是利用几个简单的小例子，来实现html+css的简单应用。

菱形链接菜单

本例是采用html5+css3.0设置的菜单链接。其中主要用到了以下几个方面：

  1. CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。
  2. 用到了margin:25px;/*margin表示元素与其他元素之间的空白*/。
  3. 超链接标签a中垂直居中的设置：设置height 和line-height属性
  4. 鼠标放上去的样式

具体代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>CSS 3.0设置菱形div</title>

     <style type="text/css">

         .menu

         {

              border-bottom:1px solid black;

             }

     .menu div

     {

         width:100px;

         height:100px;

         text-align:center;

         margin:25px;/*margin表示元素与其他元素之间的空白*/

         float:left;

         border:1px solid black;

         transform:rotate(45deg);/*rotate表示旋转45°*/

      }

      .m1

      {

          background-color:Red;

       }

      .m2

      {

          background-color:Blue;

       }

       .m3

      {

          background-color:Green;

       }

       .m4

      {

          background-color:Yellow;

       }

       .m5

      {

          background-color:Gray;

       }

       .m6

      {

          background-color:Olive;

       }

       .m7

      {

          background-color:Orange;

       }

      .menu a

      {

          text-decoration:none;/*不显示下划线*/

          width:70px;

          height:70px;

          margin:15px;

          display:block;

          color:Black;

          text-align:center;

          line-height:70px;

          transform:rotate(-45deg);/*因为外层Div进行旋转，所以a标签也会旋转，所以需要逆向旋转回来*/

       }

       .menu a:hover

       {

           transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/

       }

     </style>

 </head>

 <body>

 <header>

     <h1>这是一个CSS3.0的示例</h1>

     <div class="menu">

         <div class="m1"><a href="#">基础语言</a></div>

         <div class="m2"><a href="#">前端开发</a></div>

         <div class="m3"><a href="#">移动开发</a></div>

         <div class="m4"><a href="#">数据处理</a></div>

         <div class="m5"><a href="#">互联网</a></div>

         <div class="m6"><a href="#">IT硬件</a></div>

         <div class="m7"><span><a href="#">其他</a></span></div>

     </div>

 </header>

 <div style="clear:left;border-top:1px solid black;"></div>

 <div style=" margin-top:2px; border-top:1px solid black;">ada </div>

 </body>

 </html>

三维正方体

本例是采用div+css实现三维正方体，主要涉及到以下几个知识点：

  1. transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
  2. transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
  3. position: relative; 元素的定位。

如下图所示：

具体代码如下：

 .wrap {

     width: 200px;

     height: 200px;

     margin: 200px auto;

     position: relative;

     transform-style: preserve-3d;

     transform: rotateX(30deg) rotateY(30deg);

 }

 .wrap div {

     width: 200px;

     height: 200px;

     position: absolute;

     border: 1px solid blue;

     text-align: center;

     line-height: 200px;

     font-size: 15px;

 }

 #top {

     transform: rotateX(90deg) translateZ(100px);

 }

 #bottom {

     transform: rotateX(90deg) translateZ(-100px);

     border-left: dashed;

 }

 #before {

     transform: translateZ(100px);

     border-bottom: dashed;

     border-left: dashed;

 }

 #after {

     transform: translateZ(-100px);

 }

 #left {

     transform: rotateY(-90deg) translateZ(100px);

 }

 #right {

     transform: rotateY(90deg) translateZ(100px);

 }

一扇打开的门

本例是实现一扇打开的门，涉及的知识点如下：

  1. transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
  2. transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
  3. position: relative; 元素的定位。
  4. border-radius: 20px;定义元素的角的弧度半径。

效果图如下：

具体代码如下：

 #door{

     width:200px;

     height: 200px;

     margin: 200px auto;

     /*border: 1px solid black;*/

     position: relative;

     transform-style: preserve-3d;

 }

 #door div{

     width:200px;

     height: 200px;

     border: 1px solid black;

     position: absolute;

     text-align: center;

 }

 #left{

     transform:rotateX(45deg) rotateY(-45deg) translateX(-200px) translateY(-70px) scaleY(1.4);

 }

 #middle{

     transform:rotateY(45deg) ;

     background-color: greenyellow;

 }

 #right{

     transform:rotateX(45deg) rotateY(45deg) translateX(200px) translateY(-70px)  scaleY(1.4);

 }

 #door #left1{

     width:101px;

     height: 200px;

     border:0px;

     position:absolute;

     margin-left: 0px;

     padding: 0px;

     background-color: darkred;

 }

 #door #left2{

     width:100px;

     height: 200px;

     border:0px;

     position:absolute;

     margin-left: 100px;

     padding: 0px;

     background-color: darkred;

 }

 #door .ball{

     width:20px;

     height: 20px;

     border-radius: 20px;

     background-color: gold;

     margin-top: 10px;

     margin-left: 50px;

     position:relative;

 }

明星照片墙

本例是实现一款自由的明星照片墙，涉及到的知识点如下：

  1. position:absolute; 绝对定位。
  2. transform: scale(1.2); 缩放，大于0：放大，小于0：缩小。
  3. transform: rotate(-30deg); 旋转，二维空间旋转。

效果图如下：

具体代码如下：

 #star{

     width:800px;

     height: 800px;

     background-image: url(../img/bg.jpg);

     background-repeat: repeat;

 }

 #star div{

     width:180px;

     height: 180px;

     border: 1px solid lightblue;

     position:absolute;

 }

 #star div:hover{

     transform: scale(1.2);

 }

 #star p{

     margin-top: 2px;

     padding: 0px;

     text-align: center;

     color: blue;

 }

 #star img{

     width: 180px;

     height: 150px;

 }

 #s1{

     transform: rotate(-30deg);

     top:40px;

     left: 20px;

 }

 #s2{

     transform: rotate(30deg);

     top:350px;

     left: 400px;

 }

 #s3{

     transform: rotate(45deg);

     top:200px;

     left: 200px;

 }

 #s4{

     transform: rotate(60deg);

     top:50px;

     left: 450px;

 }

 #s5{

     transform: rotate(-45deg);

     top:600px;

     left: 500px;

 }

 #s6{

     transform: rotate(-60deg);

     top:400px;

     left: 50px;

 }

 #s7{

     transform: rotate(-45deg);

     top:600px;

     left: 200px;

 }

备注：

关于CSS的定位【position】，详细说明如下：

  1. static:默认定位方式，文档流方式，单独占满一行。left,top,bottom,right不起作用。
  2. absolute:绝对定位，脱离了文档流，不会单独占满一行。方位只会受left,top,bottom,right的影响。默认距离浏览器左上角的距离。如果父元素做了定位，就相对于的是最近的父元素。如果父元素没有定位，则相对于body进行定位。
  3. relative:相对定位，没有脱离文档流，会单独占满一行，方位会受到left,top,bottom,right的影响。相对于离它最近的父元素。
  4. fixed：固定定位，脱离了文档流，不会单独占满一行。lef,top,bottom,right始终相对于body。

关于CSS的块级元素并排，说明如下：

  1. float:块级元素实现漂浮。left,right.
  2. clear:清除浮动，可以清除左浮动和右浮动。

-----------------------------------------------------------------------------------------------------------------

Html5 设置菱形链接菜单的更多相关文章

  1. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  4. [Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔

    <?xml version="1.0" encoding="utf-8"?><!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPo ...

  5. excel设置下拉菜单，并且不同值会显示不同颜色

    工作中常常要用的excel,每次都会有新的需求,然后不会,然后百度,然后过段时间可能就又忘了,于是就想说,自己记录下来~~~因为自己用的都是2010,其实哪个版本都差不多,都是应该可以找到相应的按钮滴 ...

  6. Mysql 的远程设置 和链接方式

    Mysql 设置远程链接: > grant all privileges on *.* to 用户@localhost identified by '密码'; > flush privil ...

  7. 【MyEcplise】设置右键快捷菜单的方法

    在我们右键新建项目或文件时,有许多的选项我们几乎是不用的,那就没有必要放在右键的快捷菜单中:而有些选项是我们经常会用的,但是右键快捷菜单有没有,我们总是需要选择其它去到弹出的对话框中取选取.这些操作很 ...

  8. 2017-11-29 HTML5样式、链接和表格

    HTML5样式.链接和表格HTML5列表<ol> 有序列表<ul> 无序列表<li> 列表项 <dl> 列表<dt> 列表项<dd&g ...

  9. 【转载】网站配置Https证书系列(三)：IIS网站设置Http链接直接跳转Https安全连接

    Http链接请求是以明文的方式传输,在传输的过程中很容易被篡改数据,一个典型的例子就是运营商的网络劫持注入广告信息等,而Https请求则是安全加密的请求,报文数据以密文的形式进行传输.当IIS网站配置 ...

随机推荐

  1. Asp.net中延长session失效时间（2点注意web.config和IIS）

    一个是软件系统中的web.config:   配置文件web.config 的<system.web>下加上<sessionState mode="InProc" ...

  2. 【转】UML图与软件开发过程那点关系

    首先,软工文档, 软工文档,也就是计划,设计,描述,使用软件的一些文件,它最大的特点就是固定不变,用来给不同的人和计算机来阅读.在期间,文档起到了桥梁的作用,看这张图很形象: 在这里在看一下国家统一规 ...

  3. win下安装jdk7后，修改环境变量无法改为jdk6的问题

    jdk的安装包,现在的策略改变了,不再帮你设置环境变量,而是直接把java.exe,javaw.exe,javaws.exe直接拷贝到了system32下. 删掉这3个,path就生效了!

  4. 【面试题】M

    一面: 1.介绍实习项目: 2.计算二叉树叶子节点的数量: 3.排序算法有哪些,手写快排: 4.长度为100的数组,值为1~100,乱序,将其中一个值改为0,找出被更改的值以及位置: 5.输入数值0~ ...

  5. SqlServer查询表中各列名称、表中列数

    查询表名为tb_menu的所有列名 select name from syscolumns where id=object_id('tb_menu')     查询表名为tb_menu的所有列名个数 ...

  6. LeetCode 344. Reverse String

    Problem: Write a function that takes a string as input and returns the string reversed. Example: Giv ...

  7. [转]oracle 分析函数over

      oracle 分析函数over 分析函数(OVER) 目录: =============================================== 1.Oracle分析函数简介 2. O ...

  8. Linux tricks

    Environment Settings Path Globally set path is in /etc/profile; or the user's .bash_profile for part ...

  9. java基础

    属性是对象的特征,每个对象都有自己独立的属性值.一个对象的属性发生变化,不会影响另外一个对象的属性.属性是封装在对象之中的变量,是对象的成员.属性也叫成员变量. null表示一个变量没有指向任何对象. ...

  10. sql server的优缺点

    sql server的优点众多,让其在数据库领域独占鳌头,成为最受欢迎的数据库系统,其优缺点也自然是喜爱者们所关注的,首先了解一下它的历史: sql server是一个关系型数据库管理系统,最初是由M ...