用什么运行HTML5和css,Html5 和 CSS的简单应用

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

菱形链接菜单

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

CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。

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

超链接标签a中垂直居中的设置：设置height 和line-height属性

鼠标放上去的样式

具体代码如下：

CSS 3.0设置菱形div

.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);/*鼠标放上去后，放大,移动*/

}

这是一个CSS3.0的示例

基础语言

前端开发

移动开发

数据处理

互联网

IT硬件

其他

ada

三维正方体

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

transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。

transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。

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);

}

一扇打开的门

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

transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。

transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。

position: relative; 元素的定位。

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;

}

明星照片墙

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

position:absolute; 绝对定位。

transform: scale(1.2); 缩放，大于0：放大，小于0：缩小。

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】，详细说明如下：

static:默认定位方式，文档流方式，单独占满一行。left,top,bottom,right不起作用。

absolute:绝对定位，脱离了文档流，不会单独占满一行。方位只会受left,top,bottom,right的影响。默认距离浏览器左上角的距离。如果父元素做了定位，就相对于的是最近的父元素。如果父元素没有定位，则相对于body进行定位。

relative:相对定位，没有脱离文档流，会单独占满一行，方位会受到left,top,bottom,right的影响。相对于离它最近的父元素。

fixed：固定定位，脱离了文档流，不会单独占满一行。lef,top,bottom,right始终相对于body。

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

float:块级元素实现漂浮。left,right.

clear:清除浮动，可以清除左浮动和右浮动。

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

html css的简单学习(二)

html css的简单学习(二) 告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

HTML5 div+css导航菜单

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

html5 canvas 实现一个简单的叮当猫头部

原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

CSS绘制简单图形

究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

html css的简单学习(三)

html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

html css的简单学习

html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...

css实现简单的告警提示动画效果

需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 ...

css实现简单音乐符效果

css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现

Codeforces 551E - GukiZ and GukiZiana(分块)

Problem E. GukiZ and GukiZiana Solution: 先分成N=sqrt(n)块,然后对这N块进行排序. 利用二分查找确定最前面和最后面的位置. #include < ...

SVN打基线

分成trunk.tags.branches的话,那直接从trunk copy 到tags下面就可以或者按照你自己的目录,只要规定好就行 选择要打基线的项目的根目录,右击鼠标,在弹出的菜单中选择“分支/ ...

Java实现OOP&lpar;面向对象编程&rpar;

一.对象的综述 面向对象编程(OOP)具有多方面的吸引力.对管理人员,它实现了更快和更廉价的开发与维护过程.对分析与设计人员,建模处理变得更加简单,能生成清晰.易于维护的设计方案.对程序员,对象模型显 ...

【Scala】Scala之Traits

一.前言 前面学习了Scala中包和导入的相关知识点,接着学习Traits(特质) 二.Traits Scala的特质与Java的接口基本相同,当遇到可以使用Java接口的情形,就可以考虑使用特质,S ...

fetch知识点汇总

使用XHR发送一个json请求一般是这样: const xhr = new XMLHttpRequest() xhr.open('Get', url) xhr.responseType = 'json ...

&excl;&excl;在js中的用法

var obj = ""; //undefinedconsole.log(!!obj);  //false(强制转换成Boolean类型)

as3 加载gif loader

as3原生不支持gif动态图 loader 加载gif ,内容只是以bitmap加载进来 需要动态,另外衍生类: https://files.cnblogs.com/files/dt1991/GifL ...

java NIO系列教程1

ava NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. Java NIO: Channel ...