HTML/CSS基础知识实战

梦里梦外; 2022-06-01 05:49 286阅读 0赞

前一段时间学了HTML和CSS的知识，今天有时间赶紧将学到的知识综合起来写个好看的界面。整体  
界面效果如下：  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
整体分为头部、中部、底部，需要使用到例如浮动、浮动的清除、遮罩层、水平垂直居中等基础知识。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <link rel="stylesheet" href="css/index.css">
        </head>
        <body>
            
            <div class="header">
                <div class="logo">
                    <img src="image/logo.png" alt="logo">
                </div>
                <div class="nav">
                    <ul>
                        <li>首页</li>
                        <li>图片</li>
                        <li>视频</li>
                        <li>手记</li>
                    </ul>
                </div>
            </div>
            
            <div class="main">
                <div class="top">
                    <img src="image/1.jpeg"/>
                </div>
                
                <div class="topLayer"></div>
                <div class="topLayer-top">
                    <div class="word">MY BEAUTIFUL LIFE</div>
                    <button>LOOK MORE &gt</button>
                </div>
                <div class="middle">
                    <div class="m-top">
                        <div class="commen weibo">
                            <img src="image/weibo.png"/>
                            <div class="comm">Microblog</div>
                        </div>
                        <div class="commen weixin">
                            <img src="image/weixin.png"/>
                            <div class="comm">Wechat</div>
                        </div>
                        <div class="commen qq">
                            <img src="image/QQ.png"/>
                            <div class="comm">QQ</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="m-middle">
                        "I want to give good things to record down,<br>
                        after the recall will be very beautiful."
                    </div>
                    <div class="m-bottom">
                        <div class="m-com">
                            <img src="image/03-01.jpg">
                            <div class="m-com-word">Cool Image</div>
                            <div class="m-com-word">Record The Picture</div>
                        </div>
                        <div class="m-com">
                            <img src="image/03-02.jpg">
                            <div class="m-com-word">Great Picture</div>
                            <div class="m-com-word">Record The Picture</div>
                        </div>
                        <div class="m-com">
                            <img src="image/03-03.jpg">
                            <div class="m-com-word">Cool Image</div>
                            <div class="m-com-word">Record The Picture</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="content">
                        <div class="title">FROM THE PHOTO ALBUM</div>
                        <div class="pic-content">
                            
                            <dl>
                                <dt><img src="image/04-01.jpg"/></dt>
                                <dd class="word">Life is like a book, just read more and more
                                    refined, more write more carefully. When read,
                                    mind open, all things have been indifferent to
                                    heart. Life is the precipitation.</dd>
                            </dl>
                            <dl>
                                <dt><img src="image/04-02.jpg"/></dt>
                                <dd class="word">Life is like a cup of tea, let people lead a
                                    person to endless aftertastes. You again good
                                    taste, it will always have a different taste,
                                    different people will have different taste more.</dd>
                            </dl>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer">
                © 2016 imooc.com 京ICP备13046642号
            </div>
        </body>
    </html>

css文件

*{
        padding: 0;
        margin:0;
    }
    .header{
        width: 100%;
        height: 100px;
    }
    .header  img{
        width:300px;
        height: 85px;
        padding-left:100px;
        padding-top: 8px;
    
    }
    .header .logo {
        float: left;
    }
    .header .nav {
        float: right;
    }
    .header .nav ul {
     margin-right: 100px;
    }
    .header .nav ul li{
        float: left;
        list-style: none;
        width: 80px;
        height: 100px;
        line-height:100px;
        font-size:15px ;
        font-weight: bolder;
        color: #7D7D7D;
    }
    .main .top{
        width: 100%;
        height: 600px;
    }
    .main .top img{
        width: 100%;
        height: 600px;
    }
    .main .topLayer{
        position: absolute;
        top: 100px;
        left: 0;
        background-color:#000;
        width: 100%;
        height: 600px;
        opacity: 0.5;
    }
    .main .topLayer-top{
        width: 500px;
        height: 300px;
        position: absolute;
        top:400px;
        margin-top: -150px;
        z-index: 2;
        right:50% ;
        margin-right: -250px;
    }
    .main .topLayer-top .word{
        padding-top: 100px;
        color: #fff;
        font-size: 45px;
        font-weight: bolder;
        text-align: center;
        font-family: "微软雅黑";
    }
    .main .topLayer-top button{
        width:200px;
        height: 60px;
        margin-top: 50px;
        color: #fff;
        background-color:#F5704F ;
        font-family: "微软雅黑";
        text-align: center;
        font-weight: bolder;
        font-size: 14px;
        border-radius:8px ;
        margin-left: 150px;
    }
    .main .middle{
        width: 1000px;
        margin: 0 auto;
    }
    .main .middle .m-top .commen{
        float:left;
        width: 33.3%;
        padding-top: 50px;
        text-align: center;
    }
    .main .middle .m-top .commen img{
        width: 100px;
        height:100px;
    }
    .main .middle .m-top .commen .comm{
        font-size: 20px;
        color:#7D7C7F;
        font-weight: bold;
        padding-top: 20px;
    }
    .main .middle .m-middle{
        font-size: 22px;
        color: #E19796;
        font-weight: bold;
        padding-top: 50px;
        font-style:italic;
        text-align: center;
        padding-bottom: 50px;
    }
    .clear{
        clear: both;
    }
    .main .middle .m-bottom .m-com{
         float: left;
         padding: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
     }
    .main .middle .m-bottom .m-com img {
        width:310px;
        height: 260px;
    }
    .main .middle .m-bottom .des1{
        color:#7D7D7F;
        padding-top: 20px;
    }
    .main .middle .m-bottom .des2 {
        padding-top: 10px;
        color: #BDBDBC;
    }
    .main .bottom {
        background-color: #F9F9F9;
    }
    .main .bottom .content {
        width:1000px ;
        margin: 0 auto;
    }
    .main .bottom .content .titile{
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #7D7C7F;
        font-family: "微软雅黑";
        padding-top:50px;
        padding-bottom: 50px;
    }
    .main .bottom .content .pic-content dl {
        float: left;
        width:470px;
        margin: 10px 12px;
    }
    .main .bottom .content .pic-content dl img {
        width:470px;
        height: 460px;
    
    }
    .main .bottom .content .pic-content dl .word {
        padding-top:20px;
        font-size: 20px;
        font-weight: bold;
        color:#7D7C7F;
        padding-bottom: 50px;
    }
    .footer{
        width: 100%;
        height: 100px;
        background-color: #292C35;
        color: #ffffff;
        text-align: center;
        line-height: 100px;
        font-family: "微软雅黑";
        font-size: 15px;
    }

[SouthEast]: /images/20220601/53a7815e25a34444904704890ef6e42f.png
[SouthEast 1]: /images/20220601/052fc2f326394865895033b0ae7ba2a8.png
[SouthEast 2]: /images/20220601/9d0ac2e8603a44f3821064ef91b90115.png