蓝色简洁形式pc+wap企业登录网页模板代码

蓝色简洁形式pc+wap企业登录网页模板代码

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700" rel="stylesheet">

2. HTML代码

    <!-- main -->
    <div class="main-top-intro">
        <div class="bg-layer">
            <!-- header -->
            <div class="wrapper">
                <header>
                    <div class="header-w3layouts">
                        <h1>
                            <a class="navbar-brand logo" href="index.html">
                                Utilizer
                            </a>
                        </h1>
                    </div>
                    <div class="nav_w3pvt">
                        <nav>
                            <label for="drop" class="toggle mt-lg-0 mt-2"><span class="fa fa-bars" aria-hidden="true"></span></label>
                            <input type="checkbox" id="drop" />
                            <ul class="menu">
                                <li class="active"><a href="#">Home</a></li>
                                <li class=""><a href="#">About</a></li>
                                <li class=""><a href="#">Services</a></li>
                                <li class="p-0">
                                    <!-- First Tier Drop Down -->
                                    <label for="drop-2" class="toggle">Pages <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
                                    <a href="#">Pages <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                                    <input type="checkbox" id="drop-2" />
                                    <ul class="inner-dropdown">
                                        <li><a href="#">Error Page</a></li>
                                        <li><a href="#">About Us</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Portfolio</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="buttons mt-lg-0 mt-3 ml-auto">
                        <div class="form-w3layouts-grid">
                            <form action="#" method="post" class="newsletter">
                                <input class="search" type="search" placeholder="" required="">
                                <button class="form-control btn" value=""><span class="fa fa-search"></span></button>
                                <div class="clear"></div>
                            </form>
                        </div>
                    </div>
                    <div class="clear"></div>
                </header>
                <!-- //header -->
                <div class="content-inner-info">
                    <h2>Say Hello !!!</h2>
                    <div class="content-w3layouts-main">
                        <div class="form-w3ls-left-info">
                            <form action="#" method="post">
                                <input type="email" placeholder="Email Address" required="" />
                                <input type="password" placeholder="Password" required="" />
                                <div class="links">
                                    <p><a href="#">Forgot Password?</a></p>
                                </div>
                                <div class="bottom">
                                    <button class="btn" type="submit">Log In</button>
                                    <button class="btn reg" type="reset">Reset</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- copyright -->
                <div class="copy-w3layouts-inf">
                    <p>© 2019
                        Utilizer Login. All rights reserved | Design by
                        <a href="https://www.51qianduan.com/">51前端</a>
                    </p>
                    <ul class="list-unstyled w3layouts-icons">
                        <li>
                            <a href="#" class="face-b">
                                <span class="fa fa-facebook-f"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="twit">
                                <span class="fa fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="dribble">
                                <span class="fa fa-dribbble"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="vk">
                                <span class="fa fa-vk"></span>
                            </a>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <!-- //copyright -->
            </div>
        </div>
    </div>
    <!-- //main -->

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到