第二次作业

最新推荐文章于 2024-10-02 05:39:15 发布

2401_85136737

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量192

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_85136737/article/details/139560462

版权

第一题使用css+html完成导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        body{
            height: 100px;
            display: flex;
        }
        ul{
            display: flex;
            margin: auto;
        }
        li{
            position: relative;
            padding: 20px;
            font-size: 24px;
            color: pink
        }
        li::before{
            position: absolute;
            top: 0;
            left: 100%;
            width: 5%;
            height: 100%;
            border-bottom: 2px sc;
            transition: 0.2 all;
        }
        li：hover::before{
            width: 100%;
            top: 0;
            left: 0;
        }
        li:hover-li::before{
            left: 0;
        }
        li::before{
            width: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>商城特惠</li>
        <li>个人中心</li>
        <li>购物车</li>
    </ul>
</body>
</html>

第二题使用css+html完成某网站至少三个页面，必须包含登录页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .login{
            width: 300px;
            margin: 20px auto;
        }
        /* 去除input标签的边框 */
        .login input{
            border: none;
            outline: none;
        }
        .login-item{
            border:1px solid rgb(220,220,220);
            margin-bottom: 10px;
            height: 35px;
            line-height: 35px;
            padding-left: 5px;
        }
        .login-item span{
            font-size: 24px;
            color: rgb(204,204,204);
            vertical-align: middle;
        }
        .login-item input{
            height: 30px;
            line-height: 30px;
        }
        .login-type {
            margin-top: 15px;
            height: 15px;
        }
        .login-type a{
            text-decoration: none;
            font-size: 12px;
            color: #666;
        }
        .login-type a:first-child{
            float: left;
        }
        .login-type a:last-child{
            float: right;
        }
        input[type="submit"]{
            width:100% ;
            height: 35px;
            line-height: 35px;
            background-color: rgb(255,102,0);
            color: rgb(255,255,255);
            font-size: 20px;
            font-weight: bolder;
            letter-spacing: 5px;
            margin-top: 15px;
        }
        .register{
            text-align: center;
            margin-top: 10px;
        }
        .register a{
            text-decoration: none;
            font-size: 12px;
            color: rgb(255,102,0);
        }
    </style>
</head>
<body>
    <div class="login">
        <form action="" method="post"> 
            <div class="login-item">
                <span class="iconfont icon-yonghu"></span>
                <input type="text" name="username" placeholder="用户名/手机号/邮箱"/>
            </div>
            <div class="login-item">
                <span class="iconfont icon-mima"></span>
                <input type="password" name="password" placeholder="密码"/>
            </div>
            <div class="login-type">
                <span class="iconfont icon-shouji"></span>短信验证码登录
                忘记密码?
            </div>
            <div class="login-btn">
                <input type="submit" value="登录"/>
            </div>
        </form>
        <div class="register">
            注册&amp;nbsp;有惊喜 &amp;gt
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        a{text-decoration: none;}
        ul,ol
        {
            list-style: none;
        margin-left: 20px;
            list-style-image:url(img/point.jpg);
        }
        nav.menu{
                     width: 100%;
                    height: 50px;
                    background-color: #5fbdef;
                    color: white;
                            text-align: center;
                            line-height: 50px;
        }
        a:link {color: #FF0000}		/* 未访问的链接 */
        a:visited {color: #00FF00}	/* 已访问的链接 */
        a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
        a:active {color: #0000FF}
        
        .box{
            
            width:200px;
            height:40px;
            text-align: center;
            line-height: 40px;
            background-color: #22be53;
            color: white;
            margin: auto; 
        }
    </style>
</head>
<body>
    <nav class="menu">
		<ul>
			<li><h1>QQ登录</h1>
			</li>
			</ul>
		</nav>
		<br>
				<div style="text-align:center; > 
					<p style="height:40px; font-size:15px; line-height:28px;" >推荐使用快速安全登录,防止盗号。</p >
					<br>
				</div>
			
					<div style="text-align:center; > 
				    <form method="get" action="#" id="myform">
					<input type="text" name="账号"  style="width:200px; height:30px; font-size:15px;"  placeholder="支持QQ号/邮箱/手机号登录" >
					<br><br>
					<input type="password" name="密码" style="width:200px; height:30px; font-size:15px;margin: auto; " placeholder="密码">
					</form>
				</div>
<br><br>
		<div class="box" style="text-align:center; >
		
			授权登录
			</div>
		
		
					<br><br>
				<div style="text-align:center; >
					
					
					忘了密码?
					
					新账号
					
					意见反馈
					<br>
				
				</div>
				<div style="text-align:center; >
					<p style="height:28px; font-size:12px; line-height:28px;" >将获得以下权限:</p >
					<br>
					<input type="checkbox" name="" checked="checked">全选<br>
					<input type="checkbox" name="" checked="checked">获得您的昵称、头像、性别
					<td><br><br>
					<p style="height:28px; font-size:12px; line-height:28px;" >腾讯网将获得以下权限:</p >
					</div>

</body>
</html>