HtmlCSS小案例实战,开发百度新闻

白癜风治疗中心 http://news.39.net/bjzkhbzy/171213/5927648.html

在网上我们经常看到非常多的新闻列表页,在百度新闻、搜狐、新浪平台下访问新闻页面都可以看到的栏目页面,在上图就可以看出效果图!废话不多说,今天带着大家来一起看看吧!

第一:构建长方形盒子,并设置水平居中

1、操作步骤如下:

分步骤理解:

(1)、在页面构建一个class名为news的div盒子

divclass="news"/div

(2)、给盒子添加宽度,高度,背景色

.news{width:px;height:px;background-color:red;}

(3)、去掉body默认的外边距margin样式

body{margin:0;}

(3)、设置盒子在水平居中,并且与浏览器顶部有50px外边距

.news{margin:50pxauto0px;}

2、代码如下:

styletype="text/css"body{margin:0;}.news{width:px;height:px;background-color:red;margin:50pxauto0px;}/stylebodydivclass="news"/div/body

3、效果如下:

第二、给盒子添加边框线,同时设置内边距

(1)、给.news添加边框线

.news{border:1pxsolid#ddd;}

(2)、给.news添加内边距,同时修改宽度

.news{width:px;/*把宽度从调整到*/padding:15px;/*四个不同方向的内边距*/}

(3)、注释或删除刚开始给.news添加的红色背景

.news{/*background-color:red;*/}

2、代码如下:

styletype="text/css"body{margin:0;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}/stylebodydivclass="news"这个内容用来模拟添加了padding内边距后,内容与盒子边框线之间产生的间距/div/body

3、效果如下:

第三:添加h3标签,制作新闻标题

操作方式

1、在.news中添加h3标签

divclass="news"h3百度新闻热榜/h3/div

2、去掉h3默认自带的外边距margin

body,h3{margin:0;}

3、修饰h3中的文字样式如下:

.newsh3{font-size:20px;}

运行代码

styletype="text/css"body,h3{margin:0;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;}/stylebodydivclass="news"h3百度新闻热榜/h3/div/body

效果如下:

第四:利用ul无序列表来制作新闻列表

操作方式

1、在.news中添加ul无序列表,同时每个li中的文字用a标签包裹

divclass="news"h3百度新闻热榜/h3ulliahref=""1全国人代会第二次全体会议热?/a/liliahref=""2美官员承认美国在乌生物实验室有料/a/liliahref=""3组关键词读懂“两高”报告热/a/liliahref=""4建议独生子女父母退休金上调10-20%新/a/liliahref=""5昨日新增本土确诊例无症状例热/a/liliahref=""6陕西新增10例本土确诊病例新/a/liliahref=""7新冠或致大脑萎缩使人提前老10岁/a/liliahref=""8代表:45岁退休利于减少晚婚晚育/a/li/ul/div

2、去掉ul自带的默认样3、给每个li添加如下样式

.newsulli{height:35px;line-height:35px;font-size:16px;border:1pxsolidred;}

4、控制a标签样式,去掉下划线和更改文字颜色

.newsullia{text-decoration:none;color:#;}

5、添加鼠标滑上去的效果

.newsullia:hover{color:red;}

代码如下

styletype="text/css"body,h3{margin:0;}ul{margin:0px;padding:0px;list-style:none;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;}.newsulli{height:35px;line-height:35px;font-size:16px;border:1pxsolidred;}.newsullia{text-decoration:none;color:#;}.newsullia:hover{color:red;}/stylebodydivclass="news"h3百度新闻热榜/h3ulliahref=""1全国人代会第二次全体会议热?/a/liliahref=""2美官员承认美国在乌生物实验室有料/a/liliahref=""3组关键词读懂“两高”报告热/a/liliahref=""4建议独生子女父母退休金上调10-20%新/a/liliahref=""5昨日新增本土确诊例无症状例热/a/liliahref=""6陕西新增10例本土确诊病例新/a/liliahref=""7新冠或致大脑萎缩使人提前老10岁/a/liliahref=""8代表:45岁退休利于减少晚婚晚育/a/li/ul/div/body

运行效果:

第五、控制每条新闻前面序号的样式

实现方法

1、用span标签把每个li前面的数字包裹起来

divclass="news"h3百度新闻热榜/h3ulliahref=""span1/span全国人代会第二次全体会议热?/a/liliahref=""span2/span美官员承认美国在乌生物实验室有料/a/liliahref=""span3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表:45岁退休利于减少晚婚晚育/a/li/ul/div

2、给每个span加上向右的外边距

.newsullispan{margin-right:10px;}

3、控制span中字体的样式如下:

newsullispan{font-size:16px;font-weight:bold;}

4、单独控制前三项span的颜色。我们可以单独给前三个span加上不同的class名,然后单独添加颜色

divclass="news"h3百度新闻热榜/h3ulliahref=""spanclass="col1"1/span全国人代会第二次全体会议热?/a/liliahref=""spanclass="col2"2/span美官员承认美国在乌生物实验室有料/a/liliahref=""spanclass="col3"3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表:45岁退休利于减少晚婚晚育/a/li/ul/div

5、单独控制前三个序号颜色

.col1{color:red;}.col2{color:#ff5c55;}.col3{color:#ffa;}

完整代码

styletype="text/css"body,h3{margin:0;}ul{margin:0px;padding:0px;list-style:none;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;}.newsulli{height:35px;line-height:35px;font-size:16px;border:1pxsolidred;}.newsullia{text-decoration:none;color:#;}.newsullia:hover{color:red;}.newsullispan{margin-right:10px;font-size:16px;font-weight:bold;}.col1{color:red;}.col2{color:#ff5c55;}.col3{color:#ffa;}/stylebodydivclass="news"h3百度新闻热榜/h3ulliahref=""spanclass="col1"1/span全国人代会第二次全体会议热?/a/liliahref=""spanclass="col2"2/span美官员承认美国在乌生物实验室有料/a/liliahref=""spanclass="col3"3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表:45岁退休利于减少晚婚晚育/a/li/ul/div/body

实现效果:

第六步:消除每条新闻底部的边框线,还有标题与新闻列表间的空隙

操作步骤

1、把每个li的边框样式修改成如下

.newsulli{/*border:1pxsolidred;*/border-bottom:1pxdotted#ddd;}

2、给h3标签,添加向下的外边距

.newsh3{margin-bottom:20px;}

3、把最开始给.news添中的高度注释或删除

.news{/*height:px;*/}

完整代码如下:

styletype="text/css"body,h3{margin:0;}ul{margin:0px;padding:0px;list-style:none;}.news{width:px;/*height:px;*//*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;margin-bottom:20px;}.newsulli{height:35px;line-height:35px;font-size:16px;/*border:1pxsolidred;*/border-bottom:1pxdotted#ddd;}.newsullia{text-decoration:none;color:#;}.newsullia:hover{color:red;}.newsullispan{margin-right:10px;font-size:16px;font-weight:bold;}.col1{color:red;}.col2{color:#ff5c55;}.col3{color:#ffa;}/stylebodydivclass="news"h3百度新闻热榜/h3ulliahref=""spanclass="col1"1/span全国人代会第二次全体会议热?/a/liliahref=""spanclass="col2"2/span美官员承认美国在乌生物实验室有料/a/liliahref=""spanclass="col3"3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表:45岁退休利于减少晚婚晚育/a/li/ul/div/body

运行效果

如有相关前端方面的技术问题,欢迎加


转载请注明:http://www.aierlanlan.com/tzrz/376.html

  • 上一篇文章:
  •   
  • 下一篇文章: