实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/layui/css/layui.css">
<!-- <link rel="stylesheet" href="static/css/index.css"> -->
<link rel="icon" href="static/images/logo.png">
<style>
*{margin: 0;
padding: 0;
}
.mc{ margin: 0 auto}
.l{float: left;}
.r{float: right;}
.mr{margin-right: 10px;}
.br{border-radius: 3px;}
.clear{clear: both;}
body{background: #0D3B6C}
.box{background: url(/static/images/bg.jpg)no-repeat top center;padding-top: 53px;}
nav{background: rgba(255, 255, 255, 0.9);
position: fixed;
top: 0;
width: 100%;
border-top: 2px solid #ff6500;
line-height: 50px;
}
.header{
width: 65%;
}
/* 左侧 */
.nav_l form{
width: 450px;
margin-left: 35px;
position: relative;
}
.nav_l form input{
width: 435px;
height: 27px;
padding-left: 15px;
}
nav .layui-icon-search{
position: absolute;
right: 10px;
top: 0;
}
/* 让页面所有的小图标都获得此效果 */
nav .layui-icon{
font-size: 18px;
font-weight: bold;
}
.nav_r a{
margin-right: 15px;
position: relative;
}
.nav_r a:hover{
color: #ff6500;
}
/* 小红点 */
.icon{
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff6500;
}
/* 通过浮动，转化成块级元素 */
.a_span{
position: absolute;
top: -7px;
right: -10px;
}
/* 信封 */
.msg{font-size: 12px;
background: #ff6500;
width: 20px;
height: 15px;
line-height:15px;
text-align: center;
color: white;
}
/* 主题内容 */
.content{
height: 700px;
width: 53%;
padding-top: 20px;
background: rgba(6, 50, 98, 0.5)
}
.content_l{width: 73%;}
.content_r{width: 24%;}
/* 主题侧边导航 */
.content_nav{
width: 20%;
}
/* 只让其控制nav下的a标签大小 */
.content_nav >a{
font-size: 14px;
font-weight: bold;
}
.content_nav a{
display: block;
line-height: 35px;
padding-left: 10px;
color: #fff;
position: relative;
}
.content_nav a:hover{background: rgba(255, 255, 255, 0.3)}
/* 把细线给个格式 */
hr{
margin:10px 0;
background: rgba(255, 255, 255, 0.3);
}
.c_span{
position: absolute;
top: 10px;
right: 5px;
}
#va{
width: 35px;
height: 18px;
line-height: 18px;
background: rgba(255, 255, 255, 0.3);
text-align: center;
position: relative;
margin: 0 auto;
padding: 0;
}
#va span{position: absolute;top: 0;right: 0;}
.content_msg{
width: 80%;
}
.content_msg .text{padding:10px;background: rgba(7, 26, 55, 0.8);}
.content_msg p{color:#fff;line-height: 30px;}
.content_msg textarea{
width: 100%;
border: 1px solid #40649D;
height: 90px;
background: #0c2343;
color: rgba(255, 255, 255, 0.3);
resize: none;
}
.content_msg p span{
margin-right: 8px;
}
#but{
width: 90px;
height: 35px;
}
</style>
<title>新浪微博</title>
</head>
<body>
<div class="box">
<nav>
<div class="header mc">
<!-- 左侧 -->
<div class="nav_l">
<a href="" class="l"> <img src="./static/images/WB_logo.png" alt=""></a>
<form class="l">
<input type="text" placeholder="大家正在搜：为什么程序猿容易秃">
<i class="layui-icon layui-icon-search"></i>
</form>
</div>
<!-- 右侧 -->
<div class="nav_r r">
<a href="" style="color:#ff6500;"><i class="layui-icon layui-icon-home"></i>首页</a>
<a href=""><i class="layui-icon layui-icon-video"></i>视频
<!-- 小红点 -->
<span class="icon a_span"></span>
</a>
<a href=""><i class="layui-icon layui-icon-add-circle-fine"></i>发现</a>
<a href=""><i class="layui-icon layui-icon-theme"></i>游戏</a>
<a href=""><i class="layui-icon layui-icon-user"></i>李大大</a>
<a href=""><i class="layui-icon layui-icon-more-vertical"></i></a>
<a href=""><i class="layui-icon layui-icon-chat"></i>
<!-- 信封 -->
<span class="msg a_span">36</span>
</a>
<a href=""><i class="layui-icon layui-icon-set"></i></a>
<a href="" style="color:#ff6500;"><i class="layui-icon layui-icon-survey"></i></a>
<div class="clear"></div>
</div>
</div>
</nav>
<!-- 主题内容 -->
<div class="content mc">
<div class="l mr content_l" >
<div class="l content_nav">
<a href="">首页
<span class="icon c_span"></span>
</a>
<a href="">我的收藏</a>
<a href="">我的赞</a>
<hr>
<small><a href=""><i class="layui-icon layui-icon-tree"></i>热门微博
<span class="icon c_span"></span>
</a></small>
<small><a href=""><i class="layui-icon layui-icon-video"></i>热门视频</a></small>
<hr>
<small><a href=""><i class="layui-icon layui-icon-star"></i>好友圈</a></small>
<small><a href=""><i class="layui-icon layui-rate-solid"></i>特别关注</a></small>
<small><a href=""><i class="layui-icon layui-icon-note"></i>v+微博</a></small>
<small><a href=""><i class="layui-icon layui-icon-camera"></i>美图摄影</a></small>
<small><a href=""><i class="layui-icon layui-icon-circle"></i>同事</a></small>
<small><a href=""><i class="layui-icon layui-icon-circle"></i>同学</a></small>
<small><a href=""><i class="layui-icon layui-icon-circle"></i>名人明星</a></small>
<small><a href=""><i class="layui-icon layui-icon-circle"></i>搞笑</a></small>
<small><a href="" id="va" class="br">展开
<span class="icon c_span"></span>
</a></small>
</div>
<div class="l content_msg">
<div class="text">
<p>
<b>有什么新鲜事告诉大家？</b>
<small class="r">因春节要参加聚会，女子租个2万的包回老家>> 热门微博</small>
</p>
<textarea class="br"></textarea>
<p>
<span><i class="layui-icon layui-icon-face-smile-b" style="color:#fed901;"></i>表情</span>
<span><i class="layui-icon layui-icon-video" style="color:#55e30f;"></i>视频</span>
<span><i style="color:#55e30f;">#</i>话题</span>
<span><i class="layui-icon layui-icon-chart" style="color:#ff6500;"></i>头条文章</span>
<span><i class="layui-icon layui-icon-more"></i></span>
<button id="but" class="layui-btn layui-btn-warm r">发布</button>
<span class="r">公布<i class="layui-icon layui-icon-down"></i></span>
</p>
</div>
</div>
</div>
<div class="l mr content_r" style="width:24%;height:500px;background: white;"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
