用DIV+CSS实现图文混排与文字列表一起显示_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:29:44
原创
2138人浏览过

CSS代码

<style>*{ padding:0px; margin:0px;}body{ font-size:12px; line-height:150%; color:#666666}a{ color:#003399; text-decoration:none}a:hover{ color:#999900;}div{ overflow:hidden}.box{ width:300px; margin:10PX auto;}img{ border:0px;}.p5{ padding:5px;}.cle{ clear:both; height:0px;}.m{ border:1px solid #ccc;}.m h2,.m ul li{ height:25px; line-height:25px;}.m h2{ font-size:12px; background:#f7f7f7; padding-left:5px;}.m ul li{ list-style:none; border-top:1px dotted #ddd;background:url(b1.gif) no-repeat 3px 50%; padding-left:20px;}.m .list_1{ margin-bottom:5px;}.m .list_1 span{ float:left; padding-right:8px;}.m .list_1 span img{ border:1px solid #eee;}.m .list_1 p{}</style>
登录后复制
HTML代码
<div class="box"><div class="m"><h2>CSSBBS图片+文字列表</h2><div class="p5"><div class="list_1"><span><a href="http://www.865171.cn"><img  src="20007493_b.jpg"    style="max-width:90%"  style="max-width:90%" / alt="用DIV+CSS实现图文混排与文字列表一起显示_html/css_WEB-ITnose" ></a></span><p><b><a href="http://www.865171.cn">css网站布局实录(第二版)</a></b><br />本书是一本讲述基于web标准的应用css进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合web 2.0标准的css布局设计...</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2200">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679994214881.png" alt="醒文">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2200">醒文</a>
                            <p>文字排版美化生图工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="醒文">
                                <span>60</span>
                            </div>
                        </div>
                        <a href="/ai/2200" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="醒文">
                        </a>
                    </div>
                <div class="cle"></div></div><ul class="list_2"><li><a href="http://www.865171.cn" target="_blank">精通CSS+DIV网页样式布局(附光盘)</a></li><li><a href="http://www.865171.cn" target="_blank">精通CSS:高级Web标准解决方案??图灵...</a></li><li><a href="http://www.865171.cn" target="_blank">CSS禅意花园</a></li><li><a href="http://www.865171.cn" target="_blank">HTML XHTML CSS 基础教程(第6版)</a></li><li><a href="http://www.865171.cn" target="_blank">详解HTML&CSS&JavaScript 语法辞典(专...</a></li><li><a href="http://www.865171.cn" target="_blank">HTML与CSS入门经典(第7版)</a></li><li><a href="http://www.865171.cn" target="_blank">超越CSS:WEB设计艺术精髓</a></li></ul></div><h1>www.865171.cn</h1></div></div>
登录后复制

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号