我们将创建两个 HTML5 表单，它们将使用 CSS3 伪类:target在登录和注册之间切换。代码如下：

div id=container_demo !-- hidden anchor to stop jump https://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --a class=hiddenanchor id=toregister/aa class=hiddenanchor id=tologin/adiv id=wrapperdiv id=login class=animate formform action=mysuperscript.php autocomplete=onh1Log in/h1plabel for=username class=uname data-icon=u Your email or username /labelinput id=username name=username required=required type=text placeholder=myusername or mymail@mail.com//pplabel for=password class=youpasswd data-icon=p Your password /labelinput id=password name=password required=required type=password placeholder=eg. X8df!90EO //pp class=keeplogininput type=checkbox name=loginkeeping id=loginkeeping value=loginkeeping /label for=loginkeepingKeep me logged in/label/pp class=login buttoninput type=submit value=Login //pp class=change_linkNot a member yet ?a href=#toregister class=to_registerJoin us/a/p/form/divdiv id=register class=animate formform action=mysuperscript.php autocomplete=onh1 Sign up /h1plabel for=usernamesignup class=uname data-icon=uYour username/labelinput id=usernamesignup name=usernamesignup required=required type=text placeholder=mysuperusername690 //pplabel for=emailsignup class=youmail data-icon=e Your email/labelinput id=emailsignup name=emailsignup required=required type=email placeholder=mysupermail@mail.com//pplabel for=passwordsignup class=youpasswd data-icon=pYour password /labelinput id=passwordsignup name=passwordsignup required=required type=password placeholder=eg. X8df!90EO//pplabel for=passwordsignup_confirm class=youpasswd data-icon=pPlease confirm your password /labelinput id=passwordsignup_confirm name=passwordsignup_confirm required=required type=password placeholder=eg. X8df!90EO//pp class=signin buttoninput type=submit value=Sign up//pp class=change_link Already a member ?a href=#tologin class=to_register Go and log in /a/p/form/div/div/div 使用CSS3做图像内容滑块，代码如下：div class=slider-wrapperul class=s-thumbslia href=#slide-1img src=img/thumb1.png alt=spanSlide Left/span/a/lilia href=#slide-2img src=img/thumb2.png alt=spanSlide Right/span/a/lilia href=#slide-3img src=img/thumb3.png alt=spanSlide Top/span/a/lilia href=#slide-4img src=img/thumb4.png alt=spanSlide Bottom/span/a/lilia href=#slide-5img src=img/thumb5.png alt=spanZoom In/span/a/lilia href=#slide-6img src=img/thumb6.png alt=spanZoom Out/span/a/lilia href=#slide-7img src=img/thumb7.png alt=spanRotate/span/a/li/ulul class=s-slidesli class=slideLeft first id=slide-1img src=img/slide1.png alt=/lili class=slideRight id=slide-2img src=img/slide2.png alt=/lili class=slideTop id=slide-3img src=img/slide3.png alt=/lili class=slideBottom id=slide-4img src=img/slide4.png alt=/lili class=zoomIn id=slide-5img src=img/slide5.png alt=/lili class=zoomOut id=slide-6img src=img/slide6.png alt=/lili class=rotate id=slide-7img src=img/slide7.png alt=/li/ul/div.slider-wrapper ul,.slider-wrapper li,.slider-wrapper div,.slider-wrapper img,.slider-wrapper a {margin: 0;padding: 0;border: none;outline: none;list-style: none;}.slider-wrapper {width: 508px;overflow: hidden;}ul.s-thumbs li {float: left;}ul.s-slides,ul.s-slides li,ul.s-slides a,ul.s-slides img {width: 500px;height: 350px;position: relative;}ul.s-slides {overflow: hidden;clear: both;}ul.s-slides li {position: absolute;z-index: 50;}ul.s-thumbs li {float: left;margin-bottom: 10px;margin-right: 11px;}ul.s-thumbs li:last-child {margin-left: 1px;margin-right: 0;}ul.s-thumbs a {display: block;position: relative;width: 55px;height: 55px;border: 4px solid transparent;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;font: bold 12px/25px Arial, sans-serif;color: #515151;text-decoration: none;text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);}ul.s-thumbs img {-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);box-shadow: 1px 1px 5px rgba(0,0,0,.5);}ul.s-thumbs a:hover,ul.s-slides {border: 4px solid #141517;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);box-shadow: 0px 1px 0px rgba(255,255,255,.05);}以上就是登录注册表单和图像内容滑块的全部html和css的全部内容，大家有没有看懂的地方可以给我留言，我会一一为大家解答，如果大家还有不会的效果可以给我留言，我会在下期的文章中为大家答疑解惑，感谢各位大佬的关注与支持，以此致谢！

网站前端开发之Css3和Html5的那些事_成都网站制作   https://cdnanqi.cn/wangzhanzhizuo/11003.html