新闻网站排版问题

yanchangshan 2018-09-12 09:52:45

请教大家我想做个新闻类的论坛
在首页中我想展示一条条新闻

其中每条新闻可能有图片也可能没有
图片可能就一张也可能三张

我想根据图片有无以及多少自动进行不同的排版
比如有三张图片的新闻直接标题一排放上面三张图片排一排放下面
如果是一张图片就标题放左边图片放右边在一排上

应该怎么做

...全文

1127 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

非专业开发Five 2018-09-17

打赏
举报

引用 9 楼 yanchangshan 的回复:

那后台怎么生成这个HTML呢列子现在很多比如手机打开任意一个浏览器没有访问任意一个网址一般现在的浏览器都自动带些新闻基本就这样排版的

这些就是一些页面啊，你如果跟踪一下程序或者网络有几率可以获取到这些页面的来源和渲染方式的。
后台怎么生成这是你自己要去做的代码啊，page上是可以直接addcontrols的，这里面你可以直接用htmlelement的，所以没什么你做不到的。

以专业开发人员为伍 2018-09-17

打赏
举报

引用 8 楼 hanjun0612 的回复:

你说的只是一个判断逻辑啊。
我看并不需要什么技术。
无论你是在前台排版，还是后台直接生成html。都能搞定。

这是 csdn 的一个问题。许多人都是以为学生刚开始学编程，所以才上 csdn 问。

以专业开发人员为伍 2018-09-17

打赏
举报

“后台怎么生成这个HTML”，那自然就是使用 asp.net 的语法方式，写 if 语句然后调用不同的绑定代码啦。不管你用哪一种 asp.net 服务器端编程教程，你看看教程上如何写 if 判断并且产生不同的输出布局的部分，不就行了嘛！别说是图片个数，就是根据数据类型不同而动态地绑定输出不同的局部内容（例如新闻和投票放在一起）那都是 asp.net 脚本编程知识。学点asp.net 教程，你应该把 csdn 当作启发你理解教程本身的工具，而不要不学 asp.net 教程就直接把 csdn 当作提供免费代码的。

另外，我其实建议你先不要学 asp.net，先专门学习前端（大应用，而不是简单网页）开发。

Mr__Blank 2018-09-17

打赏
举报

两种不同的排版方式，使用if判断就行了

正怒月神版主 2018-09-13

打赏
举报

你说的只是一个判断逻辑啊。
我看并不需要什么技术。
无论你是在前台排版，还是后台直接生成html。都能搞定。

Logerlink 2018-09-13

打赏
举报

可以根据class来区分，然后再根据class来设计样式，无图片，一张图片，三张图片，至于这个class的名称则需要你在渲染数据时，根据图片的数量来选择



<!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>

yanchangshan 2018-09-13

打赏
举报

那后台怎么生成这个HTML呢列子现在很多比如手机打开任意一个浏览器没有访问任意一个网址一般现在的浏览器都自动带些新闻基本就这样排版的

yanchangshan 2018-09-12

打赏
举报

我本来就想用最简单的 gridview之类的能够直接显示出来的

以专业开发人员为伍 2018-09-12

打赏
举报

如果你所采用的编程工具好用，那么你可以根据不同的 case 条件，让代码执行不同的片段，产生不同的 html/DOM 片段。单纯使用 css 是不可能方便地布局的（只能到处贴 <div> 膏药）。

但是根据你采用的编程方式的不同，代码结果完全不同。如果你只要抄代码，那么前提是你要说明你能用好怎样的代码。

以专业开发人员为伍 2018-09-12