前端学习之网易新闻列表
一、
人麻了，没想到这么复杂，搞了半天也才凑合的水平。
以下为自己编写的代码：
<!DOCTYPE html>·
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #bfa;
}
.abc{
background-color: #fff;
width: 378px;
height: 430px;
}
img{
width: 378px;
}
span{
display: inline-block;
font-size: 30px;
}
a{
color: #666666;
font-size: 14px;
text-decoration: none;
}
.ab{
font-size: 16px;
color: #404040;
display: block;
padding: 15px 0;
}
a:hover{
color: #F04343;
}
div{
height: 30px;
color: #dddddd;
}
</style>
</head>
<body>
<nav class="abc">
<a href="#" class="ab">体育</a>
<img src="C:\data\计算机学习\index3.html\02.CSS\图片\屏幕截图 2022-03-23 214819.png" alt="">
<br><br>
<div>
<span>·</span>
<a href="#">乔治:我爱LA 喜欢喝LBJ一起打球 </a>
</div>
<div>
<span>·</span>
<a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a>
</div>
<div>
<span>·</span>
<a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a>
</div>
<div>
<span>·</span>
<a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a>
</div>
</nav>
</body>
</html>
二、学习：
1. 创建标题记得用 h 标签；
2. 放入图片时，可创建一个图片的容器，eg：<div> ;
3. 文字加粗： font-weight : bold ;
4. a 是行内元素，垂直方向的外边距不能用 ；
5. 运用 before 伪元素给 li 添加项目符号（项目符号可用 v1 在输入法中寻找）；
6. 两个神来之笔： ■设置 ' 体育 ' 的上边框，运用了 display：inline-block ，这样就可以设置其上边框，且使其上边框长度等于字的长度 ；
■ 将 margin-top 的值设置为 -1px，使边框上移！
三、 改正之后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易新闻列表</title>
<link rel="stylesheet" href="C:\data\计算机学习\index3.html\02.CSS\reset.css.css">
<style>
body{
/**/
}
/*设置容器样式*/
.news-wrapper{
width: 300px;
height: 357px;
margin: 50px auto;
background-color: #fff;
/*设置上边框*/
border-top: 1px #ddd solid;
}
/*设置news-title*/
.news-title{
height: 40px;
/*神来之笔：设置'体育'的上边框*/
display: inline-block;
border-top: 1px red solid;
/*神来之笔：通过margin-top将h2上移*/
margin-top: -1px;
}
/*设置news-title的超链接样式*/
.news-title a{
color: #40406B;
/*设置文字的加粗效果*/
font-weight:bold ;
line-height: 40px;
}
/*shezhi图片容器的高度*/
.news-img{
height: 150px;
}
/*设置图片的文字效果*/
.news-img .img-title{
color: #fff;
margin-top: -30px;
font-weight: bold;
margin-left: 30px;
}
/*设置li及其文字*/
.news-list li{
margin-bottom: 17px;
}
.news-list li a{
font-size: 12px;
color: #666;
/*设置项目符号
list-style: style square;
*/
}
/*ul设置左内边距*/
.news-list{
/*padding-left: 14px;*/
margin-top: 10px;
}
/*添加项目符号 运用了before伪元素*/
.news-list li::before{
content: '■';
color: rgb(218, 218, 218);
font-size: 12px;
margin-right: 4px;
}
.news-list li a:hover{
color: red;
}
</style>
</head>
<body>
<!--创建新闻列表容器-->
<div class="news-wrapper">
<!--创建一个标题标签-->
<h2 class="news-title">
<a href="#">体育</a>
</h2>
<!--创建一个图片容器-->
<div class="news-img">
<a href="#">
<img src="C:\data\计算机学习\index3.html\02.CSS\图片\屏幕截图 2022-03-24 130942.png" alt="">
<!--创建图片标题-->
<h3 class="img-title">
费德勒首负迪米 扶额摇头不满发挥
</h3>
</a>
</div>
<!--新闻列表-->
<ul class="news-list">
<li>
<a href="#">乔治:我爱LA 喜欢喝LBJ一起打球</a>
</li>
<li>
<a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a>
</li>
<li>
<a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a>
</li>
<li>
<a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a>
</li>
</ul>
</div>
</body>
</html>
四、
原效果与改正后对比图
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通