前端开发-HTML+CSS实现网易新闻网右侧新闻列表

实现网易新闻网右侧新闻列表：html5+css3

<!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:silver;}/*去除下划线*/a{text-decoration: none;}/*设置容器的样式*/.news-wrapper{/*设置宽度*/width: 300px;/*设置高度*/height: 357px;/*设置背景颜色*/background-color:#fff;/*设置上边框*/border-top: 1px #ddd solid;margin: 50px auto;}/*设置标题的样式*/.news-title{/*将行内元素转成行内块，为了使边框和文字一样宽*/display: inline-block;/*设置上边框*/border-top: 1px red solid;/*设置上边框上移，盖住灰色边框*/margin-top: -1px;   /*设置高度*/        height: 40px;/*文字垂直居中*/line-height: 40px;}/*设置title中的超链接的样式*/.news-title a{/*设置文字大小*/font-size: 16px;/*设置文字颜色*/color: #40406B;/*文字加粗*/font-weight: bold;}/*设置鼠标移入的状态*/.news-title a:hover{color: red;}/*设置图片容器高度*/.news-img{height: 150px;}/*设置图片标题样式*/.news-img .img-title{/*上移文字*/margin-top: -30px;/*文字右移*/margin-left: 40px;/*设置字体颜色*/color:whitesmoke;/*设置字体加粗*/font-weight: bold;           }/*设置新闻列表*/.news-list{margin-top: 20px;}/*设置li*/.news-list li{margin-bottom: 17px;         }/*设置li中的文字样式*/.news-list li a{/*设置字体大小、颜色*/font-size: 14px;color: gray;}/*设置鼠标超链接移入状态*/.news-list li a:hover{color: red;}/*通过::before伪元素为每个li添加项目符号*/.news-list li::before{/*添加项目符号*/content: "■";/*设置颜色大小边距*/color: rgb(218,218,218);font-size: 12px;margin-right: 4px;}</style>
</head>
<body><!--创建新闻的外部容器--><div class="news-wrapper"><!--创建标题标签--><h2 class="news-title"><a href="#">娱乐</a></h2><!--创建图片容器--><div class="news-img"><a href="#"><img src="./img/03/1.webp" alt="热巴"><h3 class="img-title"> <span>#</span> 迪丽热巴穿工装造型超酷</h3></a></div><!--新闻列表--><ul class="news-list"><li><a href="#">王思聪回应点评半藏森林 和网友对骂</a></li><li><a href="#">豪车配司机！甘薇失信后仍潇洒 背名包逛街</a></li><li><a href="#">网曝杨洋蜡像被年轻女子骚扰</a></li><li><a href="#">丁太昇吐槽郭敬明抄袭 言语粗俗被骂</a></li></ul></div>
</body>
</html>

实现效果：

前端开发-HTML+CSS实现网易新闻网右侧新闻列表相关推荐

1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
前端开发[html+css]的实用网站分享（一）
目录 1.Glassmorphism 玻璃特效生成器 2卡片快速生成器 3.button按钮集合 1.Glassmorphism 玻璃特效生成器 Glassmorphism generator 玻璃特 ...
视频教程-全栈开发之前端开发-HTML5/CSS
全栈开发之前端开发多年互联网从业经验: 有丰富的的企业网站.手游.APP开发经验: 曾担任上海益盟软件技术股份有限公司项目经理及产品经理: 参与项目有益盟私募工厂.睿妙影音家庭物联网设备.手游东方江 ...
html中如何写新闻题目,用DIV+CSS实现网页排版中新闻列表的制作
css代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0p ...
移动端canvas_web前端开发分享-css,js移动篇
随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也 ...
【web前端开发】CSS浮动
文章目录 1.浮动 2.伪元素 3.标准流 4.行内块元素的问题 5.浮动的作用 6.浮动的特点 7.清除浮动方法1:额外标签方法2:单伪元素方法3:双伪元素方法4:overflow 1.浮动 ...
web前端开发-HTML+CSS基础入门课程笔记
https://www.bilibili.com/video/BV1yx411d7Rc?p=3&share_source=copy_web 目录概述术语版本和兼容性开发环境的准备第一 ...
【web前端开发】CSS文字和文本样式
文章目录前言字体大小字体粗细字体样式字体 font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中 ⭐思维导图前言本篇文章主要讲解CSS中的文字和文本样式及一些 ...
Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...
前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...

前端开发-HTML+CSS实现网易新闻网右侧新闻列表

前端开发-HTML+CSS实现网易新闻网右侧新闻列表相关推荐

最新文章

热门文章