简单的页面美化

最新推荐文章于 2022-09-22 15:41:48 发布

Turing·

最新推荐文章于 2022-09-22 15:41:48 发布

阅读量1.5k

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/qq_41835813/article/details/91909927

版权

web 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

背景图+导航

<style>
    body{
       background-image: url("image/ios.jpg");
       background-size:cover;
       }
    ul{
      list-style:none;
      posttion:absolute;
      right:0;
      top:15px;
       }
    ul li{
       float:left;
       margin-right:15px; 
        }
     ul li a {color:white;}
     .title{width:400px;margin:auto;}
     .title div{
          float:left;
          border:1px solid red;
          font-size:30px:
          padding:5px 15px;
          margin-left: 30px;
          border-radius:50%;
                }
          .box{
             width: 800px;
             margin: 200px auto;
              }
       .search1{
           width；500px;
           height:40px;
           line-height:36px; 
           background:rgba(255,255,255,0,5,);
           border:1px solid;
           font-size:16px;
           color:blue;
           margin-left；80px;
              }       
        .search1{
           width；104px;
           height:45px;
           font-size:16px;
           background；#38f;
           color:#FFF;
           line-height:40px;
           border:none;
               } 
           .search2:hover{background: #969922;} 
          a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>

<ul>
      <li><a href="http://localhost:8080/practical_training/Index_start">首页</li>
      <li><a href="http://localhost:8080/practical_training/Account_information">账户消息</li>
      <li><a href="http://localhost:8080/practical_training/LookShopoing_cart">购物车</li>
      <li><a href="http://localhost:8080/practical_training/Account_information">订单</li>
      <li><a href="http://localhost:8080/practical_training/login.jsp">登录</li>
      <li><a href="http://localhost:8080/practical_training/registered.jsp">注册</li>
    </ul>

登陆

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登录注册页面</title>
    <style>
      .content{
      			background-color: #1cff89;
      			position:absolute;
      			width:100%;
      			height:400px;
      			}
   	  .main{
   	  			text-align: center;
   	  			padding:50 px 0px;
   	  			margin: 0 auto;
   	  			}
   	  h2{
   	  			font-famliy:"微软雅黑";
   	  			font-size: 40px;
   	  			font-weight: bold;
   	  			}
   	  input {
   	  			border: 1px solid white;
   	  			display: block;
   	  			margin:10px auto;
   	  			padding: 5px;
   	  			width: 230px;
   	  			border-radius 15px;
   	  			font-size: 18px;
   	  			font-weight: 300;
   	  			text-align: center;
   	  			}
   	  button{
   	  			background-color:#20a7ff;
   	  			border-radius: 10px;
   	  			border: 0;
   	  			height；30px;
   	  			width:80px;
   	  			padding: 5px;
   	  			color: white;
   	  			}
   	  </style>	
</head>
  <body>
  <div class="ocntent">
   <div class="main">
    <h2>welcome!</h2>
    <form>
        <input type="text" placeholder="用户名"/>
        <input type="password" placeholder="密码" >
        <p>
        	<button type ="sun=bmit" >登&nbsp;&nbsp;录</button>>
        	<button type ="sun=bmit" >注&nbsp;&nbsp;册</button>>
        </p>
       </form>
      </div>
     </div>  
  </body>
</html>

Turing·

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
简单的页面美化

背景图+导航<style> body{ background-image: url("image/ios.jpg"); background-size:cover; } ul{ list-style:none; posttion:absolute; right:0; top...
复制链接

扫一扫