精华内容
下载资源
问答
  • 在word中我们知道如何是文字绕排,但在web页面中如何实现呢?这个就不象word中那么容易...但只要使用好html的元素一样能达到这样的效果。一般绕排有这样几种:文字绕图,文字绕文字等。我想讲的就是这两种。好吧,开始
  • 浮动处理HTML5图文混排

    千次阅读 2017-04-19 18:16:32
    浮动处理图文混排

    1、在日常列表中会用到图文混排的效果,如下图选取今日头条中一个左边文字,右边图片的例子为例:


    2、解决办法:

    ul{padding: 0.5rem;width: 100%;overflow: hidden;font-size: 1.2rem;}
    li{padding: 0.5rem;}
    .right{float: right;}
    .right img{width: 8rem;height: 6rem;}
    .left{padding-right: 9rem;}
    .btns{font-size: 1rem;}

    <ul>
    	<li>
    		<div class="right">
    			<img src="img/index-bg.jpg"/>
    		</div>
    		<div class="left">
    			<p>这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字</p>
    			<p class="btns"><span>评论</span><span>阅读数</span></p>
    		</div>
    	</li>
    </ul>

    3、效果图




    展开全文
  • 图文混排效果实现 1.引入 上一次课程,我们使用栅格布局和ul-li标签实现了简单的导航栏目和菜单栏目的实现,接下来我们使用栅格布局和定义列表标签实现简单的图文混排的效果,这一个效果再电商项目或图片显示较多...

    图文混排效果实现

    1.引入

       上一次课程,我们使用栅格布局和ul-li标签实现了简单的导航栏目和菜单栏目的实现,接下来我们使用栅格布局和定义列表标签实现简单的图文混排的效果,这一个效果再电商项目或图片显示较多的项目中应用较为广泛。

    2.图文混排效果实现

      我们再实现效果的时候还是按照上一次课程讲解的操作步骤一样。

    3.代码以及实现效果

    代码实现以及效果截图

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<style type="text/css">
    			* {
    				margin: 0px;
    				padding: 0px;
    			}
    
    			/**定义基本的弹性布局内容**/
    			.grid {
    				display: flex;
    				flex-flow: row nowrap;
    				justify-content: space-around;
    
    			}
    
    			/**按照比例定义栅格的宽度和收缩比例,这里我们把他划分为8个区域**/
    			.grid-cell-1,
    			.grid-cell-2,
    			.grid-cell-3,
    			.grid-cell-4,
    			.grid-cell-5,
    			.grid-cell-6,
    			.grid-cell-7,
    			.grid-cell-8 {
    				flex-shrink: 1;
    				/*设置收缩比率*/
    				padding: 3px;
    				/*设置内边距*/
    			}
    
    			/**设置扩展比例,也可以认为是所占据的比例的数量**/
    			.grid-cell-1 {
    				flex-grow: 1;
    				/*占据比例数量的1/8*/
    			}
    
    			.grid-cell-2 {
    				flex-grow: 2;
    				/*占据比例数量的2/8*/
    			}
    
    			.grid-cell-3 {
    				flex-grow: 3;
    				/*占据比例数量的3/8*/
    			}
    
    			.grid-cell-4 {
    				flex-grow: 4;
    				/*占据比例数量的4/8*/
    			}
    
    			.grid-cell-5 {
    				flex-grow: 5;
    				/*占据比例数量的5/8*/
    			}
    
    			.grid-cell-6 {
    				flex-grow: 6;
    				/*占据比例数量的6/8*/
    			}
    
    			.grid-cell-7 {
    				flex-grow: 7;
    				/*占据比例数量的7/8*/
    			}
    
    			.grid-cell-8 {
    				flex-grow: 8;
    				/*占据比例数量的8/8*/
    			}
    
    			.box-m {
    				background-color: #00AA00;
    				height: 50px;
    				line-height: 50px;
    				font-size: 20px;
    				color: #ffffff;
    				font-family: "宋体";
    			}
    
    			dd {
    				text-align: center;
    				font-size: 25px;
    				font-family: "宋体";
    				color: #00AA00;
    			}
    
    			.org {
    				color: #cbcbcb;
    				text-decoration: line-through;
    			}
    
    
    
    			.discount {
    				color: #ff5500;
    				font-weight: 900;
    			}
    
    
    			.box-s {
    				background-color: #00AA00;
    				height: 50px;
    				line-height: 50px;
    				font-size: 20px;
    				color: #ffffff;
    				font-family: "宋体";
    				text-align: center;
    			}
    
    			img {
    				width: 100%;
    			}
    </style>
    <div class="grid">
    			<div class="grid-cell-4">
    				<div class="box—m">
    					<dl>
    						<dt><img src="images/葡萄.jpg"></dt>
    						<dd>热销产品:产自新疆吐鲁番的纯甜葡萄</dd>
    						<dd>
    							<span class="org">原价:¥35.00</span>
    							<span class="discount">现价:¥15.00</span>
    						</dd>
    					</dl>
    				</div>
    			</div>
    			<div class="grid-cell-4">
    				<div class="box—m">
    					<dl>
    						<dt><img src="images/葡萄.jpg"></dt>
    						<dd>热销产品:产自新疆吐鲁番的纯甜葡萄</dd>
    						<dd>
    							<span class="org">原价:¥35.00</span>
    							<span class="discount">现价:¥15.00</span>
    						</dd>
    					</dl>
    				</div>
    			</div>
    		</div>
    
    		<div class="grid">
    			<div class="grid-cell-2">
    				<div class="box-s">
    					<dl>
    						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
    						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
    						<dd>
    							<span class="org">原价:¥20.00</span>
    							<span class="discount">现价:¥10.00</span>
    						</dd>
    					</dl>
    				</div>
    			</div>
    			<div class="grid-cell-2">
    				<div class="box-s">
    					<dl>
    						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
    						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
    						<dd>
    							<span class="org">原价:¥20.00</span>
    							<span class="discount">现价:¥10.00</span>
    						</dd>
    					</dl>
    				</div>
    			</div>
    			<div class="grid-cell-2">
    				<div class="box-s">
    					<dl>
    						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
    						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
    						<dd>
    							<span class="org">原价:¥20.00</span>
    							<span class="discount">现价:¥10.00</span>
    						</dd>
    					</dl>
    				</div>
    			</div>
    			<div class="grid-cell-2">
    				<div class="box-s">
    					<dl>
    						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
    						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
    						<dd>
    							<span class="org">原价:¥20.00</span>
    							<span class="discount">现价:¥10.00</span>
    						</dd>
    					</dl>
    				</div>
    			</div>
    </div>

    展开全文
  • Web前端开发 班 级 实训日期 姓 名 学 号 指导教师 李颖云 实训名称 图文混排型网页 实训学时 2 实训成绩 一实训目的(本次上机实践所涉及并要求掌握的知识点) 让学生能熟练掌握Html的文本图像属性掌握图文混排实现...
  • 图文混排

    2021-06-08 18:46:00
    SpannableString简单的图文混排SpannableString spannableString = new SpannableString("点击 按钮有惊喜");ImageSpan imageSpan = new ImageSpan(this,R.mipmap.ic_launcher);spannableString.setSpan(imageSpan,2...

    SpannableString简单的图文混排

    SpannableString spannableString = new SpannableString("点击 按钮有惊喜");

    ImageSpan imageSpan = new ImageSpan(this,R.mipmap.ic_launcher);

    spannableString.setSpan(imageSpan,2,4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

    tv.setText(spannableString);

    Log.i("TextView",tv.getText().toString());

    ddbf7eaaa6c6

    Paste_Image.png

    注意:在setSpan方法中,start和end代表的是图片所占位置的开始和结尾。

    在任意位置插入

    int index = tv.getSelectionStart();

    Editable edit = tv.getEditableText();

    Drawable drawable = BitmapDrawable.createFromPath(resultList.get(0).getPhotoPath());

    int width = drawable.getIntrinsicWidth();

    int height = drawable.getIntrinsicHeight();

    float ratio = (float)height/width;

    deviceWidth = displayMetrics.widthPixels;

    drawable.setBounds(0,0,deviceWidth, (int) (deviceWidth*ratio));

    String str = "\n"+resultList.get(0).getPhotoPath()+"\n";

    SpannableString spannableString = new SpannableString(str);

    ImageSpan imageSpan = new ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BASELINE);

    spannableString.setSpan(imageSpan,1,str.length()-1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

    if(index< 0 || index >=edit.length()){

    edit.append(spannableString);

    }else{

    edit.insert(index+1,spannableString);

    }

    tv.setSelection(index+spannableString.length());

    HTML方式实现图文混排

    Html.ImageGetter getImageGetterInstance() {

    Html.ImageGetter imgGetter = new Html.ImageGetter() {

    @Override

    public Drawable getDrawable(String source) {

    int fontH = (int) (getResources().getDimension(

    R.dimen.textSizeMedium) * 1.5);

    int id = Integer.parseInt(source);

    Drawable d = getResources().getDrawable(id);

    int height = fontH;

    int width = (int) ((float) d.getIntrinsicWidth() / (float) d

    .getIntrinsicHeight()) * fontH;

    if (width == 0) {

    width = d.getIntrinsicWidth();

    }

    d.setBounds(0, 0, width, height);

    return d;

    }

    };

    return imgGetter;

    }

    主要依赖上面这个类,通过书写html代码来实现图文混排,使用img标签和src属性。tv.append(Html.fromHtml("%22+resultList.get(0).getPhotoPath()+%22",getImageGetterInstance(),null));同时注意,source就是在ImageSpan中的那个source。

    展开全文
  • 百度新闻首页的方案:…html结构丑陋,但css简单。新浪微博首页的方案:....CSS:.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px...

    百度新闻首页的方案:

    html结构丑陋,但css简单。

    新浪微博首页的方案:

    ....

    CSS:

    .twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}

    大部分应试者都是这个答案。用了浮动就必须定宽,结构就失去灵活性,同时必须解决浮动带来的一系列问题。

    网易首页方案:

    CSS:

    .list-figure { float: left; _display: inline; width: 130px; margin-left: -140px; margin-top: 6px; }

    这些写法都是欠缺对css基本概念的理解。如果理解block formatting context(块级格式化上下文)的概念, 就不会这么写了。触发了BFC的块级元素,它的边缘不会和float box重叠。

    推荐的方案:

    ...
    ...

    CSS:

    .item .pic { float:left;margin-right:10px; }

    .item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */

    我写的一个实例

    body {

    margin: 0;

    padding: 1em 0;

    background-color: #f3f3f3;

    font:16px/1.7 Arial, Helvetica, sans-serif;

    color:#5a5a5a

    }

    a {

    color: #08c;

    text-decoration: none

    }

    header h1{

    text-align:center

    }

    ul{margin: 0;padding: 0}

    ul li{list-style: none;margin: 0;font-size: 13px;}

    h3{line-height: 1.7;margin: 0}

    .item .pic { float:left;margin-right:10px; }

    .item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */

    左图右内容的效果实现

    总结

    用的不是技术,更多是技巧

    由于在学校里没有系统的前端开发课程,导致对html/css/javascript基本概念的理解非常薄弱。大部分人的学习方式是:先看书,然后觉得书和实践离得很远就直接实践,遇到问题就去网上搜,而搜到的基本都是“技巧”性的东西。或者是跟着学校里的“牛人”学,掺着各种好的、坏的经验全盘接受。比如实现一个左图右内容的显示效果,写出html和css(见下图)。这是我的一道笔试题,看起来很简单吧。但是还没有人答出最佳答案。如果去网上看,国内那些大网站们是怎么实现的,就不能怪他们了。

    展开全文
  • 随着时代的发展,前端开发技术的三要素也演变成为现今的:html5,css3,jquery。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通, 又要与下游的服务器端工程师沟通,需要掌握的技能非常多。这...
  • 用于下面哪一项被称为“代顿协议”:()定义的列为了避免中暑,我们应尽量在上午8:00—11:00,下午1:30—5:00这一时间段进行户外作业,其他时间段应注意防暑。对于经常性抽筋的人而言,需要了解自己的饮食习惯、图文平日...
  • 第3章制作图文混排网页图像也是网页中的主要元素之一,图像不但能美化网页, 而且能够更直观地表达信息。在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。【教学导航】教学目标(1)学会通过“管理站点”...
  •  今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点,然后编写HTML代码,最终应用CSS样式实现最终的效果。列表的效果如图所示: 最顶部是栏目名称“模板无忧 MB5U.com ”与栏目导航...
  • HTML实现图文混排效果

    万次阅读 2018-08-21 09:24:24
    图片属性: hspace 和 vspace 属性可以设置图像周围的空间。 1)hspace 属性可设置或者返回图片的 hspace 属性值。... 注:HTML5 不支持vspace 属性。请使用 CSS 代替。在 HTML 4.01 中的 vspace...
  • html——图文混排

    万次阅读 2016-06-14 14:58:58
    图文混排页面 西安科技大学高新学院         西安科技大学高新学院(Xi'an Kedagaoxin University)简称"西科大高新学院",位于世界历史名城古都西安,是经教育部批准...
  • HTML阶段案例 ——制作图文混排页面

    千次阅读 2019-12-11 22:31:49
    图文混排网页制作 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text"utf-8"/> <title>威海职业学院</title> </head> <body> ...
  • 图文混排,可以使用 dl dt dd(dd 和 dt 是同级,不可以嵌套,没有先后顺序) 1,上面红色部分是标题,可以使用h1里面包含一个span标签,样式一样,所以两个可以一起写。 2,上面黑色部分是属于图文混排,可以...
  • 在TextView中要显示HTML文字是比较轻松的事,但是在其中混上网络图片就变的复杂了起来。本文通过重写getDrawable方法得到drawable实现图文混排效果!
  • DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>愚昧的人类啊</title> <style type="text/css"> .red{color:red; } .green{color:green; } ....
  • 1、展示图片(设置图片大小)的代码可控; 可以监听图片点击事件; 点击图片时可以获取点击的图片url及该图片在全部图片中的position
  • 图文混排模板HTML

    千次阅读 2020-10-14 21:16:54
    后台使用的图文混排插件如:editor、Markman等,得到的页面,前端使用v-html显示的不美观,所以有时候需要前端自己出一个,后端替换文字和图片部分: <!DOCTYPE html> <html lang="en"> <head&...
  • 前端代码(含图文混排)文字环绕、demo代码、效果图 具体效果,请拷贝源码至本地运行查看。...div> body> html> 以上就是关于 “ 前端代码:html、css(图文混排)文字环绕 - 案例篇 ” 的全部内容。
  • H5研究三:图文混排的实现

    千次阅读 2017-07-01 00:37:35
    准备实现两个布局: 1 2 第一个布局: 1 分析:1.... 2.一个时间,用p标签,更改颜色和字体大小,对齐方式为...5.作为整体来看,上下左右相对于整个窗口来看,是有间距的于是代码如下<!DOCTYPE html> <html> <head>
  • Html图文混排系统

    2005-07-13 16:37:29
    绝对酷的纯动力Html版本图文系统! 台登陆:admin_login.asp 用户名和密码:staxp
  • 但只要使用好html的元素一样能达到这样的效果。一般绕排有这样几种:文字绕图,文字绕文字等。我想讲的就是这两种。好吧,开始1.文字绕图如果我们使用正常的,例如:代码如下:这里是普通的。国内的VB网站中vbgood以...
  • css图文混排样式代码

    2021-06-12 07:23:13
    5 } #ployMain dt a { } dd.dishTitle { line-height: 22px; height: 22px; display: block; float: left; margin-left: 20px; color: #efa11c; font-weight: 700; } dd.dishMain { display: block; width: 250px; ...
  • 根据开源库DTCoreText DTRichTextEditor的代码 写了一个中文左右对齐的图文混排,支持视频播放 适用于做新闻客户端

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,694
精华内容 2,277
关键字:

html5图文混排

友情链接: fuzhu.zip