新闻列表案例（前端html，css）

去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了

li {list-style : none;}

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>新闻案例</title><style type="text/css">* {margin: 0;padding: 0;}/*取消列表样式*/li {list-style: none;}.box{width: 298px;height: 198px;border: 1px solid #ccc;/*块级盒子水平居中*/margin: 100px auto;/*如果一个盒子给了一个padding值，会撑大盒子*/padding: 15px;background: url(images/line.jpg);}.box h2{font-size: 18px;padding: 5px 0;/*底边框*/border-bottom: 1px solid #ccc;margin-bottom: 10px;}.box ul li{height: 30px;border-bottom: 1px dashed #ccc;line-height: 30px;background: url(images/arr.jpg) no-repeat 5px center;padding-left: 20px;}.box ul li a{font: normal normal 12px 'Microsoft Yahei';color: #333;text-decoration: none;}.box ul li a:hover{text-decoration: underline;}</style>
</head>
<body><div class="box"><h2>最新文章/New Articles</h2><ul><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">体验javascript的魅力</a></li><li><a href="#">jquery世界来临</a></li><li><a href="#">网页设计师的梦想</a></li><li><a href="#">jquery中的链式编程是什么</a></li></ul></div>
</body>
</html>

效果如下：

新闻列表案例（前端html，css）相关推荐

Node.js(一)——(Node.js安装及使用，通过Node.js搭建服务器，模块化及自定义模块，npm/yarn/nvm，内置模块fs的使用，buffer及stream，新闻列表案例)
目录 1.Node.js介绍 2.安装Node.js 3.使用Node.js实现第一个服务器 3.1初步感受Node.js 3.2Google Chrome 默认非安全端口列表,尽量避免以下端口. 3 ...
P35-前端基础-新闻列表
P35-前端基础-新闻列表 1.概述通过一个新闻列表案例,总结前面学习CSS的基础知识. 2.新闻列表案例 2.1.案例用到的图片 2.2.案例代码 <!DOCTYPE html> &l ...
尚硅谷模拟网易新闻列表练习
要求网址:https://news.163.com/ 代码 <!DOCTYPE html> <html lang="en"><head>< ...
【微信小程序】实现新闻列表（文字垂直居上、垂直居下）
新闻列表效果相关原理 CSS 的 absolute 定位值得注意的是,绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>: 代码 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
前端开发-HTML+CSS实现网易新闻网右侧新闻列表
实现网易新闻网右侧新闻列表:html5+css3 <!DOCTYPE html> <html lang="en"> <head><meta ...
CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色背景大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...
用CSS，制作“新闻标题”案例
用CSS,制作"新闻标题"案例 <!DOCTYPE html> <html lang="en"> <head><met ...

新闻列表案例（前端html，css）

去掉列表默认的样式

新闻列表案例（前端html，css）相关推荐

最新文章

热门文章