abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博输入字数（1）</title> &nbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博输入字数（1）</title>
<!-- 引入线上layuicss文件 -->
<link rel="stylesheet" type="text/css" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">
<style type='text/css'>
body {
background: rgb(233, 232, 232);
}
.clear {
clear: both;
}
/* 盒子 */
.wrap {
background: #fff;
width: 580px;
height: 140px;
padding: 10px;
padding-top: 15px;
margin: 10px auto;
font-size: 12px;
border-radius: 5px;
}
/* 头部 左 */
.header_left {
color: #7f5333;
font-size: 18px;
font-family: '华文新魏';
float: left;
}
/* 头部 右 */
.header_right {
float: right;
}
/* 头部 右 a标签 */
.header_right a {
margin-left: 10px;
color: #eb7350;
text-decoration: none;
}
/* 主体*/
.content {
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
margin-top: 4px;
}
/* 主体 文本域 */
.content textarea {
height: 68px;
width: 568px;
resize: none;
border: 0;
outline: none;
font-size: 14px;
color: #333;
}
/* 底部 */
.footer {
width: 580px;
height: 35px;
}
/* 底部 a标签 悬停样式 */
.footer a:hover {
color: #eb7350;
cursor: pointer;
}
/* 底部 左 */
.footer_left {
width: 380px;
height: 25px;
line-height: 25px;
padding-top: 10px;
float: left;
}
/* 底部 左 a标签 样式 */
.footer_left a {
color: #333;
text-decoration: none;
margin-right: 15px;
}
/* 底部 左 i标签 样式 */
.footer_left a i {
font-size: 18px;
font-weight: 600;
margin-right: 5px;
}
/* 更多 样式 */
.ii {
color: #7C6E78;
font-size: 18px;
position: relative;
}
/* 更多 二级 */
.ii ul {
display: none;
position: absolute;
left: -10px;
color: #333;
font-size: 12px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
border-radius: 3px;
width: 76px;
padding: 2px;
line-height: 20px;
}
/* 更多 二级 li样式 */
.ii ul li {
height: 20px;
padding: 8px 10px;
}
/* 更多 二级 li 悬停样式 */
.ii ul li:hover {
background: #f2f2f5;
color: #eb7350;
}
/* 更多 悬停样式 */
.ii:hover {
cursor: pointer;
color: #eb7350;
}
/* 底部 右 */
.footer_right {
float: right;
padding-top: 7px;
height: 28px;
line-height: 28px;
text-align: center;
}
/* 底部 右 a */
.footer_right a {
display: inline-block;
height: 28px;
line-height: 28px;
margin-right: 15px;
position: relative;
}
/* 状态 二级 */
#subnav2 ul {
display: none;
position: absolute;
right: 0px;
color: #333;
font-size: 12px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
border-radius: 3px;
width: 105px;
line-height: 15px;
padding: 2px;
}
/* 状态 二级 li样式 */
#subnav2 ul li {
height: 15px;
padding: 8px 10px;
}
/* 状态 二级 最后一个li设置上边框 */
#subnav2 ul li:nth-last-child(1) {
border-top: 1px solid #d9d9d9;
}
/* 发布按钮样式 */
.footer_right a:nth-child(2) {
width: 60px;
height: 28px;
padding: 0px 10px;
/* border: 1px solid #f77c3d; */
/* background: #ff8140; */
background: #ffc09f;
color: #fff;
font-size: 14px;
margin: 0;
}
/* 发布按钮悬停样式 */
/* .footer_right a:nth-child(2):hover{
background:#f7671d;
} */
</style>
<script type='text/javascript'>
// 文档完全加载完后执行
window.onload = function () {
// 整个文档添加点击事件 传入参数
window.onclick = function (nav) {
// 如果参数的id是subnav1 显示 否则隐藏
if (nav.path[0].id === 'subnav1') {
nav.path[0].children[0].style.display = 'block';
} else {
document.getElementById('subnav1').querySelector('ul').style.display = 'none';
}
// 如果参数的id是subnav2 显示 否则隐藏
if (nav.path[1].id === 'subnav2') {
nav.path[1].querySelector('ul').style.display = 'block';
} else {
document.getElementById('subnav2').querySelector('ul').style.display = 'none';
}
//如果参数的标签名是文本域 改变父级的边框 否则还原
if(nav.path[0].tagName === 'textarea' || nav.path[0].tagName === 'TEXTAREA'){
nav.path[0].parentNode.style.border = '1px solid #fa7d3c';
}else{
document.getElementsByTagName('textarea')[0].parentNode.style.border = '1px solid #ccc';
}
};
// 获取subnav2下所有的li
var li_arr = document.getElementById('subnav2').querySelectorAll('li');
// 循环绑定事件
for (var i = 0; i < li_arr.length; i++) {
(function (i) {
// 绑定鼠标移入事件
li_arr[i].onmouseover = function () {
// 设置当前li的样式
this.style.cssText = 'background:#f2f2f5;color:#eb7350;';
// 循环其他的li 去掉其他li的样式
for (var j = 0; j < li_arr.length; j++) {
var ci = li_arr[i];
if (li_arr[j] != this) {
li_arr[j].style = '';
}
}
}
// 绑定点击事件
li_arr[i].onclick = function(){
//修改文本
document.getElementById('subnav2').querySelector('span').innerText = this.innerText;
if(this.innerText === '好友圈'){
document.getElementById('submit').innerText = '好友发布';
}else{
document.getElementById('submit').innerText = '发布';
}
};
}(i));
};
}
</script>
</head>
<body>
<!-- 盒子 -->
<div class='wrap'>
<!-- 头部 -->
<div class='header'>
<!-- 头部 左 -->
<div class='header_left'>
<em>有什么新鲜事想告诉大家？</em>
</div>
<!-- 头部 右 -->
<div class='header_right'>
<a href="">快来晒晒我家的年味儿,记录红火团员的中国年>></a><a href="">热门微博</a>
</div>
</div>
<div class='clear'></div>
<!-- 主体 -->
<div class='content'>
<!-- 文本域 -->
<textarea></textarea>
</div>
<!-- 底部 -->
<div class='footer'>
<!-- 底部 左 -->
<div class='footer_left'>
<a href=""><i class='layui-icon' style='color:#FFA405;'></i>表情</a>
<a href=""><i class='layui-icon' style='color:#84C002;'></i>图片</a>
<a href=""><i class='layui-icon' style='color:#54A8E5;'></i>视频</a>
<a href=""><i class='layui-icon' style='color:#5A8CE6;'>#</i>话题</a>
<a href=""><i class='layui-icon' style='color:#FF8200;'></i>头条文章</a>
<a id='subnav1' class='layui-icon ii'>
<!-- 更多 二级 -->
<ul>
<li>直播</li>
<li>点评</li>
<li>定时发</li>
<li>音乐</li>
<li>微公益</li>
<li>新鲜事</li>
<li>超话</li>
</ul>
</a>
</div>
<!-- 底部 右 -->
<div class='footer_right'>
<a id='subnav2'><span>公开</span><i class='layui-icon' style='font-size:12px;margin-left:5px;'></i>
<!-- 状态 二级 -->
<ul>
<li>公开</li>
<li>好友圈</li>
<li>仅自己可见</li>
<li>群可见</li>
</ul>
</a>
<!-- 发布 -->
<a href="" id='submit'>发布</a>
</div>
</div>
</div>
</body>
</html>
