阿里百秀模仿（基于bootstrap框架）

最新推荐文章于 2024-08-10 21:02:05 发布

rezc404

最新推荐文章于 2024-08-10 21:02:05 发布

阅读量222

点赞数

分类专栏：前端前端项目文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_34290436/article/details/125294768

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端项目

1 篇文章 0 订阅

订阅专栏

阿里百秀模仿（基于bootstrap框架）

导入bootstrap框架，Normalize.css和jquery.js
创建html与css

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/Normalize.css">
    <link rel="stylesheet" href="css/ali.css">

    <script src="js/jquery-1.12.4.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

</head>
<body>
<div class="container">
    <div class="row">
        <nav class="col-md-2 col-sm-2" id="left">
            <div class="logo">
                <a href="#">
                    <img src="images/ali/logo.png" alt="" class="hidden-xs">
                    <img src="images/ali/logo2.png" alt="" class="visible-xs">
                </a>
            </div>
            <ul class="nav">
                <li class="glyphicon glyphicon-asterisk">新闻</li>
                <li class="glyphicon glyphicon-asterisk">生活</li>
                <li class="glyphicon glyphicon-asterisk">自然</li>
                <li class="glyphicon glyphicon-asterisk">科技</li>
                <li class="glyphicon glyphicon-asterisk">奇趣</li>
                <li class="glyphicon glyphicon-asterisk">美食</li>
            </ul>
        </nav>
        <article class="col-md-7 col-sm-10">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/ali/banner.jpg">
                        <span>同步赞百科营销服务正式发布</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/ali/banner.jpg">
                        <span class="text-muted">奇了 成都一小区护卫长得像马云 市民纷纷求合影</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/ali/banner.jpg">
                        <span class="text-muted">震惊！巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/ali/banner.jpg">
                        <span class="text-muted">另类教育！外国老爸怒传女儿不雅照到Facebook</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/ali/banner.jpg">
                        <span class="text-muted">同步赞百科营销服务正式发布</span>
                    </a>
                </li>
            </ul>
        </article>
        <aside class="col-md-3 visible-lg">
            <div><a href="#"><img src="images/ali/zgboke.jpg"></a></div>
            <div class="hot">
                <p class="btn btn-danger">热搜</p>
                <h4 class="text-danger">欢迎加入中国博客联盟</h4>
                <p class="text-success">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
            </div>
        </aside>
    </div>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 600px;
    max-width: 1080px;
}

ul {
    list-style: none;
}

.logo {
    width: 100%;
    height: 120px;
    background-color: #aeb0b2;
}

.logo img {
    background-color: #de1e1e;
    width: 100%;
    height: 100%;
}

.nav {
    width: 100%;
    border: 1px solid #cccccc;
}

.nav li {
    width: 100%;
    height: 50px;
    background-color: #cccccc;
    line-height: 50px;
    padding-left: 20px;
}

/*伪元素*/
.nav li::before {
    padding-right: 5px;
    vertical-align: middle;
}

.nav li:hover {
    background-color: #fff;
    border: 1px solid #cccccc;
}

article ul {
    margin-top: 10px;
    height: 266px;
}

article ul li {
    width: 25%;
    float: left;
    height: 128px;
    padding: 10px 10px 0px 0px;
    margin-top: 10px;

}

article ul li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

article ul li img {
    width: 100%;
}

article ul li:nth-child(1) {
    width: 50%;
    height: 266px;
}

article ul li span {
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 50px;
    background-color: #eee;
    padding-left: 5px;
    font-size: 12px;
}

aside div {
    width: 100%;
}

aside div img {
    margin-top: 30px;
    width: 100%;
}

aside .hot {
    margin-top: 20px;
    border: 1px solid #cccccc;
    width: 100%;
    height: 136px;

}

aside .hot p:nth-child(1) {
    border-radius: 0;
    font-size: 12px;
    margin-left: 20px;
}

aside .hot h4 {
    width: 100%;
    text-align: center !important;
}

aside .hot p:nth-child(3) {
    font-size: 12px;
    padding: 0 5px;
}

/*超小屏*/
@media screen and (max-width: 767px) {
    .nav li {
        float: left;
        width: 13.333%;
    }

    .logo {
        height: 50px;
        text-align: center;
        line-height: 50px;
    }

    .logo a {
        width: 100px;
        height: 50px;
    }

    .logo img {
        display: block;
        width: 100%;
        height: 100%;
    }
}