小编Sum*_*tel的帖子

Dropzone.autoDiscover = false;
				$("#mydropzone").dropzone({
					//url: "/file/post",
					addRemoveLinks: true,
					maxFilesize: 0.5,
					dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',
					dictResponseError: 'Error uploading file!'
				});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>

<div class="clsbox-1" runat="server"  >
		<div class="dropzone clsbox" id="mydropzone">

		</div>
	</div>

    $('.social').click(function(){
        $('.social-icons').toggle("slide");
    });

    .social {
        display: inline-block;
        height: 47px;
        color: #58585b;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 47px;
        padding: 0px 20px;
        border: 1px solid rgba(88,88,91,0.5);
        transition:width .2s ease;
        -webkit- transition:width .2s ease;
    }

    .social-icons {
        display: inline-block;
        height: 47px;
        color: #58585b;
        font-family: "freight-text-pro",sans-serif;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 47px;
        padding: 0px 20px;
        border: 1px solid rgba(88,88,91,0.5);
        margin-left: -5px;
        display:none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
    <a>SHARE</a>
    </div>
    <div class="social-icons">
    <a>FB</a>
    <a>TW</a>
    <a>G+</a>
    <a>WS</a>
    </div>

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}

<div>
  <div class="clicker" tabindex="1">Click me</div>
  <div class="hiddendiv"></div>
</div>

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
}

<div class='componentWrapper'>Text inside div </div>

function ellipsizeTextBox(id) {
  var el = document.getElementById(id);
  var wordArray = el.innerHTML.split(' ');
  while (el.scrollHeight > el.offsetHeight) {
    wordArray.pop();
    el.innerHTML = wordArray.join(' ') + '...';
  }
}
ellipsizeTextBox('overflowedDiv');

.overflowedDiv {
  height: 60px;
  width: 400px;
  display: inline-block;
  vertical-align: top
}

<div id="overflowedDiv">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute …

$(".showDesc").click(function () {
    $(".descContainer").toggleClass("show");
});

.descContainer {
    position: relative;
    padding: 24px 40px 24px 24px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: none;
    line-height: 24px;
    background-color: #fdfdfd;
}

.descContainer.show {
    position: relative;
    padding: 24px 40px 24px 24px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: block;
    line-height: 24px;
    background-color: #fdfdfd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">

<div class="feedContainer">

<div class="feedContent">

<h3>Title</h3>


<div class="feedButtonContainer">
</div>


<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>

</div>

</div>

<div …

    *{
    	margin: 0;
    	padding: 0;
    }
    
    .container{
    	height: 638px;
    	width: 100%;
    	max-width: 100%;
    	position: absolute;
    	overflow: hidden;
    	background-position: center;
    	top: 0;
    	z-index: -1;
    }
    
    .container img{
    	width: 100%;
    	height: 638px;
    }
    
    .container #short-des{
    	background: rgba(0,0,0,.5);
    	height: 400px;
    	width: 500px;
    	position: relative; 
    }

    	<div class="container">
    	<img src="cover.jpg">
    	<div id="short-des">
    	
    </div>
    </div>