![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
需要引入jQuery，HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
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>
<li class="list">
<div class="time">
<p class="year">
</p>
<p class="date">
</p>
</div>
<div class="content">
<h2>社区邻居多，与您一起过六一！</h2>
<span>发布者：</span><span class="fbz">沈培</span>
<span>浏览次数：</span><span class="llcs">1</span>
<p class="intro">我们都知道那个小小的人会长大，我们能做的不是永久事无巨细的帮助他，而是为他们不断的创造足够成长的空间...</p>
</div>
</li>
<p class="hx"></p>
<li class="list">
<div class="time">
<p class="year">
</p>
<p class="date">
</p>
</div>
<div class="content">
<h2>社区邻居多，与您一起过六一！</h2>
<span>发布者：</span><span class="fbz">沈培</span>
<span>浏览次数：</span><span class="llcs">1</span>
<p class="intro">我们都知道那个小小的人会长大，我们能做的不是永久事无巨细的帮助他，而是为他们不断的创造足够成长的空间...</p>
</div>
</li>
<p class="hx"></p>
</ul>
<p class="add">↓</p>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="adddate.json" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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,..."
}
]
<style>.main{ width:500pxheight:500pxborder:1px solid #000}
</style>
<div class="main">
<img src="aaa.png" style="float:left"/>
文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域</p>
</div>
你把src="aaa.png"这个图片地址换成你自己的吧，这个是我自己测试用的一个地址；已经实现了你说的效果；你复制粘贴一下看看效果吧；
