头条页面
实现步骤-顶部和导航条
- 创建一个html文件
- 创建顶部div标签
- 通过三个a标签实现登录、注册、更多三个超链接
- 设置顶部样式（背景色 行高 文字对齐方式 字体大小 超链接颜色 悬浮 和去除下划线）
- 创建导航条div标签
- 通过img标签引入logo图片
- 通过两个a标签实现首页、科技两个超链接
- 通过font标签实现正文两个字的显示
- 设置导航条的样式（行高）
实现步骤-左侧分享、中间正文、右侧广告图片
- 创建左侧分享div标签
- 通过a标签嵌套img标签和span标签实现图片和文字的显示
- 设置左侧分享样式（宽度、文字水平对齐、浮动、图片大小、文字垂直对齐）
实现步骤-底部页脚
- 创建底部页脚div标签
- 通过a标签实现超链接
- 设置页脚样式（浮动、背景色、文字水平对齐、行高、超链接颜色）
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>头条页面title><link rel = "stylesheet" href = "../css/02.css"/>head>
<body><div class = "top"><a href = "#">登录 a><a href = "#">注册 a><a href = "#">更多 a>div><div class = "nav"><img src = "../img/logo3.png"/><a href = “#”>首页 a>/<a href = “https://www.baidu.com” target = _blank>科技a>/<font color = "grey">正文font><hr/>div><div class = "left"><a href = "#"><img src = "../img/pinglun.png"/><span> 评论span>a><hr/><a href = "#"><img src = "../img/repost.png"/><span> 转发span>a><br/><a href = "#"><img src = "../img/weibo.png"/><span> 微博span>a><br/><a href = "#"><img src = "../img/qq.png"/><span> 空间span>a><br/><a href = "#"><img src = "../img/wx.png"/><span> 微信span>a><br/>div><div class = "center"><div><h1>2万亿蚂蚁暂停上市、退钱的内幕，今天终于能说了，背后博弈的水太深h1>div><div><i><font>作者：HFUT 2088-08-08font>i><hr/>div><div><h3>顶层人士之间的博弈，步步惊心，招招要命。稍有相悖，便会坠入万丈深渊h3>div><div><p>10月24日，马云在CF40论坛演讲，他炮轰中国金融当铺思维，指责因为P2P否定了互联网金融，声称做没有风险的创新就是扼杀创新<li>台下坐着的，可是周小川、易纲以及四大行负责人等金融界大佬。li><li>中国金融系统最有权势的人，都被马云指着鼻子骂了一通。最终，马云的蚂蚁金融上市被突然暂停，2万亿就此泡汤。更有专家在微博表示，蚂蚁金融可能永远也上不了市li><li>英国一家举世闻名的金融媒体Financial Times，将这件事与美国总统大选放在了一起，同在头版大事件中li>p><img src = "../img/image6.png" width = "100%"/>p><b>问题是，马云傻吗？b><p><p><b>照着稿子念的演讲，他身后的智囊团为什么会提出如此激进的观点？马云一定是故意而为之b>p><p><b>近期，一篇揭幕顶层人士博弈的文章流出，直接回答了上述问题。看完以后，不禁觉得政商高层的水真是太深了，可谓颠覆常人认知观。b>p>div>div><div class = "right"><img src = "../img/ad1.png" width = "100%"/><img src = "../img/ad2.png" width = "100%"/><img src = "../img/ad3.png" width = "100%"/>div><div class = "footer"><a href = "#">关于我们a> <a href = "#">帮助中心a> <a href = "#">诚聘英才a> <a href = "#">高价回收a> <a href = "#">法律声明a> <a href = "#">知识产权a> <a href = "#">欢迎举报a> div>body>
html>
.top{background:black;line-height:40px;text-align:right;font-size:20px;
}
a{text-decoration:none;
}
.top a{color:white;
}
.nav{line-height:40px;
}
a:hover{color:red;
}
.left{width:20%;text-align:center;float:left;
}
.left img{width:90px;height:38px;
}
.left span{vertical-align:50%;
}
.center{width:60%;float:left;
}
.right{width:20%;float:left;}
.footer{clear:both; background:blue; text-align:center; line-height:25px; }.footer a{color:white;}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
