十九：图片与文字的设计

作者: rtrhhthth | 来源:发表于2018-06-10 18:17 被阅读0次

十九：图片与文字的设计
十七：图片与文字的设计
平面设计图片怎么配文字才好看
P h o t o | 致我最亲爱的外婆
UI设计注意事项
十五：前端之图片与文字的设计
如何进行长沙VI设计的构思
图片与文字
文字与图片
总述

如下面的图片(从上到下排列)：

1.png

···

2.png

3.png

输入代码如下结果：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POLO360</title>
    <link rel="stylesheet" type="text/css" href="css/page-index.css">
</head>
<body>
    <div class="header w">
        <ul class="nav">
            <li>
                <a href="#">HOME</a>
                <p>Back to home</p>
            </li>
            <li>
                <a href="#">PRODUCTS</a>
                <p>What we have for you</p>
            </li>
            <li>
                <a href="#">SERVICES</a>
                <p>Things we do</p>
            </li>
            <li>
                <a href="#">BLOG</a>
                <p>Follow our updates</p>
            </li>
            <li>
                <a href="#">CONTACT</a>
                <p>Ways to reach us</p>
            </li>
        </ul>
        <div class="logo">
            <a href="#" title="一个非常非常漂亮的网站">
                <img src="img/logo.png" alt="网站的logo">
            </a>
        </div>
    </div>
    <div class="banner w">
        <img src="img/banner/banner01.png" alt="这是banner图片">
        <div class="pointerDiv">
            <a href="#"></a>
            <a class="active" href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
    <div class="content w clearfix">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
        <div class="pl">
            <h2>Perfect Logic</h2>
            <p class="p1">All you want your website to do.</p>
            <div class="imgDiv">
                <img src="img/pic/pic1.jpg" alt="小男孩" />
            </div>
            <p class="p2">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            </p>
            <a class="lm" href="#">Learn More</a>
        </div>

        <div class="cs">
            <h2>Complete Solution</h2>
            <p class="p1">A tool anything and everything you can think</p>
            <div class="imgDiv">
                <img src="img/pic/pic2.jpg" alt="小闺女" />
            </div>
            <p class="p2">
                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
            </p>
            <a class="lm" href="#">Learn More</a>
        </div>

        <div class="uc">
            <h2>Uber Culture</h2>
            <p class="p1">Fresh. Modern and ready for future</p>
            <div class="imgDiv">
                <img src="img/pic/pic3.jpg" alt="大绿球" />
            </div>
            <p class="p2">
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>
            <a class="lm" href="#">Learn More</a>
        </div>
    </div>
    <div class="contact w clearfix">
        <div class="sc">
            <h2>Social Connection</h2>
            <p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
            <div class="icon">
                <a href="#"><img src="img/rss.png" /></a>
                <a href="#"><img src="img/fb.png" /></a>
                <a href="#"><img src="img/in.png" /></a>
                <a href="#"><img src="img/yt.png" /></a>
                <a href="#"><img src="img/tw.png" /></a>
            </div>

            <h2 class="nl">Newsletter</h2>

            <p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
            <form action="#">
                <input class="txt" type="text" placeholder="your email address" />
                <button class="btn">Subscribe</button>
            </form>
        </div>
        <div class="co">
            <h2>Contact</h2>
            <form action="#">
                <input class="txt" type="text" placeholder="your name" />
                <input class="txt" type="text" placeholder="your email address" />
                <textarea class="tarea" placeholder="message"></textarea>
                <button class="btn">Send it</button>
            </form>
        </div>

        <div class="nu">
            <h2>News Updates</h2>
            <p>
                <img src="img/pic/1.gif"/>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p>
                <img src="img/pic/2.gif"/>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
            </p>
            <p class="no-margin">
                <img src="img/pic/3.gif"/>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
            </p>
            <button class="btn">Visit our Blog</button>
        </div>
    </div>

    <div class="footer">
        <div class="w">
            <p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
            <p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
            <p><a href="#">Home</a>  | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
        </div>
    </div>
</body>
</html>

外部样式代码如下：

body{
    /*设置body的背景图片，水平方向重复*/
    background: url(../img/bd-bg.png) repeat-x;
}

/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
.clearfix{
    zoom:1;
}

/*固定元素的宽度和居中*/
.w{
    width: 940px;
    margin: 0 auto;
}

.header{
    /*background-color: #bfa;*/
    /*设置一个上内边距*/
    padding-top: 37px;
    /*设置一个下内边距*/
    padding-bottom: 46px;
}

/*设置logo的位置*/
.logo{
    margin-left: 15px;
}

/*设置导航条*/
.nav{
    /*设置向右浮动*/
    float: right;
    /*设置一个上外边距*/
    margin-top: 22px;
}

.nav li{
    /*设置向左浮动*/
    float: left;
    /*设置左右内边距*/
    padding: 0 10px 8px;
    /*设置左边框*/
    border-left: 1px #d6d6d6 dotted;
}

/*设置导航条中的超链接*/
.nav a{
    /*设置字体颜色*/
    color: #666;
    /*设置字体*/
    font: bold 14px Georgia;
    /*去除下划线*/
    text-decoration: none;
}

/*设置超链接的移入效果*/
.nav a:hover{
    color: #a1a1a1;
    text-decoration: underline;
}

/*
设置导航中的小标题
在chrome浏览器中字体最小支持到12px
1-11都显示为12px
*/
.nav p{
    /*字体颜色*/
    color: #b7b7b7;
    /*字体大小*/
    font: 11px tahoma;
}

/*设置banner*/
.banner{
    /*设置高度*/
    height: 356px;
    /*设置背景*/
    background: url(../img/banner-bg.png) no-repeat bottom center;
    /*开启一个相对定位*/
    position: relative;
}

/*设置导航按钮*/
.pointerDiv{
    /*开启绝对定位*/
    position: absolute;

    top: 314px;
    left: 15px;
}

.pointerDiv a{
    /*设置a浮动*/
    float: left;
    
    /*设置宽度和高度*/
    width: 17px;
    height: 17px;
    
    /*设置一个左外边距*/
    margin-left: 4px;
    
    background:url(../img/sprite.png) no-repeat;
}

/*设置超链接的hover*/
.pointerDiv .active,
.pointerDiv a:hover{
    background:url(../img/sprite.png) no-repeat -27px 0px;
}


/**********************设置content部分**********************/
/*.content{
    background-color: red;
}*/

.content h1{
    /*设置文本居中*/
    text-align: center;
    /*设置字体*/
    font: bold 24px Georgia;
    /*设置上内边距*/
    padding: 6px 0 20px 0;
    /*设置一个下外边距*/
    margin-bottom: 38px;
    /*设置背景*/
    background: url(../img/line.png) no-repeat bottom center;
}

/*中间的三个div*/
.content .pl, .content .cs, .content .uc,
.contact .sc, .contact .co, .contact .nu{
    /*向左浮动*/
    float: left;
    width: 300px;
}

/*给div添加左右边距*/
.content .cs, .contact .co{
    margin: 0 20px;
}

/*设置div中的标题*/
.content h2{
    color: #11719e;
    font: 21px Georgia;
}

.content .p1{
    color: #8c8c8c;
    font: 12px Helvetica;
}

/*设置图片div*/
.content .imgDiv{
    width: 299px;
    height: 190px;
    background: url(../img/img-bg.png) no-repeat;
    /*设置上下外边距*/
    margin: 16px 0px 10px 0px;
    /*设置水平居中*/
    text-align: center;
    /*设置上内边距*/
    padding-top: 12px;
}

/*设置第二个段落*/
.content .p2{
    height: 92px;
    color: #3e3e3e;
    font: 13px Helvetica;
    word-spacing: 2px;
}

/*设置按钮的样式*/
.content .lm{
    /*设置块元素*/
    display: block;
    /*设置宽和高*/
    width: 163px;
    height: 40px;
    /*设置背景*/
    background: url(../img/sprite.png) no-repeat 0px -70px;
    /*设置下划线*/
    /*text-decoration: none;*/
    /*设置文字*/
    color: #016999;
    font: 12px/40px Helvetica;
    /*设置文字的缩进*/
    text-indent: 1em;
    /*设置下外边距*/
    margin-bottom: 35px;
}

/**********************设置contact部分**********************/
/*设置背景*/
.contact{
    background: url(../img/line.png) no-repeat top center;
}

/*设置联系栏中的表单项*/
.contact .txt{
    width: 276px;
    height: 33px;
    line-height: 33px;
    /*设置背景图片*/
    background: url(../img/input.png) no-repeat;
    /*单独为IE6设置一个背景不随元素滚动*/
    _background-attachment: fixed;
    
    /*去除默认边框*/
    border: none;
    
    /*去除默认的内边距*/
    padding: 0 10px;
    margin: 0px 0px 16px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .contact .tarea{
        display: block;
    } 
}
.contact .tarea{
    width: 276px;
    height: 114px;
    background: url(../img/textarea.png) no-repeat;
    /*单独为IE6设置一个背景不随元素滚动*/
    _background-attachment: fixed;
    /*去除默认边框*/
    border: none;
    /*去除滚动条*/
    overflow: auto;
    /*设置文本域不能调整大小*/
    resize: none;
    
    /*去除默认内外边距*/
    padding: 10px;
    margin: 0;
}

.contact .btn{
    width: 163px;
    height: 32px;
    background: url(../img/sprite.png) no-repeat 0px -27px;
    border: none;
    
    /*去除默认内外边距*/
    padding: 0;
    margin: 11px 0 23px;
    
    /*设置字体*/
    color: white;
    font: 13px Georgia;
    /*设置文字的位置*/
    text-align: left;
    text-indent: 1em;
    /*cursor可以用来设置鼠标指针的样式*/
    cursor: pointer;
}

/*设置标题*/
.contact h2{
    color: #444;
    font: 18px/1 georgia;
    /*设置下边框*/
    border-bottom: 1px dashed #d3d3d3;
    /*设置内边距*/
    padding: 44px 0px 10px;
    /*设置一个下外边距*/
    margin-bottom: 15px;
}

/*设置联系栏左侧*/
.sc .p1{
    color: #444;
    font: 12px/1 Helvetica;
}

/*设置小图标*/
.sc .icon{
    /*设置字体大小为0，去除空格*/
    font-size: 0;
    /*设置上外边距*/
    margin-top: 4px;
}

.sc .icon a{
    margin-right: 4px;
}

/*设置左侧的第二个标题*/
.sc .nl{
    font: bold 18px/1 "gill sans mt";
    /*设置内边距*/
    padding: 34px 0px 10px;
}

/*设置左侧的表单项*/
.sc .txt{
    /*设置上外边距*/
    margin-top: 15px;
    /*为ie6设置上外边距*/
    _margin-top: 18px;
    margin-bottom: 0px;
}

/*设置联系栏右侧*/
.nu p{
    color: #444;
    font: 12px/1 helvetica;
    height: 58px;
    /*单独为IE6设置一个高度*/
    _height: 60px;
    /*设置下边框*/
    border-bottom: 1px dashed #d3d3d3;
    margin-bottom: 14px;
    padding-bottom: 9px;
}

.nu .no-margin{
    margin-bottom: 0px;
}

.nu img{
    /*设置向左浮动*/
    float: left;
    margin-right: 8px;
}

.nu .btn{
    _margin-left: -1em;
}

/*设置底部*/
.footer{
    height: 173px;
    background: #333;
    /*设置上边框*/
    border-top: 10px solid #4c4c4c;
}

/*设置底部的文字的样式*/
.footer a , .footer p{
    color: #999;
    font: 11px Helvetica;
    text-decoration: none;
}

/*设置a元素的hover*/
.footer a:hover{
    color: #cccaca;
    text-decoration: underline;
}

.footer p{
    margin-left: 8px;
    margin-right: 23px;
    margin-bottom: 8px;
}

.footer .w{
    padding-top: 18px;
    background-color: yellow;
}

.footer .copy{
    float: right;
    /*处理双倍边距的bug*/
    display: inline;
}