888666阿里佰秀

最新推荐文章于 2024-07-11 15:29:37 发布

哥的寂寞你难懂

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量218

点赞数

文章标签： servlet 前端 html

本文链接：https://blog.csdn.net/weixin_57993399/article/details/126896806

版权

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>媒体查询</title>
    <!-- 引入bootstarp样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="container">
    <header class="col-md-2">
        <div class="logo">
            <a href="index.html" title="阿里百秀">
                <img src="images/阿里logo.png" class="hidden-xs">
                <span class="visible-xs">阿里百秀</span>
            </a>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#" class="glyphicon glyphicon-camera">生活区</a></li>
                <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
                <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
                <li><a href="#" class="glyphicon glyphicon-filter">美食杰</a></li>
            </ul>
        </div>
    </header>

    <active>
        <div class="news clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/阿里第一.jpg" alt="">
                        <p>同步赞百科营销服务正式发布</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/阿里.jpg" alt="">
                        <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/阿里2.jpeg" alt="">
                        <p>震惊！巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/阿里3.jpeg" alt="">
                        <p>另类教育！外国老爸怒传女儿不雅照到Facebook</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/阿里4.jpeg" alt="">
                        <p>竹子真的是大熊猫最爱吗？NO，国宝也吃肉</p>
                    </a>
                </li>
            </ul>
        </div>

        <div class="publish">
            <!-- 排行 -->
            <div class="pai">
                <h3>
                    <span>一周热门排行</span>
                </h3>
                <ul>
                    <li>暂无文章!</li>
                </ul>
            </div>
            <!-- 推荐 -->
            <div class="tui">
                <h3>
                    <span>热门推荐</span>
                </h3>
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/推1.jpg" alt=""> 自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/推2.jpg" alt=""> 鑫网传媒与万林在线战略合作仪式暨股东签约仪式在深
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/阿里.jpg" alt=""> 奇了 成都一小区护卫长得像马云 市民纷纷求合影
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/推4.jpg" alt=""> 世界真美 令人惊叹 卫星拍地球风景地貌
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 发布 -->
            <div class="fa">
                <h3>
                    <span>最新发布</span>
                    <em>24小时更新：0篇 &nbsp; 一周更新：0篇</em>
                </h3>
                <article>
                    <a href="#">
                        <h3> 鑫网传媒与万林在线战略合作仪式暨股东签约仪式在深举办</h3>
                        <p class="text-muted hidden-xs">发布于 2021-04-08 来源：中国网</p>
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="images/推2.jpg" class="hidden-xs" alt="">
                            </div>
                            <div class="col-sm-9">
                                <p class=" hidden-xs"></p>

                    </a>
                    <span>阅读量</span>
                    <a href="#" class="glyphicon glyphicon-thumbs-up">点赞数</a>

            </div>

            </article>

            <article>
                <a href="#">
                    <h3> 自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</h3>
                    <p class="text-muted hidden-xs">发布于 2021-04-08 来源：中国网</p>
                    <div class="row">
                        <div class="col-sm-3">
                            <img src="images/推1.jpg" class="hidden-xs" alt="">
                        </div>
                        <div class="col-sm-9">
                            <p class=" hidden-xs"></p>

                </a>
                <span>阅读量</span>
                <a href="#" class="glyphicon glyphicon-thumbs-up">点赞数</a>
        </div>
        </div>
        </article>
        <article>
            <a href="#">
                <h3> 神奇！可办公可拍照的智能戒指</h3>
                <p class="text-muted  hidden-xs">发布于 2021-04-08 来源：中国网</p>
                <div class="row">
                    <div class="col-sm-3">
                        <img src="images/推1.jpg" class=" hidden-xs" alt="">
                    </div>
                    <div class="col-sm-9">
                        <p class=" hidden-xs">
                        </p>
            </a>
            <span>阅读量</span>
            <a href="#" class="glyphicon glyphicon-thumbs-up">点赞数</a>
            </div>
            </div>
        </article>
        <article>
            <a href="#">
                <h3> 竹子真的是大熊猫最爱吗？NO，国宝也吃肉</h3>
                <p class="text-muted  hidden-xs">发布于 2021-04-08 来源：中国网</p>
                <div class="row">
                    <div class="col-sm-3">
                        <img src="images/阿里4.jpg" class=" hidden-xs" alt="">
                    </div>
                    <div class="col-sm-9">
                        <p class=" hidden-xs">
                        </p>
            </a>
            <span>阅读量</span>
            <a href="#" class="glyphicon glyphicon-thumbs-up">点赞数</a>
            </div>
            </div>
        </article>
        </div>
        </div>
    </active>


    <aside class="col-md-3">
        <div class="meng">
            <img src="images/zgboke.jpg" alt="">
        </div>
        <div class="hotfind">
            <a href="#">
                <div class="re">热搜</div>
                <h3>欢迎加入中国博客联盟</h3>
                <p>您好，欢迎来到中国博客联盟！这里只收录优秀独立博客这里只收录优秀独立博客，纯手工审核机制！</p>
            </a>
        </div>
        <div class="newest">
            <h3><span>最新文章</span></h3>
            <article>
                <a href="#">
                    <img src="images/推1.jpg" alt="">
                    <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</p>
                    <span>阅读（66）</span>
                </a>
            </article>
            <article>
                <a href="#">
                    <img src="images/推2.jpg" alt="">
                    <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</p>
                    <span>阅读（66）</span>
                </a>
            </article>
            <article>
                <a href="#">
                    <img src="images/推3.jpg" alt="">
                    <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</p>
                    <span>阅读（66）</span>
                </a>
            </article>
            <article>
                <a href="#">
                    <img src="images/推4.jpg" alt="">
                    <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</p>
                    <span>阅读（66）</span>
                </a>
            </article>
            <article>
                <a href="#">
                    <img src="images/阿里2.jpeg" alt="">
                    <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</p>
                    <span>阅读（66）</span>
                </a>
            </article>
            <article>
                <a href="#">
                    <img src="images/阿里3.jpeg" alt="">
                    <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务</p>
                    <span>阅读（66）</span>
                </a>
            </article>
        </div>
    </aside>

</section>
</body>
</html>

CSS：

/* 利用媒体查询，修改.container的最大宽度为1280px（根据美工的需求） */

@media screen and (min-width:1280px) {
    .container {
        width: 1280px;
    }
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #666;
    text-decoration: none;
}
header {
    padding-left: 0!important;
    /* 去掉左内边距，header的权重比媒体查询小，无法去除，因此加个!important */
}

header .logo {
    background-color: #429ad9;
}

header .logo img {
    /* 当屏幕缩小时有部分图片会被裁剪，显示不全，因此让img的大小为100% */
    /* 下面是响应式布局 */
    /* 1.图片尺寸太大，设置最大宽度可以缩小图片大小 */
    display: block;
    max-width: 100%;
    /* 2.把img转换为块级元素，用margin居中 */
    margin: 0 auto;
}


/* 响应式布局：当屏幕超小时图片隐藏，事先准备好的span文本显示 */

header .logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

header .nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

header .nav ul li a {
    /* 别忘了加display: block;转为块级元素 */
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    padding-left: 30px;
}

header .nav ul li a:hover {
    background-color: #fff;
    color: #333;
}

header .nav ul li a::before {
    vertical-align: middle;
    padding-right: 5px;
}

active .news {
    margin: 15px 0 10px;
}

active .news li {
    float: left;
    width: 25%;
    height: 133px;
    padding: 0 10px 10px 0;
    /* 设置内边距，把li挤小，留出空白部位 */
}

active .news li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

active .news ul li img {
    width: 100%;
    height: 100%;
}

active .news ul li p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 41px;
    margin-bottom: 0;
    /* 消除p的下边距，使p贴合li下边 */
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 12px;
    transition: all .3s;
}

active .news ul li a:hover p {
    background-color: rgb(253, 120, 120);
}

active .news ul li:first-child {
    width: 50%;
    height: 266px;
}

active .news ul li:first-child p {
    line-height: 41px;
    font-size: 20px;
    padding-top: 0;
}

active .publish h3 {
    margin: 0;
    border-bottom: 1px solid #ccc;
}

active .publish h3 span {
    border-bottom: 2px solid rgb(243, 116, 116);
}

active .publish .pai ul {
    padding: 20px 0 0;
    margin: 0 0 20px;
}

active .publish .tui ul {
    padding: 15px 0 0;
}

active .publish .tui ul li {
    width: 25%;
    float: left;
    margin-bottom: 20px;
    height: 175px;
    overflow: hidden;
}

active .publish .tui ul li:hover a {
    color: orange;
}

active .publish .tui ul li a {
    display: block;
    margin-right: 10px;
    /* position: relative; */
    color: #666;
}

active .publish .tui ul li img {
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
    height: 132px;
}

active .publish .fa h3 em {
    float: right;
    font-style: normal;
    line-height: 25px;
    font-size: 14px;
    color: #555;
}

active .publish .fa article {
    padding: 25px 0;
    border-bottom: 1px solid #ccc;
}

active .publish .fa article h3 {
    margin-bottom: 10px;
    border: 0;
}

active .publish .fa article div {
    margin: 0;
    padding: 0;
}


/* 多行文本溢出省略号显示 */

active .publish .fa article .col-sm-9 p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

active .publish .fa article .col-sm-9 span,
active .publish .fa article .col-sm-9 a {
    margin: 0 20px 0 0;
    font-size: 12px;
}

active .publish .fa article .col-sm-9 a::before {
    vertical-align: middle;
    padding-right: 5px;
}


aside .meng {
    margin: 15px 0;
}

aside .meng img {
    width: 100%;
    height: 100%;
}

aside .hotfind {
    position: relative;
    width: 100%;
    height: 145px;
    padding: 0 20px;
    border: 1px solid #ccc;
}

aside .hotfind:hover {
    border: 1px solid rgb(255, 53, 53);
}

aside .hotfind .re {
    position: absolute;
    top: 0;
    left: 20px;
    width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 15px;
    background-color: rgb(255, 53, 53);
    color: #fff;
}

aside .hotfind h3 {
    margin-top: 50px;
    color: rgb(255, 53, 53);
}

aside .hotfind p {
    color: #555;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

aside .newest h3 {
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
}

aside .newest h3 span {
    border-bottom: 2px solid rgb(255, 53, 53);
}

aside .newest article a {
    display: block;
    width: 100%;
    height: 80px;
    padding-top: 10px;
    color: black;
    border-bottom: 1px solid #ccc;
}

aside .newest article a p {
    margin-bottom: 0;
}

aside .newest article a:hover p {
    color: rgb(255, 53, 53);
}

aside .newest article a:hover {
    background-color: rgb(223, 219, 219);
}

aside .newest article a span {
    font-size: 12px;
    color: #555;
}

aside .newest article a img {
    display: block;
    float: right;
    width: 80px;
    height: 60px;
}