在首页中 我想展示一条条新闻
其中每条新闻 可能有图片 也可能没有
图片可能就一张 也可能三张
我想根据图片有无以及多少 自动进行不同的排版
比如有三张图片的新闻 直接标题一排放上面 三张图片排一排放下面
如果是一张图片 就标题放左边 图片放右边在一排上
应该怎么做
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
img{height: 75px;width: auto;}
.container{width: 1000px;margin: 0 auto;}
.news .item{position: relative; border: 1px solid blue;}
.oneImg img{position: absolute;left: 0;}
.oneImg strong{display: inline-block;height: 75px;line-height: 75px; margin-left: 10%;}
.moreImg strong{display: block;}
</style>
</head>
<body>
<div class="container">
<div class="news">
<div class="item">
<strong>新闻的标题</strong>
</div>
<div class="item oneImg">
<strong>新闻的标题</strong>
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
</div>
<div class="item moreImg">
<strong>新闻的标题</strong>
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
</div>
<div class="item moreImg">
<strong>新闻的标题</strong>
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
</div>
<div class="item moreImg">
<strong>新闻的标题</strong>
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
</div>
<div class="item">
<strong>新闻的标题</strong>
</div>
<div class="item oneImg">
<strong>新闻的标题</strong>
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
</div>
<div class="item moreImg">
<strong>新闻的标题</strong>
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
<img src="https://avatar.csdn.net/8/A/8/1_yanchangshan.jpg" />
</div>
</div>
</div>
</body>
</html>
1.如果用bootst框架开发网站,某些页面的排版怎么修改都不能达到预期效果,可能是承载这个盒子的元素,没有清除浮动。 2.该框架的样式,有些需要更改时,在CSS中,继承修改即可。不可改库文件的源码,可能会出各种...
新闻特殊排版js效果
作为网页设计师,你的作品就是你专业水平的最好体现方式。所以,无论是参加面试还是个人作品展示,你的网页模型是否能让人眼前一亮,是否能在交互设计或视觉设计方面突出任何一点的优势,是你取得面试机会和赢得客户...
一、 新闻网站概述1. 闻媒体的比较网络传播不仅突破了纸媒体新闻传播的"时间差"障碍,而且打破了电媒体"点对面"的单向传播模式,取而代之的是全新的"点对点"的双向互动的网际传播方式。在电视上,直播是一种节目...
//这个网站其实是自己学习版面设计以及排版过程中,一个实践的网站。 基本的理念是:简单,排版清晰,网站有重点和突出,并通过文字排版形成美观和良好用户体验。 但最后一个并没有完成十分好,并且图片和文字内容...
不论是哪一家新闻app的新闻详情页都有大量的图片和片断性的文字,一直很好奇它排版的具体实现方式,构想过一些办法(富文本之类)发现都不是明智的方法,所以决定研究一下。
h5排版方法排版要解决的问题排版定位 排版要解决的问题 1.使块元素排列在一行(块元素是独占一行的) 2.定位在页面上 排版 1.浮动(float) 浮动作为最常见的两种排版手段最开始被制造的目的却不是用来排版,所以...
页面排版 #shang { border: 1px solid red; width: 100%; height: 100px; background-color: black; } #left { float: left; border: 1px solid red; width: 33.3%; height: 89.5%; background-...
一下为实现代码`在这里插入 图片显示 添加字体背景颜色 <在标题h里直接添加style>效果 使用<span> ...body background="C://Users//DELL//Pictures//Saved Pi...
<!-- 段落 块元素 独占一行--> <p align="对齐方式" >段落</p> <!-- 换行 -->...hr width="宽度" size='粗细' color='颜色' align="对齐方式" noshade="无阴影" />...-- noshade=...
wordpress排版插件Are you looking for a WordPress typography plugin to improve your design? Typography plays an important role in web design. It improves readability and the time users spend on your ...
列表排版目录1 列表类型1.1无序列表1.2 有序列表1.3 自定义列表2 列表相关样式2.1 list-style-type属性2.2 list-style-image属性2.3 list-style-postion属性3 新闻列表的实现3.1 编写HTML文件3.2 编写CSS样式 ...
优化前端页面内容排版 1.访问地址 https://github.com/sofish/typo.css 2.下载 3.文件解压之后 4.将css复制到项目目录 5.进行引入css 加上上图中的属性 6.修改typo.css,将所有组件前面加上.typo,表示在typo的...
word报纸排版样本,可根据自己的需要更改内容
前两周为大家准备了公众号排版的一篇文章,其中有说到一点:“现在排版,我们已经不太需要用到第三方排版工具了。”或许很多骨灰级排版老手也会这么感慨,遥想当年刚接触公众号的时候,后台编辑功能还不齐全,也没有...
每一个新闻、博客等阅读类网站都应该注意文章的内容排版,并且能让用户友好的阅读,比如一些小说网站,会把内容文字变得比较大,高级一点还可以让用户调整字号、背景。 今天设计达人网为大家分享一个网页文章内容...
毕业论文排版教程又到了一年一度的毕业季,每年一到这个时候,毕业论文这个磨人的小妖精就会出来兴风作浪,对广大即将毕业的大学生进行身体和心灵的摧残~~俗话说:无论生活遇到何种困难,但还是要记得,写论文最重要...
这是一款广受编辑追捧的智能排版整理文章的软件,该软件短小精悍,无需安装即可使用。适合新闻采集员、编辑、文摘网及有文章排版需求者。此软件终身免费,100%绿色纯净,不读写注册表不捆绑软件和恶意广告。
大家好,本篇为大家分享ps报纸排版教程:ps报纸文字排版教程,自从丫头上了小学,这作业难度是越爱越高,这不,老师让做一期报纸,下面就是ps报纸排版教程:ps报纸文字排版教程的具体步骤,我学习了好久,也算是在...
书籍排版学习心得 重点 (Top highlight)I was introduced to design in a serpentine fashion. I don’t have any formal training. Instead, I’ve learned everything through the Web, books, and by interacting...
成猿之路学习编程技术,关注这个公众号足够了公众号排版教程做公众号的都知道,公众号的排版的好坏是关键,好的排是阅读量提升的关键,今天给大家分享一波公众号排版的资源。获取方...
可以说,排版是UI设计中最难的部分。在这篇文章中,我会教你一些实用的技巧,你可以在你的项目中使用。 一、考虑用户 我们应该记住,除了美学,我们还有用户。 你需要使用的字体要灵活。你的字体应该提供粗细不同的...
要实现的几个关键点: 自动上滑加载更多,下拉刷新, 如图 原理,每页请求数据,根据下滑,当前页码加一,得到数据进行,数组拼接 原理,每页请求数据,根据下滑,当前页码加一,得到数据进行,数组拼接 ...
CSS代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px; padding: 0px;... background: url(/news/images/line.gif) repeat-x b
中英文排版规范化 API 接口 自动中英文排版、标点符号格式化。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYXi2rmX-1599579237094)...
这套源码整体是红色风格,界面按照科技类自媒体网站的排版方式布局,干净清爽,非常适合国人浏览新闻的习惯,只要你的网站能够按时按量的更新大量的新闻热点,相信很容易就能拥有大流量。 这套源码是使用织梦开源...
排版 (作者:杨政,撰写时间:2019.5.24...有学校、食品、新闻等多种。 3、我们所认识的排版,首先在视觉上他就要统一,在其次我们在做官网后台的时候哪一个不是同一排版的吗?所做的文字、线框、图片都是同一的,...
使用div对网页进行排版 因为div可以理解为是HTML里面的容器,而且div也可以进行嵌套 <!DOCTYPE html> <html> <head> <title>Buju_div</title> <style> body{ m...
微信文章如何自动排版呢?这可是很多小编的排版梦想,...目前有简约风、文艺风、杂志风、家居风、新闻风、党政风等风格的模板供胖友们选择。 胖友们只需要将素材导入到编辑区,点击你想要使用的模板,就可以实现自动...
一、字体的属性 设置字体属性: body{font-family:"Microsoft Yahei"} body{font-family:"Microsoft Yahei","宋体","黑体"} #备选字体可以有无数个,那么浏览器在去解析这个代码的时候,是从左往右解析的,如果没有...