bootstrap案例2

咸鱼-咸鱼-咸鱼

于 2018-07-23 14:49:58 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/qazwsx_edc1/article/details/81167522

版权

1.html文件 01-exercise.html

<!doctype html>
<html>
<head>
    <title>网页</title>
    <meta charset="utf-8">
    <style></style>
    <link rel="stylesheet" href="01-exercise.css">
</head>
<body>
    <div class="container">
      
      <div class="left">
        <ul>
          <li><a href="#">豆蔻年华</a></li>
          <li><a href="#">花样青春</a></li>
          <li><a href="#">而立之年</a></li>
          <li><a href="#">激情岁月</a></li>
        </ul>
      </div>
      
      <div class="middle">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
        <img src="img/4.jpg">
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit necessitatibus labore hic nihil eveniet a itaque similique maxime voluptatum aliquam! Quibusdam facilis iure quod iste consequuntur fuga illum fugiat adipisci.</span>
        <span>Commodi veritatis laudantium id natus totam rem pariatur voluptate eius optio atque est quam autem sint incidunt labore neque veniam ab minus nisi molestias ratione nemo accusantium quas ea doloribus!</span>
        <span>Ad optio necessitatibus aut illo non inventore molestias tempore suscipit quam tenetur porro officiis nostrum voluptatibus iure repellendus nisi corrupti expedita rem voluptates alias odio earum iste aliquam dolore numquam!</span>
        <span>Atque numquam est provident optio consectetur dolor laboriosam quisquam hic ullam quaerat aliquam at architecto officia iusto a! Veritatis commodi quis officiis praesentium quisquam laudantium amet inventore deleniti eius repellat.</span>
        <span>Quas praesentium culpa eius quidem quod doloribus reprehenderit soluta aliquam unde quisquam repellat nam fugit porro aliquid nobis quaerat facilis accusamus quo harum obcaecati aspernatur in veritatis aperiam asperiores ipsam.</span>
        <span>Provident blanditiis asperiores eligendi eum laboriosam commodi quod repellendus voluptatum neque magnam voluptas saepe. Voluptatibus animi minus ad eum inventore rem dolore omnis ex voluptas veritatis illo aliquam dolorum cupiditate.</span></p>
      </div>
      
      <div class="right">
        <p>
          右侧的广告： <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta consequuntur possimus rerum qui earum atque eum impedit aperiam quia ullam vel optio tempora deleniti facere molestias doloribus veritatis quae dolores!</span><span>Vitae porro facilis cumque earum similique dicta inventore quaerat eveniet fugiat obcaecati perspiciatis sed. Est incidunt doloribus neque numquam blanditiis vel iusto enim dolorum inventore fugiat rerum voluptatum eos commodi.</span>
        </p>
      </div>
    </div>
</body>
</html>

2.css文件01-exercise.css

*{
margin:0;
padding:0;
box-sizing:border-box;
}
div{
border:1px solid #000;
}
div.left ul{
list-style:none;
}
div.left ul li{
border:5px solid purple;
}
.left,.middle,.right,.container img{
float:left;
}
.container img{
padding:5px;
}
.container:after{
content:"";
display:block;
clear:both;
}
/*PC*/
@media screen and (min-width:992px){
.container{
     width:1000px;
margin:0 auto;
}
.left,.right{
    width:20%;
}
.middle{
    width:60%;
}
.container img{
    width:25%;
}
}

/*pad*/
@media screen and (min-width:768px) and (max-width:991px){
.container{
    width:800px;
margin:0 auto;
}
.left{
    width:25%;
}
.middle{
    width:75%;
}
.right{
    display:none;
}
.container img{
    width:25%;
}

}
/*phone*/
@media screen and (max-width:767px){
.container{
    width:100%;
}
.left,.middle{
    width:100%;
}
.right{
   display:none;
}
.container img{
    width:50%;
}
}