利用html编写网站中的新闻快报模块

一、结构分析

二、代码编写

三、代码分析

四、注意事项

1、编写style样式时，首先要整体去除内、外边距、项目符号类型、文本修饰

2、在给文字设背景或者边框时，一定要注意包裹文字的标签类型，然后决定是否要进行标签类型转换，因为行内标签无法设置背景的宽和高

3、如果不进行span标签类型转换，可以通过设置pandding内间距也能实现同样效果

4、注意单层文本的省略号是如何设置的

五、最终浏览器编译结果

一、结构分析

编写代码之前首先要进行结构分析，如下右图

1、红线代表整个盒子模块的最外层；

2、上方绿线代表标题模块，下方绿线为列表内容区；

3、蓝线可以看成每个列表项；

4、黑线表示每个列表项里的具体内容。

二、代码编写

<!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>* {margin: 0;padding: 0%;list-style: none;text-decoration: none;}.news {margin-left: 100px;margin-top: 100px;width: 190px;height: 130px;            }h4 {color: #333;font-size: 14px;margin-bottom: 5px;}h4>a {color: #999;font-size: 12px;padding-left: 56px;}li {width: 160px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}li>a>span:first-child {/* 在给文字设背景或者边框时，一定要注意包裹文字的标签类型，然后决定是否要进行标签类型转换 */display: inline-block;width: 35px;height: 16px;background-color: rgba(225, 37, 27, .08);color: #e1251b;font-size: 12px;line-height: 16px;text-align: center;}li>a>span:last-child {color: #666;font-size: 12px;}a>span:last-child:hover {color: #e1251b;}a:hover {color: #e1251b;}</style>
</head><body><div class="news"><h4>京东快报<a href="#">更多&gt;</a></h4><ul><li><a href="#"><span>热门</span><span>重新定义旗舰处理器，AMD锐龙9 7950X究竟有多强</span></a></li><li><a href="#"><span>最新</span><span>总吃外卖要及时补充营养，汤臣倍健营养品来了</span></a></li><li><a href="#"><span>热评</span><span>重新定义旗舰处理器，AMD锐龙9 7950X究竟有多强</span></a></li><li><a href="#"><span>HOT</span><span>红米商务笔记本测评，让你体验出彩的轻薄猛机</span></a></li></ul></div>
</body>
</html>

三、代码分析

1、首先使用div块标签包住整个内容区，即红色外框线；

2、“京东快报”所在栏是标题栏，所以使用H标签，注意后面的超链接“更多”也要包在H标签内；

3、标题下方为列表内容区，使用ul列表标签；

4、li标签要包含两个span行内标签，因为需要代表不同类型的内容。

四、注意事项

1、编写style样式时，首先要整体去除内、外边距、项目符号类型、文本修饰

2、在给文字设背景或者边框时，一定要注意包裹文字的标签类型，然后决定是否要进行标签类型转换，因为行内标签无法设置背景的宽和高

3、如果不进行span标签类型转换，可以通过设置pandding内间距也能实现同样效果

4、注意单层文本的省略号是如何设置的

五、最终浏览器编译结果

利用html编写网站中的新闻快报模块相关推荐

java jmf 视屏监控的核心代码_Java中利用JMF编写摄像头拍照程序_java
我把程序分为两种,有趣的和无趣的,最近做了几个有趣的项目,其中一个,应当就算是摄像头拍照程序了.用于现场拍照,生成照片,主要用到java Media Framework(JMF). 首先到SUN下载最 ...
网络推广专员敲黑板了，教你网站优化中如何更好地编写网站标题？
网站首页的标题是本网站中权重最高的标题,所以网络推广专员对于网站标题的设置优化人员也要格外的上心很重视,因为优质的网站标题能更好的表达网站主题,吸引用户浏览以及提高网站权重等等,那么对于网站的标题该如 ...
利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览
### 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览 http://segmentfault.com/a/1190000002583569 转载于:https://www.cnb ...
python爬虫简单实例-Python 利用Python编写简单网络爬虫实例3
利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错实验目的获取目标网站"http://bbs.51tes ...
利用HttpSessionListener实现网站在线人数统计功能
为什么80%的码农都做不了架构师?>>> 在网站中经常需要进行在线人数的统计.过去的一般做法是结合登录和退出功能,即当用户输入用户名密码进行登录的时候计数器加1,然后当用户点击 ...
用ASP.NET编写一个在线RSS新闻聚合器
概要本文讲解了如何使用 XML Web 控件获取远程XML数据并在 ASP.NET 页面显示这些XML数据,以及使用Repeater控件发布数据库中的XML数据.在过去的几年间,随着异构平台间共享 ...
基于asp.net+vbscript+wsc编写网站
1.前言 asp大家应该都比较熟悉,就是一个动态服务器页面,有点类似于jsp.只是不同的是asp可以在IIS服务器上创建,并且如果配置了.net环境的话,那么就可以在asp里面<%%>写v ...
Truffle - 2 利用Truffle编写、测试智能合约并将其部署到不同的测试网络
2 利用Truffle编写.测试智能合约并将其部署到不同的测试网络 2.1创建项目建一个文件夹 mkdir truffle-project truffle init //初始化qinjianquan ...
警惕！国内已有5000余个网站中招！关于一种大规模的暗链劫持流量的风险提示
近期,安恒信息中央研究院零壹实验室.回声实验室共同监测发现一种新型全局劫持的暗链植入行为,区别于传统的全局劫持,本次暗链植入手段隐蔽性极强,针对不同访问对象.不同页面设计了不同的响应方式.据不完全统计 ...

利用html编写网站中的新闻快报模块

一、结构分析

二、代码编写

三、代码分析

四、注意事项

1、编写style样式时，首先要整体去除内、外边距、项目符号类型、文本修饰

2、在给文字设背景或者边框时，一定要注意包裹文字的标签类型，然后决定是否要进行标签类型转换，因为行内标签无法设置背景的宽和高

3、如果不进行span标签类型转换，可以通过设置pandding内间距也能实现同样效果

4、注意单层文本的省略号是如何设置的

五、最终浏览器编译结果

利用html编写网站中的新闻快报模块相关推荐

最新文章

热门文章