随笔- 30 文章- 6 评论- 0 阅读- 1754
css百度页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4220809_yq5amli87mr.css">
    <style>
        body {
            margin: 0;
        }

        .centent {
            /* background-image: url(./img/u=784911644\,511439803&fm=193&f=GIF.jpg);
            background-repeat: no-repeat;
            background-size: cover; */
            background: url(./img/u=784911644\,511439803&fm=193&f=GIF.jpg)no-repeat  fixed  ;
            /* background-position: right; 
             background-color 背景颜色 
             background-image 背景图片
             background-repeat 背景平铺方式
             background-attachment 背景图片固定方式
             background-position 背景图片位置
             background-size 背景图片尺寸
             background-origin 背景图片显示区域
             background-clip 背景显示区域
             inherit 继承父元素的背景属性样式 */
            background-size: cover;
        }

        .one {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .left a {
            color: black;
            text-decoration: none;
            line-height: 60px;
            margin: 20px;
        }

        .left a:hover {
            color: rgb(49, 94, 251);
        }

        .right a {
            color: black;
            text-decoration: none;
            line-height: 60px;
            box-sizing: content-box;
            margin-right: 60px;
        }

        .right a:hover {
            color: rgb(49, 94, 251);
        }

    

        .three img {
            width: 270px;
            height: 129px;
            margin-bottom: 40px;
        }

        .three {
            text-align: center;
            margin-bottom: 30px;
        }

        .inp {
            text-align: center;
        }

        .four {
            width: 550px;
            height: 44px;
            border: 2px solid rgb(149, 149, 181);
            outline: 0;
            border-radius: 10px 0 0 10px;
            text-indent: 20px;
            border-right: 0;
            padding: 0;
            vertical-align: bottom;
        }

        .four:hover {
            border-color: blue;
        }

        .fix {
            width: 108px;
            height: 48px;
            font-size: 17px;
            border: 2px solid rgb(78, 110, 242);
            border-left: 0;
            line-height: 48px;
            text-align: center;
            background-color: rgb(78, 110, 242);
            color: #fff;
            border-radius: 0 10px 10px 0;
        }

        .fix:hover {
            border: 2px solid rgb(34, 73, 230);
            background-color: rgb(34, 73, 230);
        }

        .icon-zhaoxiangji {
            font-size: 30px;
            display: flex;
            margin-top: -36px;
            margin-left: 1139px;
            color: rgb(173, 176, 186);
        }

        .right img:nth-child(1) {
            width: 24px;
            height: 24px;
        }

        .right img:nth-child(2) {
            width: 23px;
            height: 23px;
        }

        .right img:nth-child(3) {
            width: 28px;
            height: 28px;
        }

        .imgs {
            border-radius: 14px;
        }

        .tast {
            display: inline-block;
            width: 30px;
            height: 16px;
            line-height: 16px;
            background-color: rgb(130, 201, 30);
            text-align: center;
            margin-left: -60px;
            margin-top: 22px;
            border-radius: 10px;
            font-size: 16px;
            color: white;
        }

        .ten {
            margin-left: 60px;
        }

        .right a span {
            display: inline-block;
            margin-left: 20px;
        }

        .nuv {

          
            
            width: 950px;
            margin: 100px auto;
        }
        .new {
            width: 560px;
            height: 132px;
            display: flex;
            justify-content: space-between;
            padding: 20px; 
         
          
            
        }
        .new1 img {
            width: 184px;
            height: 132px;
            border-radius: 16px;
        }

        .new2 {
            margin-left: 12px;
            /* 改变主轴的位置 */
            flex-direction: column;
            display: flex;
            justify-content: space-between;
        }

        .new3 {
            color: #626675;
            font-size: 13px;
            margin: 10px;
            display: flex;
            justify-content: space-between;
        }

        .new4 a {
            text-decoration: none;
            color: #626675;
        }

        .new4 a:hover {
            color: blue;
        }

        .new3 span:nth-child(1):hover {
            cursor: pointer;
        }

        .icon-24gf-volumeHigh {
            font-size: 13px;
        }

        .new3 span:nth-child(2):hover {
            color: blue;
            cursor: pointer;
        }
        .nuv>span{
                margin-left: 10px;
                font-size: 14px;
        }
        .nuv>span a{
            text-decoration: none;
                color: #454141
        }
        .nuv>span a:hover{
            color: blue;
        }
         .box{
            width: 560px;
            height: 132px;
           margin-bottom: 40px;
              
            padding: 20px; 
          
        }
        .title{
            margin-bottom: 10px;
        }
         .title a{ 
            color: rgba(0,0,0,.8);
            text-decoration: none;
           
        }
        .title a:hover{
            color: cornflowerblue;
        }
        .box .imgs{
            display: flex;
            justify-content: space-between;
        }
       .imgs  img{
            width: 33%;
        }
        .imgs  img:hover{
            cursor: pointer;
        }
        .imgs img:nth-child(1){
            border-radius: 7px 0 0 7px;
        }
        .imgs img:nth-child(3){
            border-radius: 0px 7px 7px 0px;
        }
        .tips{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #626675;
            margin-top: 10px;
        }
        .tips span{
            color: #9195a3;
            font-size: 12px;
            margin-left: 10px;
        }
        .tips-right{
            line-height: 20px;
            display: flex;
        }
        .tips-right:hover{
            color: turquoise;
            cursor: pointer;
        }
        .tips-right:hover .icon-24gf-volumeHigh{
            color: turquoise;
            cursor: pointer;
        }
        .tips .icon-24gf-volumeHigh{
            font-size: 13px;
            margin: 1px 3px 0 0;
        } 
        .tips-left:hover{
                cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="centent">
        <div class="one">
            <div class="left">
                <a href="##">新闻</a>
                <a href="##">hao123</a>
                <a href="##">地图</a>
                <a href="##">贴吧</a>
                <a href="##">视频</a>
                <a href="##">图片</a>
                <a href="##">网盘</a>
                <a href="##">更多</a>
            </div>
            <div class="right">
                <a href="##">
                    <img src="./img/a2.png" alt="" />
                    <span>惠济</span>
                </a>

                <a href="##">
                    <img src="./img/a1.png" alt="">
                    <span>23°C</span>
                </a>
                <span class="tast">良</span>
                <a href="##" class="ten">设置</a>
                <a href="##">
                    <img src="./img/a3.png" alt="" class="imgs">
                    <span>刘浩龙</span>
                </a>
            </div>
        </div>
        <div class="three">
            <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc"
                title="百度一下你就知道"><img src="./img/baidu.png" alt="百度"></a>
        </div>
        <div class="inp">
            <form action="https://www.baidu.com/s" method="get">
                <input type="text" name="wd" class="four"><input type="submit" value="百度一下" class="fix">
                <span class="iconfont icon-zhaoxiangji"></span>
            </form>
        </div>
           
      <div class="nuv">
            <span> <a href="##">我的关注</a></span> &nbsp;&nbsp;<span> <a href="##">推荐</a></span> 
            <div class="new">
                <div class="new1"><a href=""><img src="./img/people.webp" alt=""></a> </div>
                <div class="new2">
                    <div class="new4"><a href="##">90后作家“七月新番”因肺癌去世，曾说“希望文字比自己的生命更长久”</a> </div>
                    <div class="new3"><span>红星新闻 10-11 12:49</span>
                        <span class="iconfont icon-24gf-volumeHigh"> 播报</span>
                    </div>

                </div>

            </div>
            <div class="box">
                
                <div class="title">
                    <a href="##"> 211大学排名新出炉，上财、西电表现出色，新大、藏大垫底
                    </a>
                </div>
              
                <div class="imgs">
                   
                    <img src="./img/u=784911644,511439803&fm=193&f=GIF.jpg" alt="">
                   <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                    <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                </div>
                <div class="tips">
                    <div class="tips-left">小司知识常识啦<span>10-07 17:26</span></div>
                    <div class="tips-right">
                        <span class="iconfont icon-24gf-volumeHigh"></span>
                        播报
                    </div>
                </div>
            </div>
            <div class="new">
                <div class="new1"><a href=""><img src="./img/people.webp" alt=""></a> </div>
                <div class="new2">
                    <div class="new4"><a href="##">90后作家“七月新番”因肺癌去世，曾说“希望文字比自己的生命更长久”</a> </div>
                    <div class="new3"><span>红星新闻 10-11 12:49</span>
                        <span class="iconfont icon-24gf-volumeHigh"> 播报</span>
                    </div>

                </div>

            </div>
            <div class="box">
                
                <div class="title">
                    <a href="##"> 211大学排名新出炉，上财、西电表现出色，新大、藏大垫底
                    </a>
                </div>
              
                <div class="imgs">
                   
                    <img src="./img/u=784911644,511439803&fm=193&f=GIF.jpg" alt="">
                   <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                    <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                </div>
                <div class="tips">
                    <div class="tips-left">小司知识常识啦<span>10-07 17:26</span></div>
                    <div class="tips-right">
                        <span class="iconfont icon-24gf-volumeHigh"></span>
                        播报
                    </div>
                </div>
            </div>
            <div class="new">
                <div class="new1"><a href=""><img src="./img/people.webp" alt=""></a> </div>
                <div class="new2">
                    <div class="new4"><a href="##">90后作家“七月新番”因肺癌去世，曾说“希望文字比自己的生命更长久”</a> </div>
                    <div class="new3"><span>红星新闻 10-11 12:49</span>
                        <span class="iconfont icon-24gf-volumeHigh"> 播报</span>
                    </div>

                </div>

            </div>
            <div class="box">
                
                <div class="title">
                    <a href="##"> 211大学排名新出炉，上财、西电表现出色，新大、藏大垫底
                    </a>
                </div>
              
                <div class="imgs">
                   
                    <img src="./img/u=784911644,511439803&fm=193&f=GIF.jpg" alt="">
                   <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                    <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                </div>
                <div class="tips">
                    <div class="tips-left">小司知识常识啦<span>10-07 17:26</span></div>
                    <div class="tips-right">
                        <span class="iconfont icon-24gf-volumeHigh"></span>
                        播报
                    </div>
                </div>
            </div>
            <div class="new">
                <div class="new1"><a href=""><img src="./img/people.webp" alt=""></a> </div>
                <div class="new2">
                    <div class="new4"><a href="##">90后作家“七月新番”因肺癌去世，曾说“希望文字比自己的生命更长久”</a> </div>
                    <div class="new3"><span>红星新闻 10-11 12:49</span>
                        <span class="iconfont icon-24gf-volumeHigh"> 播报</span>
                    </div>

                </div>

            </div>
            <div class="box">
                
                <div class="title">
                    <a href="##"> 211大学排名新出炉，上财、西电表现出色，新大、藏大垫底
                    </a>
                </div>
              
                <div class="imgs">
                   
                    <img src="./img/u=784911644,511439803&fm=193&f=GIF.jpg" alt="">
                   <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                    <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                </div>
                <div class="tips">
                    <div class="tips-left">小司知识常识啦<span>10-07 17:26</span></div>
                    <div class="tips-right">
                        <span class="iconfont icon-24gf-volumeHigh"></span>
                        播报
                    </div>
                </div>
            </div>
            <div class="new">
                <div class="new1"><a href=""><img src="./img/people.webp" alt=""></a> </div>
                <div class="new2">
                    <div class="new4"><a href="##">90后作家“七月新番”因肺癌去世，曾说“希望文字比自己的生命更长久”</a> </div>
                    <div class="new3"><span>红星新闻 10-11 12:49</span>
                        <span class="iconfont icon-24gf-volumeHigh"> 播报</span>
                    </div>

                </div>

            </div>
            <div class="box">
                
                <div class="title">
                    <a href="##"> 211大学排名新出炉，上财、西电表现出色，新大、藏大垫底
                    </a>
                </div>
              
                <div class="imgs">
                   
                    <img src="./img/u=784911644,511439803&fm=193&f=GIF.jpg" alt="">
                   <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                    <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                </div>
                <div class="tips">
                    <div class="tips-left">小司知识常识啦<span>10-07 17:26</span></div>
                    <div class="tips-right">
                        <span class="iconfont icon-24gf-volumeHigh"></span>
                        播报
                    </div>
                </div>
            </div>
            <div class="new">
                <div class="new1"><a href=""><img src="./img/people.webp" alt=""></a> </div>
                <div class="new2">
                    <div class="new4"><a href="##">90后作家“七月新番”因肺癌去世，曾说“希望文字比自己的生命更长久”</a> </div>
                    <div class="new3"><span>红星新闻 10-11 12:49</span>
                        <span class="iconfont icon-24gf-volumeHigh"> 播报</span>
                    </div>

                </div>

            </div>
            <div class="box">
                
                <div class="title">
                    <a href="##"> 211大学排名新出炉，上财、西电表现出色，新大、藏大垫底
                    </a>
                </div>
              
                <div class="imgs">
                   
                    <img src="./img/u=784911644,511439803&fm=193&f=GIF.jpg" alt="">
                   <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                    <img src="./img/u=738234752,3183324393&fm=193&f=GIF.jpg" alt="">
                </div>
                <div class="tips">
                    <div class="tips-left">小司知识常识啦<span>10-07 17:26</span></div>
                    <div class="tips-right">
                        <span class="iconfont icon-24gf-volumeHigh"></span>
                        播报
                    </div>
                </div>
            </div>
    </div>
</body>

</html>