美文网首页
这个PS不简单啊~~

这个PS不简单啊~~

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

    本次编程共留了两个
    第一个是将外边框设为0px,由于同一元素两边框相交处是斜线,于是神奇的一幕发生了...
    它变成了,这样w(゚Д゚)w(原谅我扯淡般的胡诌【扶额】)

    zuoye1.png

    这个代码还是很简单的.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
        <title>boder--</title>
    <style>
        #box{
            height:0px;
            width:0px;
            border-color: #ff0000;
            border-style: solid;
            border-width: 100px;
            border-bottom-color: #ffffff;   
        }
        </style>
    </head>
    
    <body>
    <div id="box">  
    </div>
    </body>
    </html>
        
    

    另外一个编程就比较难了,在下想了很久,但还是感觉有一些缺陷,希望诸位看官能够予以补充~
    要切的图片:


    zuoye2.png

    接下来是代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>我无所畏惧!</title>
    <style>
         
        #box{
            
    
            width: 555px;
            border: 1px solid #000000;
            padding: 0px 20px;
            margin-top: 1px;
            
            
        }
        #top{
             padding-bottom: 28px;
             border-bottom: 1px #000000 dashed;
             
        }
        #div1{
             font-size: 23px;
             font-weight: bold;
             font-family: Verdana, Geneva, sans-serif;
             line-height: 44px;
             color: #404646;
        } 
        #div2{
             font-size: 20px;
             font-weight: bold;
             font-family: Verdana, Geneva, sans-serif;
             line-height: 54px;
             color: #404646;
            
        }
        #div3{
             font-size: 14px ; 
             color: #9b9b9b ;
             line-height: 26px;
             text-indent: 34px;
             font-family: Arial, Helvetica, sans-serif;
        }
        #bottom{
             font-size: 17px;
             color: #404646;
             font-family: Arial, Helvetica, sans-serif;
             font-weight: bold;
             line-height: 37px;
             padding-top: 21px ;
             margin-bottom:-6px;
            
        }
        
        </style>
    </head>
    
    <body>
    <div id="box" style="margin: 1px 0px 1px 2px;">
        <div id="top">
            <div id="div1">动态新闻</div>
            <div id="div2">掌握一门技术的重要性</div>
            <div id="div3">掌握一门技术是未来生存的一块敲门砖,
                           掌握一门技术是未来生<br/>存的一块敲门砖,
                           掌握一门技术是未来生存的一块敲门砖</div>
        </div>
        <div id="bottom">
              <div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
              <div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
              <div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
              <div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
        </div>  
    </div>
    </body>
    </html>
    
    
    

    网页展示图是这样的:


    屏幕截图(68).png 屏幕截图(69).png

    路漫漫而修远兮,感谢诸位忍着想打我的冲动看完了段胡话,接下来是彩蛋环节🐾

    百度云链接:http://pan.baidu.com/s/1mikBTPY 密码:m8cs
    (hhhh)
    修改后链接:http://pan.baidu.com/s/1nvQ7yw5 密码:635b
    事实证明,在开始编程之前,还是有必要把所有的学习视频都看一遍的【/(ㄒoㄒ)/~~】

    相关文章

      网友评论

          本文标题:这个PS不简单啊~~

          本文链接:https://www.haomeiwen.com/subject/ndabbttx.html