div css 这种效果咋做的

发布网友发布时间：2022-04-21 21:28

我来回答

共6个回答

热心网友时间：2022-04-19 09:52

需要引入jQuery，HTML代码如下：

<!DOCTYPE html>

<html>

<head>

ul,

li,

p {

margin: 0;

padding: 0;

list-style: none;

}

.time {

width: 10%;

height: 110px;

background-color: beige;

text-align: center;

padding-top: 60px;

margin-right: 10px;

}

.time p {

font-size: 26px;

color: skyblue;

}

.list {

width: 100%;

height: 200px;

margin-bottom: 5px;

}

.time,

.content {

float: left;

}

.content {

width: 80%;

border: 1px solid transparent;

}

.content span {

font-size: 18px;

}

.content .intro {

font-size: 22px;

margin-top: 10px;

}

.hx {

border-bottom: 1px solid #808080;

margin-bottom: 42px;

}

.add {

height: 100px;

background: darkgray;

text-align: center;

line-height: 100px;

font-size: 30px;

}

</style>

</head>

<body>

<ul>

</p>

</p>

</div>

<h2>社区邻居多，与您一起过六一！</h2>

<p class="intro">我们都知道那个小小的人会长大，我们能做的不是永久事无巨细的帮助他，而是为他们不断的创造足够成长的空间...</p>

</div>

</li>

</p>

</p>

</div>

<h2>社区邻居多，与您一起过六一！</h2>

<p class="intro">我们都知道那个小小的人会长大，我们能做的不是永久事无巨细的帮助他，而是为他们不断的创造足够成长的空间...</p>

</div>

</li>

</ul>

var year = new Date().getFullYear();

var month = new Date().getMonth() + 1;

var day = new Date().getDate();

var str = month + "-" + day;

$(".year").html(year);

$(".date").html(str);

//点击一次就调用json里的一条数据

var i = 0;

$(".add").click(function() {

for (var k = 0; k < 2; k++) {

//创建一个li

var eleli = document.createElement("li");

//创建li里面的两个div

var elediv1 = document.createElement("div");

var elediv2 = document.createElement("div");

//创建p标签

var elep1 = document.createElement("p");

var elep2 = document.createElement("p");

//创建h2标签

var eleh2 = document.createElement("h2");

//创建两个span标签

var elespan1 = document.createElement("span");

var elespan2 = document.createElement("span");

//创建一个p标签

var elesp3 = document.createElement("p");

//创建一个hr标签

var elehr = document.createElement("hr");

//动态添加了li,并添加了class=list属性

var newli = $("body ul").append(eleli).children().last().addClass("list");

//往li里添加两个div

newli.append(elediv1).append(elediv2);

$("ul li:last").children().first().addClass("time");

$("ul li:last").children().last().addClass("content");

//往第一个div里添加两个p标签

$("ul li:last div:first").append(elep1).append(elep2);

//给两个p标签添加class属性分别是year和date,并赋值

$("ul li:last div:first").children().first().addClass("year").html("2019");

$("ul li:last div:first").children().last().addClass("date").html("08-27");

//获取最后一个li中的最后一个div元素

$("ul li:last div:last").append(eleh2);

//调用json里的数据作为标题

$("ul li:last div:last").children().first().html(arr[i].title);

//添加两个span

$("ul li:last div:last").append(elespan1).append(elespan2);

$("ul li:last div:last").children("span").first().addClass("fbz").html("发布者：" + arr[i].author +

" ");

$("ul li:last div:last").children("span").last().addClass("llcs").html("浏览次数：" + arr[i].manay);

$("ul li:last div:last").append(elesp3);

$("ul li:last div:last").children().last().addClass("intro").html(arr[i].content);

$("ul").append(elehr).children().last().addClass("hx");

i++;

}

})

</script>

</body>

</html>

adddate.json代码如下：

var arr = [

{

"id":1,

"author":"小马",

"title":"哈哈哈，这是一个标题1",

"manay":"20",

"content":"百度知道是由全球最大的中文搜索引擎百度自主研发、基于搜索的互动式知识问答分享平台。用户可以根据自身的需求,有针对性地提出问题;同时,这些答案又将作为搜索结果1,..."

}

{

"id":2,

"author":"小皮",

"title":"哈哈哈，这是一个标题2",

"manay":"80",

"content":"百度知道是由全球最大的中文搜索引擎百度自主研发、基于搜索的互动式知识问答分享平台。用户可以根据自身的需求,有针对性地提出问题;同时,这些答案又将作为搜索结果2,..."

{

"id":3,

"author":"小瓜",

"title":"哈哈哈，这是一个标题3",

"manay":"200",

"content":"百度知道是由全球最大的中文搜索引擎百度自主研发、基于搜索的互动式知识问答分享平台。用户可以根据自身的需求,有针对性地提出问题;同时,这些答案又将作为搜索结果3,..."

{

"id":4,

"author":"小习",

"title":"哈哈哈，这是一个标题4",

"manay":"2000",

"content":"百度知道是由全球最大的中文搜索引擎百度自主研发、基于搜索的互动式知识问答分享平台。用户可以根据自身的需求,有针对性地提出问题;同时,这些答案又将作为搜索结果4,..."

}

]

追问愁死了，谁快给我弄好，立即给分
adddate.json代码写在里面是吧？你写的这个是从后台调用的？在网上下载这两JS就行了是吧
jquery.min.js 。adddate.json"

追答adddate.json是一个单独的文件，里面放上面我提到的代码，然后在HTML中用引用就行。

我写的是从json文件中读取的。
jquery.min.js 从网上下载

adddate.json 是我自己写的

热心网友时间：2022-04-19 11:10

用jquery的显示隐藏就可以做到。新闻列表只显示前两个，其他的全部隐藏掉，点击按钮，显示隐藏的内容。

css样式
.b{
display:none
}
#a{
height:20px;
background-color:#aaa;
text-align:center;
}
html代码
<div id="c">

<div>文字文字文字文字</div>
<div>文字文字文字文字文字</div>
<div class="b">文字文字文字文字文字</div>
<div class="b">文字文字文字文字</div>
</div>
<div id="a">点我</div>
js代码
<script>
$("#a").click(function() {
$("。b").toggle(500)
})
</script>
大概的东西就是这样，具体的根据你的需求去修改

热心网友时间：2022-04-19 12:45

现在这种都是前端定义好样式和div新闻框,然后用ajax异步调用后台接口获取数据,然后在前端渲染的.
$.ajax({
url:'news/addNews', // 后台接口
data:{total:2}, //每次加载2条,或者其他的条件
type:'POST', // POST请求
dataType:'json', //返回数据使用json格式
success:function(data){ // 这个data是后台返回的数据,假设返回的是 {"state":true,"addNews":{"total":1,"news":[{"id":"1","title":"新闻1","zhengwen":"新闻正文"}]}}
if(data.state){
var total=data.addNews.total;
var news =data.addNews.news;
if(total>0){
//然后根据前端定义好的新闻模块div ,把news的内容添加进去
var html= "" ;//这里是定义好的新闻div,也可以copy上面的div代码,把新闻的标题呀正文呀都给替换了

$("#newslIST").append(html);//把新增新闻添加到 <div id='newslIST'></div> 中
}else{
alert('没有新闻了.');
}
}

}

});

热心网友时间：2022-04-19 14:36

这不是隐藏然后点击展开 , 这是用点击向下箭头触发 ajax异步请求, 请求页面获取新闻内容 , 也就是查数据库之类的 , 每次请求1-N条数据 .无限加载 , 就会出现这个效果 , 网页链接参考网址

热心网友时间：2022-04-19 16:44

一般新闻多的话，直接会请求后台传输数据过来，直接追加到现有新闻后面。一直按照这个进行操作。毕竟一次性加载到页面，然后控制显示隐藏，数据量大的话耗费资源。

热心网友时间：2022-04-19 19:09

用jquery的显示隐藏就可以做到。新闻列表只显示前两个，其他的全部隐藏掉，点击按钮，显示隐藏的内容。

css样式

.b{

display:none

}

#a{

height:20px;

background-color:#aaa;

text-align:center;

}

html代码

文字文字文字文字

文字文字文字文字文字

文字文字文字文字文字

文字文字文字文字

点我

js代码

$("#a").click(function() {

$("。b").toggle(500)

})

大概的东西就是这样，具体的根据你的需求去修改