CSS/HTML制作网易新闻右侧新闻栏的解析及步骤

网易新闻原网站：

效果图：

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网易新闻右侧列表</title><link rel="stylesheet" href="./css/reset.css"><style>body{  /*设置网页背景，方便修改观察制作情况*/background-color: wheat;}.div-item{ /* 将整个新闻栏放入一个块内 */width: 300px;height: 324px;margin-top: 27px;background-color: rgb(252, 250, 250);margin: 50px auto;}.div-item a{  /* 取出超链接的下划线 */text-decoration: none;}.div-item .div1{width: 300px;height: 41px;border-top: 1px #dddddd solid;}.div-item .div2{width: 300px;height: 150px;}.div-item .ul1{width: 300px;height: 120px;margin-top: 12px;}.div-item .h21{      /* 对“体育”标题的设置 */width: 32px;height: 3px;margin-top: -1px;padding-top: 11px;padding-bottom: 10px;border-top: 1px tomato solid;}.div-item .h21 a{ color: black;font-size: 16px;font-weight: bold;}.div-item .div21{width: 300px;height: 40px;/* margin-left: 38px; */margin-top: -24px;}.div-item .h31{           /* 图片新闻文字效果 */width: 300px;height: 40px;font-size: 17px;color: white;font-family:'微软雅黑';font-weight: bold;margin-left: 30px;}.div-item li{            /* 下方新闻列表 */width: 285px;height: 30px;padding-left: 4px;}.div-item li a{    /* 对下方新闻列表的设置 */color: rgb(111, 113, 114);font-size: 14px;padding-left: 2px;}.div-item a:hover{ /* 当鼠标移入新闻条时触发的效果 */color: rgb(252, 62, 62);}.div-item li::before{  /* 项目符号 */content: '■';color: rgb(230, 230, 230);font-size: 4px;}</style>
</head>
<body><div class="div-item"><div class="div1"><h2 class="h21"><a href="">体育</a></h2></div><div class="div2"><a href=""><img src="./img/03/1.jpeg" alt=""><div class="div21"><h3 class="h31">孙铭徽失绝杀！广夏1分惜败吉林</h3></div></a></div><ul class="ul1"><li><a href="">当年的香港飞龙队，CBA史上第一奇葩</a></li><li><a href="">406天没扣篮！格里芬成三分"工具人"</a></li><li><a href="">1.95亿到手！爵士基石彻底放飞 玩命学哈登</a></li><li><a href="">颜丙涛堪称翻版塞尔比 为了胜利"不择手段"</a></li></ul></div>
</body>
</html>

积跬步，至千里！
加油！上学人！

CSS/HTML制作网易新闻右侧新闻栏的解析及步骤相关推荐

前端开发-HTML+CSS实现网易新闻网右侧新闻列表
实现网易新闻网右侧新闻列表:html5+css3 <!DOCTYPE html> <html lang="en"> <head><meta ...
excel表头_Excel如何制作老板喜欢的两栏斜线表头？步骤如下
老板喜欢的表格都是中规中矩的,带有斜线的两栏表头就是其中之一. excel制作两栏斜线表头的方法https://www.zhihu.com/video/1168103971058245632
学完css，做了一个csdn导航栏（一步一步做csdn导航栏，内容满满）
学完css,做了一个csdn导航栏,内容满满步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示知识点完整代码番外:本来打算做 ...
用CSS，制作“新闻标题”案例
用CSS,制作"新闻标题"案例 <!DOCTYPE html> <html lang="en"> <head><met ...
【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
文章目录一.Banner 栏右侧课程盒子测量及样式 1.盒子尺寸测量 2.课程表头部样式 3.列表样式 4.最下方按钮样式二.Banner 版心盒子模型右侧课程栏代码示例 1.HTML 标签结构 ...
css多行多列的新闻模式
css多行多列的新闻模式 1. 最简单的两列 <style> ul { width:250px; list-style:none; } li { width:120px; float:le ...
制作一个简单的新闻客户端
前面的博客中介绍了在Android中实现网络通信,这篇博客将是对前面介绍的技术的一个综合运用,制作一个简单的新闻客户端,在这个新闻客户端中用到了ListView.ListView的优化.使用开源框架访 ...
《前端框架开发技术》HTML+CSS+JavaScript 制作个人简历简单个人主页
源码获取文末联系 Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | ‍个人博客网站 | ‍个人主页介绍 | 个人简介 | 个人博客设计制作 ...
web期末大作业：基于html+css+js制作学校班级网页制作----校园运动会 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...

CSS/HTML制作网易新闻右侧新闻栏的解析及步骤

CSS/HTML制作网易新闻右侧新闻栏的解析及步骤相关推荐

最新文章

热门文章