1. 设置一张大的背景，颜色不要过亮
2. 设置一个白色的div，设置一点点阴影，提升立体感
3. 放置大标题，两个输入框，下方的提示文字
4. 通过增加媒体查询获得响应式布局
<!-- 注释 行首，行尾，行，块 作用：说明思路，解释语法，解释规则 版权信息 用于布局练习的DEMO 作者：Kadare Chen 日期：2019-08-19 09:45 版本：v1.0 all right received © Copyed by Kadare Chen --> <!-- 何为HTML 用于浏览器的解释性结构语言 是一种所见即所得的快速结构语言 是一种有明确分工（体现在*标签*上）的结构化（体现在*层级关系/成对*）的标记语言 常见标签？ A-Z a abbr acronym applet area b body br base bdl bdo big button c center canvas cite code col d div dd del dir dl dt ... 标签的属性？ 公共属性：id name class style 个性属性：href src 差异属性(自定义属性)：date date-xxx HTML和CSS的关系 就行修房子和装修的关系 html：修房子 css：布局和样式，装修考他 两者都可以独立存在 html+css+JS的关系 强弱电、水电气改造 DEMO：布局 基于国字型的基本布局 --> <!DOCTYPE html> <!-- 就关系而言（层级） HTML>HEAD>BODY>Tags HTML：浏览器的内核 IE edge firefox webkit head标签：面向浏览器解释器（底层） body标签：面向用户 --> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmum-scale=1.0,user-scalable=no" /> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} html{ height: 100%; width: 100%; /* html面向浏览器,他多大浏览器就多大 */ } body{ height: 100%; width: 100%; } .panel_warp{ /* 铺满浏览器整个页面 颜色为红色 */ /* DIV 独占一行 width: 100% 没有行高 height: 0 边框不可见 border:0/none */ height: 100%; width: 100%; background-color: red; /* 自容器居中布局 */ /* 弹性盒子来完成布局效果 */ /* 特点： 1. 作用于父容器，一级子容器生效 */ display: flex; /* 设置为盒子模型 */ justify-content: center; /* 设置为水平居中 */ align-items: center; /* 设置为垂直居中 */ background-image: url(img/be23061f-f731-424f-a31d-a1251c01770c.jpeg); background-size: 100% 100%; } .panel_login{ height: 300px; /* width: 500px; */ width: 500px; background-color: white; box-shadow: 0px 0px 10px 0px black; /* 居中布局 所有元素定位的顶点在左上角 */ /* position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -150px; */ margin: 0 auto; display: flex; /* 默认弹性盒模型从左向右排列 */ flex-flow: column; /* 排列方向改变为垂直排列，相应属性的作用方向也发生变化 */ justify-content: center; align-items: center; } .panel_login div{ /* background-color: yellow; */ height: 40px; /* margin-top: 10px; */ /* width: 380px; */ width: 90%; margin-top: 10px; text-align: center; /* margin-left: 60px; */ /* 40*4+10*4=200 */ } .panel_login div:first-child{ /* margin-top: 55px; */ margin-top: 0px; text-align: center; line-height: 40px; /* 行高为容器高则垂直居中 */ font-size: 1.25rem; /* rem/em都是等比缩放单位，参考大小的倍数 */ color: #0f3254; } /* 选择器分类 1. 样式类名选择器 .xxx 2. ID选择器 #xxx 具有唯一性，前提是标签得有ID 3. 标签选择器 div a input ... 4. 组合选择器 .xxx #xxx / .xxx input 5. 伪类选择器 * 选择器可以根据层级进行设定，也可以只作用于某一层级 */ .panel_login div>input{ /* background-color: #0062CC; */ width: 80%; height: 100%; border: none; /* box-shadow: a b c d e f a：水平阴影 *必须 +右 -左 b：垂直阴影 +下 -上 c：模糊半径 >0 d：阴影的距离 >0 e：阴影的颜色 rgba rgb # f：内/外 inset/outset （默认为outset外阴影） */ box-shadow: 0px 0px 0px 2px #0f3254; border-radius: 20px; outline: none; padding: 0 20px; margin: 0 auto; } .panel_login div>button{ height: 100%; width: 140px; border: none; margin: 0 auto; border-radius: 20px; background-color: #0f3254; color: white; } .more{ color: #0062CC; font-size: 12px; line-height: 20px; } /*引入媒体查询，实现响应式*/ @media screen and (max-width:600px) { .panel_login{ /* 重写300px登陆面板 */ width: 280px; } } @media screen and (max-device-width:414px) { .panel_warp{ background-image: url(img/be23061f-f731-424f-a31d-a1251c01770c.jpeg); } } @media screen and (max-device-width:375px) { .panel_warp{ background-image: url(img/GettyImages-551421501-9bf09c276641.jpg); } } @media screen and (max-device-width:320px) { .panel_warp{ background-image: url(img/e6de13a6-480d-4b68-a130-c1637aaaa263.jpeg); } } </style> </head> <body> <!-- 自适应布局 根据浏览器的大小变化而变化的布局容器设计 --> <div class="panel_warp"> <div class="panel_login"> <div> Microsoft 账户 </div> <div> <input type="'text" name="" id="" value="" placeholder="用户名" autocomplete="off" oninput="inputUser(this)"/> </div> <div> <input type="password" name="" id="" value="" placeholder="密码" onchange="onChange(this)" oninput="onInput(this)"/> </div> <div> <button type="button" onclick="javascrpt:login();">登录</button> </div> <div class="more"> 或者使用Apple ID登陆<br />遇到问题？ </div> <!-- <div class="more"> 遇到问题？ </div> --> </div> </div> <script type="text/javascript"> function onChange(t){ console.log('changed'); } function onInput(t){ console.log('Password input:'+document.getElementsByTagName('input')[1].value); } function inputUser(t){ console.log('User input:'+document.getElementsByTagName('input')[0].value); } function login(){ //function to login //declare object: var(all) let(part,作用域里访问，不能跨块) const(part，初始化必须赋值，用于常量) //In terms of security: const>let>var let username = document.getElementsByTagName("input")[0].value; let password = document.getElementsByTagName("input")[1].value; if(username=="" || password==""){ alert("Please input user and password") }else if(username.indexOf("-")>=0 || password.indexOf("-")>=0){ alert("User and password can't contain '-'") }else{ //legel date location.href="day2-2.html"; } } function tourl(num){ } </script> </body> </html>
最终效果如下：
