|
|
一：了解好我们需要实现的页面
目标图片我们目前就是需要实现的代码部分就是左边的两个栏目块的部分；
二：了解好实现的步骤
首先我们明白代码需要实现的结构为一个大的盒子里面包括了三个小的盒子，在每个小的盒子里面在包括了不同的小的盒子，用来实现不同的内容板块。
三：我们通过代码实现的网页界面
代码实现的新闻列表四：代码部分
<!DOCTYPE html>
/*@深圳风火轮技术团队*/
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0px;
margin:0px;
}
.big{
width:1243px;
height:560px;
background-color:white;
}
.box1{
width:146px;
height:26px;
background-color:white;
font-size:24px;
padding:16px 1090px 18px 7px;
border-bottom:solid;
border-bottom-color:black;
}
.box2{
width:534px;
height:496px;
background-color:white;
}
.box3{
font-size:14px;
list-style-type:disc;
padding:10px 10px 5px 20px;
margin-top:8px;
}
.box4{
width:150px;
height:100px;
background-color:white;
background-image:url("https://t12.baidu.com/it/u=2144736717,163137795&fm=30&app=106&f=JPEG?w=312&h=208&s=F5ECB944081B9A5D4C6CB907030070C9");
background-size:contain;
background-repeat: no-repeat;
padding:30px opx 5px 4px;
margin-right:8px;
margin-top:30px;
}
.box5{
width:150px;
height:68px;
background-color:white;
background-image:url("https://t12.baidu.com/it/u=2420037300,163157977&fm=30&app=106&f=JPEG?w=312&h=208&s=0CF04685561215D41218E59B03006083");
background-size:contain;
background-repeat: no-repeat;
padding:30px 0px 5px 4px;
margin-top:30px;
}
.box6{
width:140px;
height:30px;
font-size:10px;
overflow:hidden;
}
li{
padding:4px;
}
a:link,a:visited{
text-decoration:none; /*超链接无下划线*/
}
a:hover{
text-decoration:underline; /*鼠标放上去有下划线*/
}
</style>
</head>
<body>
<div class="big">
<div class="box1">
<a href="https://m.thepaper.cn/baijiahao_16243578"><p>国际 WORLD</p></a>
</div>
<div class="box2" style="float:left;">
<div>
<ul style="list-style-type:square;font-size:18px;font-weight:bolder;padding:15px 20px 10px 20px;">
<li>
<a href="https://m.thepaper.cn/baijiahao_16243578">51名美国人被制裁后，美国警告伊朗，蓬佩奥松了一口气</a>
</li>
</ul>
<ul class="box3">
<li><a href="https://baijiahao.baidu.com/s?id=1721831347557689393">上台一年，拜登支持率还不如特朗普</a></li>
<li><a href="https://baijiahao.baidu.com/s?id=1721653136118508754">新冠大流行第3年，人类面临着什么</a></li>
<li><a href="https://export.shobserver.com/baijiahao/html/441050.html">没跟美国，这位总统新年首访来中国</a></li>
<li><a href="https://baijiahao.baidu.com/s?id=1721832301828316042">卢比奥被制裁后，又率15名议员抹黑中国，扬言制裁中科院与研究员</a></li>
<li><a href="https://baijiahao.baidu.com/s?id=1721639446091720103">高兴早了？领海面积再次减少，日本一小岛刚开年就沉了</a></li>
</ul>
</div>
<div>
<ul style="list-style-type:square;font-size:18px;font-weight:bolder;padding:20px 20px 5px 20px;">
<li>
<a href="https://baijiahao.baidu.com/s?id=1721817917893001049">法国总统外事顾问博纳为何此时访华？丨</a>
</li>
</ul>
<ul class="box3">
<li><a href="https://baijiahao.baidu.com/s?id=1721823878474767859">国际观察｜疫情通胀都搞不定，拜登上任一年同期支持率比特朗普低</a></li>
<li><a href="https://baijiahao.baidu.com/s?id=1721822853630897659">外媒：八国因拖欠会费失去联合国投票权</a></li>
<li><a href="https://m.thepaper.cn/baijiahao_16270301">应对奥密克戎，最好的武器是...</a></li>
<li><a href="https://m.thepaper.cn/baijiahao_16259161">日本相隔4月，感染者再超1.2万人</a></li>
<li><a href="https://baijiahao.baidu.com/s?id=1721826748032926240">俄罗斯回应美国挑衅：吓不倒我们</a></li>
</ul>
</div>
</div>
<div>
<div>
<div style="">
<h3> 国际图片</h3>
</div>
<div>
<img src="https://t12.baidu.com/it/u=690760278,163162949&fm=30&app=106&f=JPEG?w=312&h=208&s=B711798092F9178668AFE18C0300D09A" alt="印媒：印度“支持北京冬奥”">
<p><a style="text-decoration:underline" href="http://baijiahao.baidu.com/s?id=1721836065160561355" target="_blank" class="item-title" title="印媒：印度“支持北京冬奥”" >
    印媒：印度“支持北京冬奥</a></p>
</div>
</div>
<div>
<div style="float:left;">
<div class="box4">
</div>
<div style="float:none;overflow:hidden;" class="box6">
<a style="text-decoration:underline" href="https://baijiahao.baidu.com/s?id=1721808824050247714">立陶宛民调，出人意料</a>
</div>
</div>
<div style="float:left;">
<div class="box5">
</div>
<div style="float:none;" class="box6">
<a style="text-decoration:underline" href="http://baijiahao.baidu.com/s?id=1721830732460024625">51名美国人被制裁后，美国警告伊朗，蓬佩奥松了一口..</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
|
发表于 2022-1-13 23:46:18
