编程作业-2017.1.20

作者: 黑猫乄 | 来源:发表于2017-01-22 00:46 被阅读0次

这次又留了两道编程题(￢︿￢)
①用三种方法使div元素并列摆放
嗯，相信看过视频的人都能想到这三种方法就是：

浮动法
内联块法（inline-block）
定位法
代码↓↓↓

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div并列——浮点</title>
<style>
div{
       width:200px;
       height:200px;
       background-color: red;
       margin-left: 10px;
       float: left;
   }
</style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div并列——内联块</title>
<style>
div{
       width:200px;
       height:200px;
       background-color: red;
       display: inline-block;
   }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>div并列——定位1</title>
    <style>
        div{background:red;height:200px;width:200px;}
.div2{position:relative;left:210px;bottom:200px;}
.div3{position:relative;left:420px;bottom:400px;}
    </style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>  
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并列——定位2</title>
<style>
    body{margin: 0;}
div{
     width: 200px;
    height:200px;
       }
    .div1{
        background-color: yellow;
    }
    .div2{
        background-color: blue;
        position: absolute;
        left: 200px;
        top: 0px;}
    .div3{
        background-color: green;
        position: absolute;
        left: 400px;
        top:0px;
    }
       </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
</html>

至于为什么我写了四种呢，就是我把position写了两种形式罢了...
②做一个万恶的新闻表格
这个真心是想了很久，首先要把它分成三块去考虑，头部中的top是我用截图截下来的😁，中间的照片的阴影很难处理，最后还要进行z-index处理，尾部是由无序排列组成的，总之就是很多层套在一起，我知道我的方法很麻烦，可在麻烦后总能学到一些东西，这才是学习的意义所在啊...
先上效果图吧！

屏幕截图(76).png

屏幕截图(77).png

似乎还可以的样子有没有！注意：前方高能！
↓↓↓

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>香菇</title>
<style>
    *{
        margin:0;
        padding:0;
    }
        
    .box{
        
        width:226px;
        height: 1130px;
        background-color: #fcfafb;
        margin: 100px auto;
        padding:20px 20px 15px 20px;
    
        
        
    }
    .title{
        height: 89px;
        background: url(../21日编程2所需图片/top.jpg) no-repeat;
    }
    .top1{
        height: 40px;
        width: 226px;
        padding-left: 30px;
        font : light 20px/20px "Microsoft YaHei UI";
        color: #000;
    }
    .top21{
            padding: 10px 27px 8px 30px;
            border: 1px solid #ccc;
            border-bottom: none; 
           
            }
    .top22{
            padding: 10px 19px 8px 19px;
            border-bottom: 1px solid #ccc;
           
            }
    .image{
        height: 891px;width: 226px;
    }
    .image1{
        height: 160px;
        margin-bottom: 20px;
    }
    .img1{
        position:relative;
        width=226px; height=160px;}
    .ms11{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 226px;
        height: 26px;
        background: #000;
        opacity: 0.6;
        color: #fff;
        font-family: Microsoft YaHei UI;
        font-size: 11px;
        line-height: 26px;
        text-indent: 30px;
            
    }
    .ms1{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 26px;
        width: 20px;
        background: #e2291c;
        z-index: 1;
        line-height: 26px;
        text-align: center;
        
        
    }
    .image2{
        height: 160px;
        margin-bottom: 20px;
    }
    .img2{
        position:relative;
        width=226px; height=160px;}
    .ms22{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 226px;
        height: 26px;
        background: #000;
        opacity: 0.6;
        color: #fff;
        font-family: Microsoft YaHei UI;
        font-size: 11px;
        line-height: 26px;
        text-indent: 30px;
            
    }
    .ms2{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 26px;
        width: 20px;
        background: #e2291c;
        z-index: 1;
        line-height: 26px;
        text-align: center;
    }
    .image3{
        height: 160px;
        margin-bottom: 20px;
    }
    .img3{
        position:relative;
        width=226px; height=160px;}
    .ms33{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 226px;
        height: 26px;
        background: #000;
        opacity: 0.6;
        color: #fff;
        font-family: Microsoft YaHei UI;
        font-size: 11px;
        line-height: 26px;
        text-indent: 30px;
            
    }
    .ms3{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 26px;
        width: 20px;
        background: #e2291c;
        z-index: 1;
        line-height: 26px;
        text-align: center;}
    .image4{
        height: 160px;
        margin-bottom: 20px;
    }
    .img4{
        position:relative;
        width=226px; height=160px;}
    .ms44{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 226px;
        height: 26px;
        background: #000;
        opacity: 0.6;
        color: #fff;
        font-family: Microsoft YaHei UI;
        font-size: 11px;
        line-height: 26px;
        text-indent: 30px;
            
    }
    .ms4{position: absolute;
        bottom: 0;
        left: 0;
        height: 26px;
        width: 20px;
        background: #e2291c;
        z-index: 1;
        line-height: 26px;
        text-align: center;}
    .image5{
        height: 160px;
        margin-bottom: 11px;
    }
    .img5{
        position:relative;
        width=226px; height=160px;}
    .ms55{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 226px;
        height: 26px;
        background: #000;
        opacity: 0.6;
        color: #fff;
        font-family: Microsoft YaHei UI;
        font-size: 11px;
        line-height: 26px;
        text-indent: 30px;
            
    }
    .ms5{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 26px;
        width: 20px;
        background: #e2291c;
        z-index: 1;
        line-height: 26px;
        text-align: center;}
    .table{
        height: 150px;
        margin-bottom: 15px;
    }
    .box2{
        line-height: 30px;
    }
    li{
        list-style: none;
        line-height: 1px;
        font-size: 12px;
        font-family: Microsoft YaHei UI;
        font-weight:Light;
        padding-left: 10px;
        
    }
    a{
        text-decoration:none;
        color: #404646;
        
        
    }
    .six{
        position: relative;
        left: -9px;
        top: 10px;
        display:inline;
    }
    .seven{
        position: relative;
        left: -9px;
        top: 10px;
        display:inline;
    }
    .eight{
        position: relative;
        left: -9px;
        top: 10px;
        display:inline;
    }
    .nine{
        position: relative;
        left: -9px;
        top: 10px;
        display:inline;
    }
    .ten{
        position: relative;
        left: -9px;
        top: 10px;
        display:inline;
    }
    </style>
</head>

<body>
<div class="box">
    <div class="title">
        <div class="top"></div>
        <div class="top1">排行榜</div>
        <span class="top21">最热排行</span><span class="top22">新课上线</span>
    </div>
    <div class="image">
        <div class="image1">
                  <div class="img1">![](../21日编程2所需图片/image-1.jpg)
                  <span class="ms1">1</span>
                  <span class="ms11">张小龙：微信四大价值观</span>
                  </div>
            <!--![](../21日编程2所需图片/2017-01-21_182940.jpg)-->
        </div>
        <div class="image2">
                  <div class="img2">
                        ![](../21日编程2所需图片/image-2.jpg)
                  <span class="ms2">2</span>
                  <span class="ms22">刘超：互联网新时代需要什么样...</span>
                  </div>
        </div>
        <div class="image3">
                  <div class="img3">
                        ![](../21日编程2所需图片/image-3.jpg)
                  <span class="ms3">3</span>
                  <span class="ms33">马化腾：腾讯将专注于做互联网...</span>
                  </div>
        </div>
        <div class="image4">
                  <div class="img4">
                        ![](../21日编程2所需图片/image-4.jpg)
                  <span class="ms4">4</span>
                  <span class="ms44">IT领袖峰会圆桌会谈：互联网下...</span>
                  </div>
        </div>
        <div class="image5">
                  <div class="img5">
                        ![](../21日编程2所需图片/image-5.jpg)
                  <span class="ms5">5</span>
                  <span class="ms55">微信支付对实体商业的价值几何？</span>
                  </div>
            
        </div>
        
        </div>
<div class="table">
    <ul class ="box2">
        <li><a href="###"><div class="six">![](../21日编程2所需图片/six.jpg)</div>张小龙：小程序正式发布，开...</a></li>
        <li><a href="###"><div class="seven">![](../21日编程2所需图片/seven.jpg)</div>马化腾：通向互联网未来的七...</a></li>
        <li><a href="###"><div class="eight">![](../21日编程2所需图片/eight.jpg)</div>马化腾：腾讯现在只做两件事</a></li>
        <li><a href="###"><div class="nine">![](../21日编程2所需图片/nine.jpg)</div>使用UE4制作VR内容的优化</a></li>
        <li><a href="###"><div class="ten">![](../21日编程2所需图片/ten.jpg)</div>何凌南：谣言在想什么</a></li>
        <!--三个#是不进行刷新，一个#是刷新-->
    </ul>
        
        
</div>
</div>
</body>
</html>

百度云链接：http://pan.baidu.com/s/1nvsHArB 密码：xwfo
我什么也不想说了我只想睡觉😂
——来自于一个找不到好方法写代码的蠢boy

编程作业-2017.1.20

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读