bootstrap案例3

最新推荐文章于 2025-06-28 12:04:44 发布

原创最新推荐文章于 2025-06-28 12:04:44 发布 · 359 阅读

CC 4.0 BY-SA版权

1.html文件0-homework.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/0-homework.css"/>
</head>
<body>
    <div class="container">
        <div class="top clear">
            <ul>
                <li><a href="#" class="first">Bootstrap中文网</a></li>
                <li><a href="#">起步</a></li>
                <li><a href="#">全局CSS样式</a></li>
                <li><a href="#">组件</a></li>
                <li><a href="#">Javascript插件</a></li>
                <li><a href="#">定制</a></li>
            </ul>
        </div>
        <div class="middle">
            <h1>Bootstrap</h1>
            <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
            <a href="#" class="btn1">Bootstrap4中文文档（v4.0.0）</a>
            <a href="#" class="btn2">Bootstrap3中文文档（v3.7.0）</a>
        </div>
        <div class="bottom">
            <a href="#"><img src="img/boot-1.png"/></a>
            <a href="#"><img src="img/boot-2.png"/></a>
            <a href="#"><img src="img/boot-3.png"/></a>
            <a href="#"><img src="img/boot-4.png"/></a>
        </div>
    </div>
</body>
</html>

2.css文件0-homework.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    color:#ffffff;
    text-decoration: none;
}
ul li{
    float: left;
}
div.top{
    background:#333;
    padding: 15px 0;
}
div.top ul li a{
    color:#9d9d9d;
    margin-right:30px;
    font-size:14px;
}
.clear:after{
    content:"";
    display:block;
    clear:both;
}
div.top ul li a.first{
    font-size:18px;
    margin-left:70px;
}
/*中间内容样式*/
div.middle{
    text-align: center;
    background:linear-gradient(to right,#0c0535,#5a2a4d);
    padding:50px 0;
}
div.middle h1{
    font-size:90px;
    color:#fff;
    padding:50px 0 20px 0;
}
div.middle h2{
    color:#9d9d9d;
}
div.middle a.btn1{
    display:block;
    width:300px;
    background: #337abf;
    padding:15px 30px 18px;
    border-radius:5px;
    font-weight:bold;
    margin:50px auto 20px;
}
/*底部*/
.bottom img{
    float:left;
}
/*pc*/
@media screen and (min-width: 992px){
   .container{
       margin:0 auto;
   }
    .top,.middle,.bottom{
        width:100%;
    }
    .bottom img{
        width:25%;
    }
}
/*pad*/
@media screen and (min-width:768px) and (max-width: 991px){
    .container{
        width:750px;
        margin:0 auto;
    }
    .top,.middle,.bottom{
        width:100%;
    }
    .bottom img{
        width:50%;
    }
}
/*phone*/
@media screen and (max-width: 767px){
    .container,.top,.middle,.bottom{
        width: 100%;
    }
    .bottom img{
        width:100%;
    }
}