<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪微博</title>
<link href="../../../img/weibo4.ico" rel="icon">
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
background: url("../../../img/weibobg.png");
}
#container {
position: relative;
width: 1200px;
height: 900px;
margin: auto;
top: 60px;
}
.head {
width: 100%;
height: 50px;
position: fixed;
z-index: 1;
}
.head img {
width: 100%;
}
.left {
position: absolute;
left: 15%;
top: 0;
width: 160px;
height: 710px;
}
.left img {
width: 100%;
height: 100%;
}
.right {
position: absolute;
right: 0;
width: 240px;
height: 710px;
}
.right img {
height: 100%;
width: 100%;
}
.center {
width: 600px;
height: 170px;
position: absolute;
left: 350px;
top: 7px;
}
.center img {
width: 100%;
height: 100%;
}
.banner {
position: absolute;
width: 603px;
height: 42px;
top: 186px;
left: 350px;
}
.banner img {
width: 100%;
height: 100%;
}
.footer {
width: 600px;
height: 500px;
position: absolute;
top: 235px;
left: 350px;
}
.footer img {
width: 100%;
}
#send {
width: 574px;
height: 75px;
position: absolute;
top: 50px;
left: 362px;
outline: none;
border: none;
resize: none; /*不可拉伸*/
}
#btn {
position: absolute;
top: 135px;
left: 859px;
height: 29px;
width: 82px;
border-radius: 2px;
background-color: #ff8140;
border: none;
color: #ffffff;
outline: none;
}
/*padding top right bottom left*/
.info{
width: 600px;
/*height: 130px;*/
background-color: #ffffff;
border-radius: 2px;
position: relative;
margin: 0 0 10px 0 ;/*top right bottom left*/
}
.info_head{
width: inherit;
height: 60px;
position: relative;
}
.news{
position: absolute;
top: 670px;
left: 1170px;
height: 40px;
width: 400px;
}
.news img{
width: 50%;
height: 100%;
}
.text{
display: inline-block;
width: 470px;
position: relative;
left: 80px;
font-size: 13px;
top: -5px;
color: #333333;
word-wrap: break-word;/*自动换行，自适应容器*/
margin-bottom: 3px;
}
.info_footer{
width: inherit;
height: 40px;
position: relative;
}
.info_footer hr{/*hr本身有border=1px，要更改颜色要先把原先的border去掉，再给一个高度，再加一个背景颜色方可实现hr的颜色更改*/
border: none;
height: 1px;
background: #e7e7e7;
}
.info_head_head{
display: inline-block;
width: 50px;
height: 50px;
background: url("../../../img/weibo头像.jpg") no-repeat ;
background-size: 100% 100%;
border-radius: 50%;
position: absolute;
top: 10px;
left: 20px;
}
.info_head_name{
display: inline-block;
width: 150px;
height: 20px;
/*border: 1px solid #333;*/
position: absolute;
top: 16px;
left: 80px;
font-weight: bold;
font-size: 13px;
}
.info_head_time{
display: inline-block;
width: 150px;
height: 20px;
position: absolute;
top: 36px;
left: 80px;
font-size: 11px;
color: #b3b3b3;
}
.info_head_icon{
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
top: 14px;
right: 15px;
background: url("../../../img/arrow_bottom.png") no-repeat;
background-size: 80% 70%;
}
</style>
</head>
<body>
<div class="head">
<img src="../../../img/weibo.png">
</div>
<div id="container">
<div class="left">
<img src="../../../img/weiboleft.png">
</div>
<div class="center">
<img alt="" src="../../../img/weiboinner.png">
</div>
<div class="banner">
<img src="../../../img/weibofoor.png"/>
</div>
<div class="footer">
<img src="../../../img/weibobb.png" style="height: 470px" alt="">
<!-- <div class="info">-->
<!-- <div class="info_head">-->
<!-- <span class="info_head_head"></span>-->
<!-- <span class="info_head_name">Hello_hongbin</span>-->
<!-- <span class="info_head_time">1秒前 来自 微博 weibo.com</span>-->
<!-- <span class="info_head_icon"></span>-->
<!-- </div>-->
<!-- <span class="text">text</span>-->
<!-- <div class="info_footer"><hr>-->
<!-- <img src="../../../img/info_footer.png" alt="make sure文件地址是否正确">-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="right">
<img src="../../../img/nweiboright.png">
</div>
<div class="news">
<img src="../../../img/news.png" alt="">
</div>
<textarea id="send"></textarea>
<button id="btn">发布</button>
</div>
<script>
$(function () {
$('#btn').on('click', function () {
let val = $('#send').val();
let send = $('<div class="info">\n' +
' <div class="info_head">\n' +
' <span class="info_head_head"></span>\n' +
' <span class="info_head_name">Hello_hongbin</span>\n' +
' <span class="info_head_time">1秒前 来自 微博 weibo.com</span>\n' +
' <span class="info_head_icon"></span>\n' +
' </div>\n' +
' <span class="text">'+val+'</span>\n' +
' <div class="info_footer"><hr>\n' +
' <img src="../../../img/info_footer.png" alt="make sure文件地址是否正确">\n' +
' </div>\n' +
' </div>');
send.prependTo(".footer");
});
})
</script>
</body>
</html>
