網站前端開發之Css3和Html5的那些事

　　我們將創建兩個HTML5表單，它們將使用CSS3偽類：target在登錄和注冊之間切換。代碼如下：pid=container_demo

　　！--hiddenanchortostopjumpwww.300.cn

　　/

　　labelfor=passwordclass=youpasswddata-icon=pYourpassword/label

　　inputid=passwordname=passwordrequired=requiredtype=passwordplaceholder=eg.X8df！90EO/

　　/

　　pclass=keeplogin

　　inputtype=checkboxname=loginkeepingid=loginkeepingvalue=loginkeeping/

　　/

　　pclass=loginbutton

　　inputtype=submitvalue=Login/

　　/

　　pclass=change_link

　　Notamemberyet？

　　ahref=#toregisterclass=to_registerJoinus/a

　　/

　　/form

　　/

　　pid=registerclass=animateform

　　formaction=mysuperscript.phpautocomplete=on

　　h1Signup/h1

　　labelfor=usernamesignupclass=unamedata-icon=uYourusername/label

　　inputid=usernamesignupname=usernamesignuprequired=requiredtype=textplaceholder=mysuperusername690/

　　/

　　labelfor=emailsignupclass=youmaildata-icon=eYouremail/label

　　inputid=emailsignupname=emailsignuprequired=requiredtype=emailplaceholder=mysupermail@mail.com/

　　/

　　labelfor=passwordsignupclass=youpasswddata-icon=pYourpassword/label

　　inputid=passwordsignupname=passwordsignuprequired=requiredtype=passwordplaceholder=eg.X8df！90EO/

　　/

　　labelfor=passwordsignup_confirmclass=youpasswddata-icon=pPleaseconfirmyourpassword/label

　　inputid=passwordsignup_confirmname=passwordsignup_confirmrequired=requiredtype=passwordplaceholder=eg.X8df！90EO/

　　/

　　pclass=signinbutton

　　inputtype=submitvalue=Signup/

　　/

　　pclass=change_link

　　Alreadyamember？

　　ahref=#tologinclass=to_registerGoandlogin/a

　　/

　　/form

　　/

　　/

　　/

　　使用CSS3做圖像內容滑塊，代碼如下：

　　pclass=slider-wrapper

　　ulclass=s-thumbs

　　1.pngalt=spanSlideLeft/span/a/li

　　2.pngalt=spanSlideRight/span/a/li

　　3.pngalt=spanSlideTop/span/a/li

　　4.pngalt=spanSlideBottom/span/a/li

　　5.pngalt=spanZoomIn/span/a/li

　　6.pngalt=spanZoomOut/span/a/li

　　7.pngalt=spanRotate/span/a/li

　　/ul

　　ulclass=s-slides

　　1.pngalt=/li

　　2.pngalt=/li

　　3.pngalt=/li

　　4.pngalt=/li

　　5.pngalt=/li

　　6.pngalt=/li

　　7.pngalt=/li

　　/ul

　　/

　　.slider-wrapperul，

　　.slider-wrapperli，

　　.slider-wrapperp，

　　.slider-wrapperimg，

　　.slider-wrappera{

　　margin：0;

　　padding：0;

　　border：none;

　　outline：none;

　　}

　　.slider-wrapper{

　　width：508px;

　　overflow：hidden;

　　}

　　ul.s-thumbsli{

　　float：left;

　　}

　　ul.s-slides，

　　ul.s-slidesli，

　　ul.s-slidesa，

　　ul.s-slidesimg{

　　width：500px;

　　height：350px;

　　position：relative;

　　}

　　ul.s-slides{

　　overflow：hidden;

　　clear：both;

　　}

　　ul.s-slidesli{

　　position：absolute;

　　z-index：50;

　　}

　　ul.s-thumbsli{

　　float：left;

　　margin-bottom：10px;

　　margin-right：11px;

　　}

　　ul.s-thumbsli：last-child{

　　margin-left：1px;

　　margin-right：0;

　　}

　　ul.s-thumbsa{

　　display：block;

　　position：relative;

　　width：55px;

　　height：55px;

　　border：4pxsolidtransparent;

　　-webkit-transition：all0.25sease-in-out;

　　-moz-transition：all0.25sease-in-out;

　　-o-transition：all0.25sease-in-out;

　　-ms-transition：all0.25sease-in-out;

　　transition：all0.25sease-in-out;

　　font：bold12px/25pxArial，sans-serif;

　　color：#515151;

　　text-decoration：none;

　　text-shadow：1px1px0pxrgba(255，255，255，.25)，inset1px1px0pxrgba(0，0，0，.15);

　　}

　　ul.s-thumbsimg{

　　-webkit-box-shadow：1px1px5pxrgba(0，0，0，.5);

　　-moz-box-shadow：1px1px5pxrgba(0，0，0，.5);

　　box-shadow：1px1px5pxrgba(0，0，0，.5);

　　}

　　ul.s-thumbsa：hover，

　　ul.s-slides{

　　border：4pxsolid#141517;

　　-webkit-border-radius：3px;

　　-moz-border-radius：3px;

　　border-radius：3px;

　　-webkit-box-shadow：0px1px0pxrgba(255，255，255，.05);

　　-moz-box-shadow：0px1px0pxrgba(255，255，255，.05);

　　box-shadow：0px1px0pxrgba(255，255，255，.05);

　　}

　　以上就是登錄注冊表單和圖像內容滑塊的全部html和css的全部內容，大家有沒有看懂的地方可以給我留言，我會一一為大家解答，如果大家還有不會的效果可以給我留言，我會在下期的文章中為大家答疑解惑，感謝各位大佬的關注與支持，以此致謝！