来讲讲：CSS网页计划实例:网页上岸表单实例
不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。破洛洛文章简介：网页上岸表单实例。
W3cplus从明天刚开推出藤藤实习的CSS3系列。出这个系列次要是为了让一样有着CSS3乐趣的同砚更有动力，在这个系列中都是由W3cplus玉人成员藤藤天天依据外洋汇集的有关psd计划图，然后将计划图经由过程css3的代码转换成DEMO案例。一是为了本人进步，二是与其他有一样喜好的同砚一同分享。假如你喜好，那就延续存眷w3cplus的有关更新。
这个案例次要制造的是一个登录表单，在这个案例中利用了box-shadow、gradient,transform和transition等属性，个中最难的中央是输出框被咬的那部分，底本利用纯CSS3的突变共同多背景制造，但受限于暗影，终极改动利用base的64位图象处置。具体的参考代码吧：
HTML布局：
<divclass="box">
<formaction="#"method="get">
<ul>
<li>
<labelfor="username">Email:</label><inputtype="text"id="username"class="username"placeholder="john.smith@strategysoft.com"/>
</li>
<li>
<labelfor="password">Password:</label><inputtype="password"id="password"class="password"placeholder="******"/>
</li>
</ul>
<ahref="javascript:;"class="button"/><iclass="icon-arrow-right"></i></a>
</form>
</div>
CSS代码：
body,ul{
margin:0;
padding:0
}
a{
color:rgb(1,124,185);
text-decoration:none;
}
input:focus{
outline:none0;
}
body{
color:#b5b5b5;
font:14pxArial;
}
body,
li:first-child:after,
li:last-child:after{
background-image:url(data:image/png;base64,...);/**/
}
.box{
position:relative;
width:384px;
height:140px;
margin:50pxauto;
}
.boxli{
list-style-type:none;
margin-bottom:10px;
border-radius:5px;
overflow:hidden;
position:relative;
height:42px;
}
.boxliinput{
box-shadow:inset005pxrgba(0,0,0,.5),-1px1px0rgba(255,255,255,.05);
border:0none;
padding:8px5px5px;
border-radius:5px;
width:300px;
height:28px;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
-o-box-sizing:content-box;
-ms-box-sizing:content-box;
box-sizing:content-box;
background:rgba(0,0,0,.1);
color:#fff;
}
.boxli:first-child:after,
.boxli:last-child:after{
position:absolute;
width:50px;
height:50px;
content:"";
border-radius:25px;
z-index:2;
right:-23px;
box-shadow:008pxrgba(0,0,0,.5);
}
::-webkit-input-placeholder{
color:#fff;
font-weight:bold;
}
.boxli:first-child:after{
top:15px;
}
.boxli:last-child:after{
bottom:15px;
}
.boxlabel{
width:70px;
display:inline-block;
text-align:right;
}
.boxspan{
display:block;
color:#6296b4;
padding-left:75px;
}
.button{
position:absolute;
top:24px;
right:-30px;
width:44px;
height:44px;
border-radius:22px;
border:1pxsolid#00a1d2;
background:-webkit-linear-gradient(top,#029ecd,#0d7796);
color:#fff;
text-shadow:1px1px0#666;
box-shadow:0005px#2c2c2c;
z-index:3;
text-align:center;
line-height:46px;
-webkit-transition:all0.28sease-in;
-moz--transition:all0.28sease-in;
}
.button:hover{
-webkit-transform:rotate(90deg);
}
@font-face{
font-family:FontAwesome;
src:url(font/fontawesome-webfont.eot);
src:url(font/fontawesome-webfont.eot?#iefix)format(embedded-opentype),
url(font/fontawesome-webfont.woff)format(woff),
url(font/fontawesome-webfont.ttf)format(truetype),
url(font/fontawesome-webfont.svg#FontAwesome)format(svg);
font-weight:normal;
font-style:normal;
}
.icon-arrow-right:before{
font-family:FontAwesome;
font-weight:normal;
font-size:26px;
font-style:normal;
display:inline-block;
text-decoration:inherit;
content:"f061";
}
</p>
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 学Dreamweaver技术的过程其实是一个增加信心的过程。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]