1、任何一个容器都可以指定为Flex布局。
2、设为Flex布局以后,子元素的float、clear和vertical-align属性都将失效。
3、<link rel="stylesheet" type="text/css" href="css/index.css" />
4、清理默认li样式: list-style:none;
显示块级元素: display:block;
清理左右浮动: clear:both;
左浮动: float:left;
置鼠标移入添加红色边框: hover
设置li边框为圆角15px: border:radius:14px;
文字对齐方式为居中: text-align:center;
隐藏溢出: overflow: hidden;
设置图片的过渡效果为0.8秒: transition:0.8s;
置内边距上下为0,左右为15px: padding:0 15px;
设置行高140px: line-heigth:140px;
下边框样式: border-bottom-style:
设置文字的过渡效果为0.8秒: transition:0.8s;
CSS3的实现鼠标经过图片旋转360度,放大1.3倍,离开再旋转还原: rotate(360deg) scale(1.3)
<label><span>*</span>电子邮箱:</label> <input type="text" name="email" placeholder="输入正确的电子邮箱地址" id="email">
根据表单控件user的id填写: var username = document.getElementById("username");
通过id获取元素 : var email = document.getElementById("email");
通过标签名获取元素: var form = document.getElementByTagName("form")[0];
表单提交: form.onsubmit= function ()
使用自定义方法验证用户名、验证邮箱: if (validate_strLenght(username.value) &&validate_ email(email.value) && validate_pwd(pwd.value) && checkOk())
控制台输出: console.log("验证失败")
密码框失去焦点的时候:
pwd.onblur= function () {
if (validate_pwd(pwd.value)) {
console.log("密码符合要求")
} else {
console.log("密码不符合要求")
}
固定定位: position:fixed;
实现flex布局: display:flex;
主轴对齐方式是两端对齐: justify-content:space-between;
被点击a的上一个div元素样式设置为block,其余项目的div的隐藏:
$(this).prev().stop().css("display", "block").parent().siblings()
.children(".layout-submenu").stop(). css("display", "none");
})
$(document).click(function () {
//点击页面的任意地方,二级菜单全部取消
$(".box ul li").find("div"). css("display", "block");