码迷，mamicode.com
首页 > 其他好文 > 详细

7.1我很懵

时间：2016-07-02 01:48:52      阅读：267      评论：0      收藏：0      [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"  href="textl.css"/>
    <link rel="stylesheet" href="textr.css"/>
</head>
<body>
<div class="all">
<div class="page">
    <div class="nav">
        <div class="head">
            <div class="icon">
                <ul>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                </ul>
            </div>
            <div class="list">
            <div class="logo"></div>
            <div class="tool">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">PORTFOLIO</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div class="content">
            <ul>
                <li>
                    <img src="img/image_01.png" alt="#"/>
                    <p>MAGAZINE FOLD DESIGN</p></li>
                <li>
                    <img src="img/image_02.png" alt="#"/>
                    <p>CREATIVE CD DESIGN PACKAGE</p></li>
                <li>
                    <img src="img/image_03.png" alt="#"/>
                    <p>MODERN TAG LAYOUT</p></li>
                <li>
                    <img src="img/image_04.png" alt="#"/>
                    <p>CREATIVE LAYOUT GRAPHICS</p></li>
                <li>
                    <img src="img/image_05.png" alt="#"/>
                    <p>MODERN MAGAZINE LAYOUT</p></li>
                <li>
                    <img src="img/image_06.png" alt="#"/>
                    <p>CREATIVE BOX MOCKUP</p></li>
            </ul>
        </div>
        <div class="foot">

            <a href="#top"><img alt="" src="img/loading-button.png" class="load"/></a>
            <p>&copy; 2015 Rights Reserved.Developed by Dessign,net</p>
        </div>
    </div>
</div>
</div>
<div class="box">
    <div class="boxall">
        <div class="heada">
            <img src="img/QC}%J8U2.png" alt="#"/>
            <div class="icona">
                <ul>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                </ul>
            </div>
            <div class="logoa"></div>
        </div>
        <div class="contenta">
            <ul>
                <li>
                    <img src="img/image_01.png" alt="#" width="300px" height="180px"/>
                    <p>MAGAZINE FOLD DESIGN</p></li>
                <li>
                    <img src="img/image_02.png" alt="#" width="300px" height="180px"/>
                    <p>CREATIVE CD DESIGN <br/> PACKAGE</p></li>
                <li>
                    <img src="img/image_03.png" alt="#" width="300px" height="180px"/>
                    <p>MODERN TAG LAYOUT</p></li>
                <li>
                    <img src="img/image_04.png" alt="#" width="300px" height="180px"/>
                    <p>CREATIVE LAYOUT <br/> GRAPHICS</p></li>
                <li>
                    <img src="img/image_05.png" alt="#" width="300px" height="180px"/>
                    <p>MODERN MAGAZINE <br/> LAYOUT</p></li>
                <li>
                    <img src="img/image_06.png" alt="#" width="300px" height="180px"/>
                    <p>CREATIVE BOX MOCKUP</p></li>
            </ul>
        </div>
        <div class="foota">
            <a href="#top"><img alt="" src="img/loading-button.png" class="load"/></a>
            <p>&copy; 2015 Rights Reserved.Developed by Dessign,net</p>
        </div>
    </div>
</div>
</body>
</html>
@media screen and (min-width: 1300px) {
    * {
        margin: 0;
        padding: 0;
    }
    .all {
        width: 1260px;
        height: 1600px;
        background: gray;
        margin: auto;
        position: relative;
        /*overflow: hidden;*/
    }
    .box {
        display: none;
    }
    .page {
        width: 1200px;
        height: 1540px;
        background: white;
        position: absolute;
        top: 30px;
        left: 30px;
    }
    .nav {
        width: 1180px;
        height: 1440px;
        margin: auto;
        padding: 10px;
    }
    .head {
        width: 100%;
        height: 100px;
    }
    .icon {
        width: 272px;
        height: 30px;
        float: right;
    }
    .icon ul {
        list-style: none;

    }
    .icon ul li {
        float: left;
        width: 25px;
        height: 25px;
        margin-top: 3px;
        padding-left: 9px;
    }
    .icon ul li:hover i {
        transform: scale(1.2);
    }
    .icon ul li:nth-child(1) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/twitter-icon.png") no-repeat;
    }
    .icon ul li:nth-child(2) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/facebook-icon.png") no-repeat;
    }
    .icon ul li:nth-child(3) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/google-plus-icon.png") no-repeat;
    }
    .icon ul li:nth-child(4) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/picasa-icon.png") no-repeat;
    }
    .icon ul li:nth-child(5) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/pinterest-icon.png") no-repeat;
    }
    .icon ul li:nth-child(6) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/vimeo-icon.png") no-repeat;
    }
    .icon ul li:nth-child(7) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/youtube-icon.png") no-repeat;
    }
    .icon ul li:nth-child(8) i {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("img/flickr-icon.png") no-repeat;
    }
    .list ul li:hover a {
        color: red;
    }
    .list {
        width: 100%;
        height: 59px;
        clear: both;
        padding-top: 5px;
        /*父级元素清除浮动*/
    }
    .logo {
        background: url("img/logo.png") no-repeat;
        width: 201px;
        height: 59px;
        float: left;
    }

    .tool {
        float: right;
        width: 540px;
        height: 59px;
    }

    .tool ul {
        list-style: none;
    }

    .tool ul li {
        float: left;
        line-height: 59px;
        padding-left: 62px;
    }

    .tool ul li:nth-child(1) {
        padding-left: 0;
    }

    .tool ul li a {
        text-decoration: none;
        font-size: 16px;
        letter-spacing: 2px;
    }

    /*词间距*/
    .content {
        width: 100%;
        height: 1210px;
        clear: both;
        margin-top: 10px;
    }

    .content ul {
        list-style: none;
    }

    .content ul li {
        float: left;
        width: 589px;
        height: 420px;
    }

    .content ul li p {
        text-align: center;
        letter-spacing: 2px;
        font-size: 16px;
        margin-top: 15px;
    }

    .content ul li:hover p {
        text-decoration: underline;
    }

    .foot {
        text-align: center;
    }

    .load:hover {
        cursor: pointer;

    }

    .foot p {
        margin-top: 60px;
    }
}

　　

@media screen and (max-width: 1329px){

*{
    margin: 0;
    padding: 0;
    /*outline: 1px solid red;*/
}
.all{
    display: none;
}
.box{
    width: 330px;
    height: 1900px;
    margin: auto;
    /*overflow: hidden;*/
}
.boxall{
    width: 300px;
    height: 1900px;
    margin: auto;
}
.heada{
    width: 100%;
    height: 190px;
    margin-top: 5px;
}
.heada img{
    float: right;
    margin-top: 5px;
}
.icona{
    clear: both;
    width: 270px;
    height: 30px;
    padding-top: 30px;
}
.icona ul{
    list-style: none;
}
.icona ul li{
    width: 30px;
    height: 30px;
    float: left;
    padding-left: 3px;
}
.icona ul li:nth-child(1){
    background: url("img/twitter-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(2){
    background: url("img/facebook-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(3){
    background: url("img/google-plus-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(4){
    background: url("img/picasa-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(5){
    background: url("img/pinterest-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(6){
    background: url("img/vimeo-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(7){
    background: url("img/youtube-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(8){
    background: url("img/flickr-icon@2x.png") no-repeat;
}
.logoa{
    background-image: url("img/logo@2x.png");
   background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 70px;
    margin-top: 25px;
}
.contenta ul{
    list-style: none;
}
.contenta ul li{
    margin-top: 20px;
}
.contenta ul li p{
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
}
.foota img{
    margin-top: 30px;
}
.foota p{
    margin-top: 60px;
}
.foota{
    text-align: center;
}
}

　　技术分享技术分享

这刚开始，路很长，，不知道搞得对不对，望高手指教。。。

7.1我很懵

标签：

原文地址：http://www.cnblogs.com/520Lei/p/5634649.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！