效果图
图121376-1：效果图
技术要点
浮动，浮动是脱标的，不占有原有位置。子元素一浮全浮，语法：float: left或float: right,分别是靠左浮动或靠右浮动
定位，相对定位，是相对于自于元素进行定位，是占有原有位置，不脱标，语法：position: relative;绝对定位，是参考有定位的父元素进行定位，不占有原有位置，脱标,语法：position: absolute;固定定位,是以浏览器为目标进行定位，不占有位置，固定定位是特殊的绝对定位，语法：position: fixed;
画圆小技巧，利用边框是长度和宽度的一半进行画圆
图片与文字的对齐方式，vertical-align: middle;
源码：
<html lang="en"> <head> <meta charset="UTF-8"> <title>模仿头条</title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { background: #F8F8F8; } li { list-style: none; } a { text-decoration: none; } .w{ width: 100%; margin: auto; } .header{ height: 60px; margin: 10px auto; background: white; } .logo { float: left; width: 198px; height: 60px; position: relative; } .logo img { left:50%; top:50%; position:absolute; transform:translate(-50%,-50%); } .nav { float: right; width: 500px; height: 60px; margin-right: 70px; } .message { float: left; width: 100px; height: 60px; text-align: center; line-height: 65px; position: relative; } .message img { vertical-align: middle; } .circle { width: 20px; height: 20px; border-radius: 10px; background: red; position: absolute; left: 80px; top: 10px; } .message_count { font-size: 10px; color: white; font-weight: 700; position: absolute; left: 82px; top: -13px; } .info { float: left; width: 200px; height: 60px; margin-left: 10px; text-align: center; line-height: 60px; } .line { float: left; height: 20px; margin-top: 20px; width: 2px; background: #e7e9fc; } .user { float: left; width: 170px; height: 60px; margin-left: 10px; line-height: 60px; font-size: 16px; } .user img{ height: 25px; vertical-align: middle; } </style> </head> <body> <div class="header w"> <div class="logo"> <img src="logo.png"> </div> <div class="nav"> <div class="message"> <img src="message.png"> <span>消息</span> <div class="circle"></div> <span class="message_count">10</span> </div> <div class="info"> 在头条创作的第 1274 天 </div> <div class="line"></div> <div class="user"> <img src="user.png"> <span>程序员COW哥</span> </div> </div> </div> </body> </html>
来源：今日头条
作者：程序员COW哥
点赞：6
评论：2
标题：css模仿今日头条实现工具栏
原文：https://www.toutiao.com/article/7166071249968448011
侵权告知删除：yangzy187@126.com
转载请注明：网创网 www.netcyw.cn/b121376.html
