Dreamboat509 2021-04-23 21:20 采纳率: 100%
浏览 404
已采纳

html如何让这行文字移到网页右边空白处

html如何让这行文字移到网页右边空白处
  • 写回答

4条回答 默认 最新

  • wanmeikakaxi 2021-04-23 23:56
    关注

    简单替你修改了一下，你原本的部分代码我注释掉，方便你参考。

    <!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HP</title>
    <style type="text/css">
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

.left-con {
    float: left;
}
#lucky {
    float: left;
}
#lucky p {
    margin-left: 10px;
    width: 100%;
}
.me {
	/*width:1301px;*/
	margin: 60px auto;
}
.you {
    height: 120px;
    width: 300px;
    margin: 0px 10px;
}
.tou {
    position: fixed;
    /*top: 0;*/
    /*left: 0;*/
    padding: 15px 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #eeecec;
}
.logo {
	position:relative;
	font-size:22px;
	font-weight:900;
	letter-spacing:1px;
	color:rgb(0,0,0);
}
.logo::before {
	content:'';
	position:absolute;
	left:-50px;
	top:-15px;
	width:50px;
	height:50px;
	background-image:url(img/1.jpg);
	background-size:100%;
}
.biao {
	position:relative;
	display:flex;
	justify-content:center;
	align-content:center;
	list-style:none;
}
.biao li {
	position:relative;
}
.biao a {
	position:relative;
	margin:0 10px;
	font-size:18px;
	font-family:'fangsong';
	font-weight:bold;
	color:rgb(0,0,0);
	text-decoration:none;
}
.left-img img {
    display: block;
    width: 300px;
    margin: 5px 10px;
}
/*.container {*/
/*	padding-bottom:40px;*/
/*	需要 >= footer的height值*/
/*}*/
.footer {
	width:100%;
	height:40px;
	background:#ffffff;
	/*position:fixed;*/
	/*bottom:0px;*/
	/*z-index:-1;*/
	clear:both;
}
/*.hp {*/
/*	width:300px;*/
/*}*/
/*.hh {*/
/*	width:300px;*/
/*}*/
/*.hr {*/
/*	width:300px;*/
/*}*/
/*.xx {*/
/*	width:300px;*/
/*}*/
/*#lucky {*/
/*	padding-left:1100px;*/
/*	overflow:hidden;*/
/*	width:1300px;*/
/*	height:30;*/
/*	text-align:center;*/
/*}*/
</style>
	</head>
  
    <body background="img/4.jpg" style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;">
    <!-- 导航栏 -->
    <div class="tou">
      <span class="logo">惠普</span>
      <ul class="biao">
        <li>
          <a href="">公司主页</a></li>
        <li>
          <a href="">公司简介</a></li>
        <li>
          <a href="">公司产品</a></li>
        <li>
          <a href="">公司反馈</a></li>
        <li>
          <a href="">公司友链</a></li>
      </ul>
    </div>




    <!-- container 开始-->
  <div id="container">


    <marquee class="me" direction="right" loop="100" bgcolor="#888888">HP欢迎您!</marquee>
    <!-- <script type="text/javascript">alert("欢迎进入HP惠普")</script> -->
	<div class="left-con">
    <div class="you" onkeypress="keyFun()">
      <div id="login">
        <form name="loginForm">
          <fieldset id="">
            <legend>用户登录</legend>
            <p>
              <label>邮箱：</label>
              <input type="text" id="txtEmail" class="txt" /></p>
            <p>
              </font>
              <label>密码：</label>
              <input type="password" id="txtPwd" class="txt" /></p>
            <p>
              <input type="button" value="登录" onClick="checkLogin()" />
              <a href="#">忘记密码了？</a></p>
            <input type="reset" value="取消"></fieldset>
        </form>
      </div>
	  </div>


    <div class="left-img">
		<img class="hp" src="img/5.jpg" />
    <img class="hh" src="img/6.jpg" />
    <img class="hr" src="img/8.jpg" />
    <img class="xx" src="img/9.jpg" />
    </div>

</div>


    <div id="lucky">
      <p>佛主保佑,考试全过!</p>
    </div>

 </div>
 <!-- container 结束-->

    <div class='footer' style="text-align:center">
      <span style="line-height: 50px;">
        <font size="1" color="black">© HP.com All Rights Reserved. HP版权所有</font></span>
      </ul>
    </div>



      <script type="text/javascript">
	  function checkLogin() {
          var userEmail = document.getElementById("txtEmail").value;
          var userPwd = document.getElementById("txtPwd").value;
          if (userEmail == "" && userPwd == "") {
            alert("请输入账号和密码");
          } else {
            alert("请输入账号或密码")
          }
          if (userEmail == "123456@qq.com" && userPwd == "123456") {
            alert("登录成功");
          } else {
            alert("登录失败");
          }
        }
        function keyFun() {
          var key = event.keyCode;
          if (key == 13) {
            checkLogin();
          }
        }
		</script>

  </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置