Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    a{
        text-decoration: none;
    }
    .book-layout{
        display: block;
        max-width: 446px;
        padding: 5px 0;
        border-bottom: 1px solid #eee;
        color: inherit;
        overflow: hidden;
    }
    .book-cover{
        width: 80px;
        height: 107px;
        float: left;
        margin-right: 9px;
        margin-top: 5px;
    }
    /* 和html中的“hidefocus="true"”都是为了消除area标签点击时的边框问题 */
    area{
        outline: none;
    }
    area:-webkit-any-link{
        cursor: pointer;
    }
    .book-cell{
        overflow: hidden;
    }
    .book-title{
        margin: 0;
            float: left;
            position: relative;
​
    }
    .area{
        position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
    }
    .book-title-r{
            float: right;
            color: #969ba3;
    }
    .book-meta{
            margin: 24px 0;
            color: #969ba3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
    }
    .book-metas{
        margin-top: -20px;
        font-size: 13px;
    }
    .book-meta-r{
        float: right;
    }
  </style>
</head>
<body>
<a href="https://www.nyist.edu.cn/" class="book-layout" target="_blank">
    <img src="https://img-blog.csdnimg.cn/20201117100704942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjI0ODc4,size_16,color_FFFFFF,t_70#pic_center" class="book-cover" alt="南阳理工学院" usemap="#bookCover">
    <map id="bookCover" name="bookCover">
        <area hidefocus="true" shape="rect" coords="0,5,80,107" href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C4%CF%D1%F4%C0%ED%B9%A4&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000" alt="南阳理工学院" target="_blank">
    </map>
    <div class="book-cell">
        <div class="book-title-x">
            <h4 class="book-title">
                <area class="area" href="https://baike.baidu.com/item/%E5%8D%97%E9%98%B3%E7%90%86%E5%B7%A5%E5%AD%A6%E9%99%A2/249491?fromtitle=%E5%8D%97%E9%98%B3%E7%90%86%E5%B7%A5&fromid=1973960&fr=aladdin" target="_blank">
                南阳理工学院
            </h4>
            <div class="book-title-r">去这里</div>
        </div>
        <div class="book-meta">南阳日报:南阳理工学院土木工程学院 脚踏实... 南阳日报:南阳理工学院数字媒体与艺术设计... 南阳日报:南阳理工学院智能制造学院 工程师... 南阳日报:南阳理工学院...</div>
        <div class="book-metas">
            <time class="book-meta-r">1天前</time>已有 3k+ 人表示认可
        </div>
    </div>
</a>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chd1058pro
0viewers