前端速成：双月Java之旅（week6）_day4

最新推荐文章于 2024-10-17 09:40:47 发布

若凡໌້ᮨ

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量283

点赞数

文章标签：前端 java html

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126329875

版权

今天的内容则是在昨天的HTML代码基础上添加了CSS的模块进行修饰，控制组件的位置。

如下是CSS部分的代码。

<style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
                background-image:url(img/background2.jpg);
                background-size: cover;    
            }
            #div1{
                position: absolute;
                top: 120px;
                margin: 0px 50px;
            }
            #div2{
                position: absolute;
                top: 200px;
                margin: 0px 32px;
            }
            #div3{
                position: absolute;
                top: 290px;
                margin: 0px 32px;
            }
            #div4{
                position: absolute;
                top: 360px;
                margin: 0 120px;

            }
            #div5{
                position: absolute;
                top: 390px;
                margin: 0 70px;
            }#div6{
                position: absolute;
                margin:20px 330px;
            }
            #div7{
                position: absolute;
                top: 600px;
                margin: 0 70px;
            }#div8{
                position: absolute;
                top: 600px;
                margin: 0 140px;
            }#div9{
                position: absolute;
                top: 600px;
                margin: 0 210px;
            }#div10{
                position: absolute;
                top: 600px;
                margin: 0 280px;
            }
            a{text-decoration: none;}
            input[type="text"]{
                width: 300px;height: 60px;border-radius: 40px;font-size: 20px;text-align: center;
            }
            input[type="checkbox"]{
                zoom: 90%;
            }
            button{
                width: 300px;height: 60px;border-radius: 40px;font-size: 20px;text-align: center;background-color: #1E90FF;
            }
        </style>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1.0 "/>
       <title>百度登录页</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           html,body{
               width: 100%;
               height: 100%;
               background-image:url(img/background2.jpg);
               background-size: cover;
           }
           #div1{
               position: absolute;
               top: 120px;
               margin: 0px 50px;
           }
           #div2{
               position: absolute;
               top: 200px;
               margin: 0px 32px;
           }
           #div3{
               position: absolute;
               top: 290px;
               margin: 0px 32px;
           }
           #div4{
               position: absolute;
               top: 360px;
               margin: 0 120px;

           }
           #div5{
               position: absolute;
               top: 390px;
               margin: 0 70px;
           }#div6{
               position: absolute;
               margin:20px 330px;
           }
           #div7{
               position: absolute;
               top: 600px;
               margin: 0 70px;
           }#div8{
               position: absolute;
               top: 600px;
               margin: 0 140px;
           }#div9{
               position: absolute;
               top: 600px;
               margin: 0 210px;
           }#div10{
               position: absolute;
               top: 600px;
               margin: 0 280px;
           }
           a{text-decoration: none;}
           input[type="text"]{
               width: 300px;height: 60px;border-radius: 40px;font-size: 20px;text-align: center;
           }
           input[type="checkbox"]{
               zoom: 90%;
           }
           button{
               width: 300px;height: 60px;border-radius: 40px;font-size: 20px;text-align: center;background-color: #1E90FF;
           }
       </style>
   </head>
   <body>
       <div>
           <div id="div1">
               <h2>
                   登录百度账号精彩永相随
               </h2>
           </div>
           <div id="div2">
               <input type="text" value="请输入手机号/用户名/邮箱"/>
           </div>
           <div id="div3">
               <button>下一步</button>
           </div>
           <div id="div4">
               <a href="#"><font size="3" color="black">本机号码一键登录</font></a>
           </div>
           <div id="div5">
               <input type="checkbox">
                   <font size="2" color="black">
                       请你阅读并同意<a href="#"><font color="black"> 百度用户协议 </font></a>
                           和<a href="#"><font color="black"> 隐私政策 </font></a>
                               以及<a href="#"><font color="black"> 儿童个人信息保护声明 </font></a>
                   </font>
           </div>
           <div id="div6">
               <a href="#"><font size="6">×</font></a>
           </div>
           <div id="div7" >
               <img src="img/wechatlogo.jpg"/ width="40px" height="40px">
           </div><div id="div8" >
               <img src= "img/QQlogo.jpg" ="40px" height="40px">
           </div><div id="div9" >
               <img src="img/microbloglogo.jpg"40px" height="40px">
           </div><div id="div10" >
               <img src="img/YYlogo.jpg" width="40px" height="40px">
           </div>
       </div>
   </body>
</html>