HTML+CSS实现简单页面设计

学习链接
https://pan.baidu.com/s/14ib0pOWfDNpG9cUkxOJztA

一、导航栏
1、默认的导航栏
2、响应式的导航栏
3、导航栏中的表单
https://www.runoob.com/bootstrap/bootstrap-navbar.html

二、代码如下
1、HTML代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网上花店系统</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="login.css">
</head>
<body>
<div class="container">
    <!-- 导航 栏-->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="nav">

                    <ul>
                        <li><a href="#">花店信息</a></li>
                        <li><a href="#">花类</a></li>
                        <li><a href="#">花语</a></li>
                    </ul>
                </div>

                <!-- 主体内容 （登陆界面）-->
                <div class="main">
                    <!-- 左侧信息栏 -->
                    <div class="sideleft">
                        <h1> 唯愿花常开    人常在</h1>
                        <h1>一生知己   永不相负</h1>


                    </div>
                    <!-- 右侧登陆界面 -->
                    <div class="sideright">
                        <div class="index">
                            <form action="#" method="get">
                                <div class="form-group">
                                        <p class="headline">用户登录</p>
                                        <p class="astyle">用户名：</p>
                                        <input type="text" value="请输入">
                                        <p class="astyle">密码：</p>
                                        <input type="text" value="请输入密码">
                                        <input type="submit" value="登录" name="login" >
                                        <p class="bstyle"><input type="checkbox" name="rempas" />  记住密码</p>
                                        <p class="cstyle">忘记密码</p>
                                        <p class="cstyle">没有账号？<a href="zhuce.html">立即注册</a></p>
                                    </div>

                            </form>
                        </div>
                    </div>
                </div>
                <script src="/js/jquery-3.3.1.min.js"></script>
                <script src="/js/bootstrap.min.js"></script>
            </div>
        </div>
    </nav>
</div>
</body>
</html>

2、CSS代码

*{margin: 0;padding: 0;list-style: none;}
body{
    background: url('picture/1.png') ;
    background-size: 100%;
}
.container{
    width: 800px;
    height: 500px;
    margin: 0 auto;
    /* 	background: #ccc; */
}
/* 导航 */
.nav{
    margin-top: 30px;
    height: 50px;
    line-height: 50px;
}
.nav ul li{
    float: right;
    font-size: 35px;
}
.nav ul li a{
    text-decoration: none;
    color: #5cb85c;
    padding:35px 30px;
}
.nav ul li a:hover{
    border: 1px solid white;
    border-radius:15%;
    color: #154eff;
}
/* 主题内容 */
.main{
    width:1200px;
    height: 450px;
}
.sideleft{
    width:460px;
    height: 250px;
    float: left;
    padding:85px 130px
}
.sideright{
    width: 480px;
    height: 450px;
    float: right;
}
.sideright .index{
    width: 330px;
    height: 350px;
    background-color:rgba(255,255,255,0.75);
    margin: 50px 90px;
}
.headline{
    font-size: 22px;
    text-align: center;
    padding: 20px;
}
input[type="text"],
input[type="submit"]{
   -webkit-align-self:auto;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    font-size:15px;
    width: 240px;
}
input[type="text"]{
    height:35px;
    border-radius:3px;
    border:1px solid #c8cccf;
    color:#6a6f77;
    outline:0;
}
input[type="submit"]{
    margin-top: 25px;
    height: 35px;
    background: #357eb8;
    color: #bcedff;
    font-weight: bold;
    font-size: 16px;
}
input[type="submit"]:hover{
    background: #0e62a3;
    cursor: pointer;
}
.astyle{
    margin: 5px 0 5px 42px;
    font-size:17px;
    color: #6a6f77;
}
.bstyle{
    display: block;
    float: left;
    margin-left: 46px;
    font-size: 15px;
}
.cstyle{
    display: block;
    float: right;
    margin-right: 46px;
    font-size: 15px;
}
.cstyle a{
    text-decoration: none;
}

三、结果
Bootstrap学习二

Bootstrap学习二

HTML+CSS实现简单页面设计

相关推荐