网站建设究竟难不难-只要五步 就能够用HTML5/CS

摘要: :25 来源于:注:该实际效果能够在Safari, Chrome,Firefox和Opera在见到实际效果,IE上因为对HTML5的适用不彻底,因此看不出来实际效果。第一步:建立基本HTML和正正方形最先加上基本的HTML构...

--------

网站建设究竟难不难

------- 2017⑾-27  来自:

注:该实际效果能够在Safari, Chrome,Firefox和Opera在看到实际效果,IE上因为对HTML5的适用不彻底,因此看不出实际效果。

第一步:建立基本HTML和正方形

最先加上基本的HTML构造和搭建基本的正方形,编码以下:


拷贝编码 编码以下:


ul  

li a href= #  

h2 Dudu: /h2  

p 近期咋沒有漂亮美女发帖呢?mend! /p  

/a /li  

li a href= #  

h2 汤姆大叔: /h2  

p Team的一个组员去了Microsoft做SDE3,又得hire new member了 /p  

/a /li  

li a href= #  

h2 技术性弟弟: /h2  

p O2DS和我汉语翻译的书是一样,我一定要比他翻得快, 晚上加班翻,fast! fast! fast! /p  

/a /li  

li a href= #  

h2 Artech: /h2  

p WCF的帖子真是少,来看我很多发点帖子让大伙儿学习培训呢 /p  

/a /li  

li a href= #  

h2 黄道吉日嘎拉: /h2  

p 将管理权限管理方法、工作中流管理方法做到我工作能力的极致,一本人只能做好那末非常少的几件事儿 /p  

/a /li  

li a href= #  

h2 某武林大神: /h2  

p 低于25000块的招聘面试不再去了,它grandma的 /p  

/a /li  

/ul  


 每一个note都加一个href联接,关键是以便适用电脑键盘浏览,CSS编码以下:


拷贝编码 编码以下:


*{ 

margin:0; 

padding:0; 

body{ 

font-family:arial,sans-serif; 

font-size:100%; 

margin:3em; 

background:#666; 

color:#fff; 

h2,p{ 

font-size:100%; 

font-weight:normal; 

ul,li{ 

list-style:none; 

ul{ 

overflow:hidden; 

padding:3em; 

ul li a{ 

text-decoration:none; 

color:#000; 

background:#ffc; 

display:block; 

height:10em; 

width:10em; 

padding:1em; 

ul li{ 

margin:1em; 

float:left; 

第二步:黑影和笔写草体字

这一步,是大家要完成正方形的黑影实际效果,而且将字体样式改成草体(仅限英文),因为google出示了Font API的适用,因此大家能够立即应用了,最先加上对Google API的启用:


拷贝编码 编码以下:


link href= css?family=Reenie+Beanie:regular rel= stylesheet type= text/css  


随后设定引入这个字体样式:


拷贝编码 编码以下:


ul li h2 

font-size: 140%; 

font-weight: bold; 

padding-bottom: 10px; 

ul li p 

font-family: Reenie Beanie ,arial,sans-serif,微软雅黑; 

font-size: 110%; 


有关黑影,因为各个访问器还都不彻底适用,因此需要各自解决,编码以下:


拷贝编码 编码以下:


ul li a 

text-decoration: none; 

color: #000; 

background: #ffc; 

display: block; 

height: 10em; 

width: 10em; 

padding: 1em; /* Firefox */ 

-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1); /* Safari+Chrome */ 

-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */ 

box-shadow: 5px 5px 7px rgba(33,33,33,.7); 

第三步:歪斜正方形

以便让正方形歪斜,大家需要在li- a里加上以下编码:

 

拷贝编码 编码以下:


ul li a{ 

-webkit-transform:rotate(-6deg); 

-o-transform:rotate(-6deg); 

-moz-transform:rotate(-6deg); 


可是以便能让正方形任意歪斜,而并不是所有都歪斜,大家需要应用新的CSS3挑选器,让正方形在每2个歪斜4个deg,每3个歪斜负3个deg,每6个歪斜5个deg:


拷贝编码 编码以下:


ul li:nth-child(even) a{ 

-o-transform:rotate(4deg); 

-webkit-transform:rotate(4deg); 

-moz-transform:rotate(4deg); 

position:relative; 

top:5px; 

ul li:nth-child(3n) a{ 

-o-transform:rotate(-3deg); 

-webkit-transform:rotate(-3deg); 

-moz-transform:rotate(-3deg); 

position:relative; 

top:-5px; 

ul li:nth-child(5n) a{ 

-o-transform:rotate(5deg); 

-webkit-transform:rotate(5deg); 

-moz-transform:rotate(5deg); 

position:relative; 

top:⑽px; 

第四步:Hover和Focus时放缩正方形

想在hover和focus的情况下做到放缩的实际效果,大家需要加上以下编码:

 

拷贝编码 编码以下:


ul li a:hover,ul li a:focus{ 

-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); 

-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 

box-shadow:10px 10px 7px rgba(0,0,0,.7); 

-webkit-transform: scale(1.25); 

-moz-transform: scale(1.25); 

-o-transform: scale(1.25); 

position:relative; 

z-index:5; 

第五步:光滑过渡和加上色调

第四步的殊效,看起来有些生涩,大家能够加上Transition来做到光滑动漫的实际效果,此外色调比较单一,大家能够设定一下不一样的色调,最先在ul- li- a里加上Transition:


拷贝编码 编码以下:


-moz-transition:-moz-transform .15s linear; 

-o-transition:-o-transform .15s linear; 

-webkit-transition:-webkit-transform .15s linear; 


随后在even和3n里界定不一样的色调:


拷贝编码 编码以下:


ul li:nth-child(even) a{ 

-o-transform:rotate(4deg); 

-webkit-transform:rotate(4deg); 

-moz-transform:rotate(4deg); 

position:relative; 

top:5px; 

background:#cfc; 

ul li:nth-child(3n) a{ 

-o-transform:rotate(-3deg); 

-webkit-transform:rotate(-3deg); 

-moz-transform:rotate(-3deg); 

position:relative; 

top:-5px; 

background:#ccf; 


---------

网站建设究竟难不难

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


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站