zoukankan      html  css  js  c++  java
  • 图片与文字的对齐方式

    html代码:

            <div class="content_con">
                    <p><img src="images/land_main05.png" alt=""></p>
                    <div class="con">
                        <span class="item">项目名称</span>
                        <span class="item_con">
                            项目说明项目说明项目说明项目说明项目说明项目说明项目说明
                            目说明项目说明项目说明项目说明项目说明项目说明项目说明
                        </span>
                        <span class="item_stats">状态:成功</span>
                        <span class="item_stats cur">进程:<a href="#">1条</a></span>
                    </div>
                    <div class="con_right">
                        <span class="gongxian">贡献</span>
                        <p>付款5元<span>2015.9.9</span></p>
                        <p>付款3元<span>2015.4.6</span></p>
                    </div>
                </div>

      css样式:

    .content_con{
        margin:0px 20px;
        padding:10px 0;
        border-bottom:1px solid #e7e7e7;
        float: left;
    }
    .content_con>p{
        display: inline-block;
        float: left;
    }
    .content_con>p>img{
        vertical-align: text-top;
    }
    .con{
        display: inline-block;
        vertical-align: text-top;
        float: left;
        margin:0 20px;
    }
    .con>span{
        display: block;
        390px;
    }
    .con>.item{
        font-size:16px;
        font-family:"黑体";
        font-weight:700;
        margin-bottom:20px;
    }
    .con>.item_con{
        font-size:14px;
        font-family:"黑体";
        margin-bottom:20px;
    }
    .con>.item_stats{
        font-size:12px;
        font-family:"黑体";
    }
    .cur>a{
        cursor:pointer;
        color:#388ebb;
        text-decoration: none;
    }
    
    .con_right{
        float: left;
        198px;
        height:150px;
        background-color: #f7f7f7;
    }
    .con_right .gongxian{
        text-align:center;
        display: inline-block;
        198px;
        line-height:40px;
        font-size:16px;
        font-family:"黑体";
        font-weight:bold;
    }
    .con_right>p{
        padding:10px 0px;
        margin:0 20px;
        border-bottom:1px solid #e7e7e7;
        font-size:14px;
        font-family:"黑体";
    }
    .con_right>p>span{
        float: right;
    }

     第二个

    html:

    <div class="footer">
        <div class="footer_con">
            <img src="images/land_footer01.png" alt="">
            <div>
            <p>热线电话:400-000-6060   官方微信:abcdefg   官方微博:abcdefg</p>
            <p>友情链接:中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网</p>
            <p>版权所有:天津市为你实现梦想的网络公司 津ICP备案00000000号</p>
            </div>
        </div>
    </div>

    css:

    .footer{
        border-top:10px solid #ccc;
        border-bottom:1px solid #e7e7e7;
        height:135px;
    }
    .footer .footer_con{
        1200px;
        margin:0 auto;
        
    }
    .footer_con>img{
        vertical-align: middle;
        margin:30px 0;
    }
    .footer_con>div{
        display: inline-block;
        vertical-align: middle;
        overflow: auto;
        font-size:14px;
        font-family:"黑体";
        color:#e7e7e7;
        margin-left:40px;
    }

    理解:

  • 相关阅读:
    8、SpringBoot-CRUD默认访问的首页以及thyleaf的静态文件引入/WebMvcConfigurer / WebMvcConfigurationSupport
    7、springmvc的自动配置
    6、模板引擎
    5.对静态资源映射的规则
    文件的上传和下载
    python file operation
    python sys.argv[]
    python pydoc
    python compile
    python exec
  • 原文地址:https://www.cnblogs.com/socool-hu/p/5633132.html
Copyright © 2011-2022 走看看