css实战案例1：顶部搜索

代码样式：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div class="search_box"><!-- 搜索框--><div class="search">搜索：目的地/酒店/航班</div><a class="user">我的</a></div></body>
</html><style>a{text-decoration: none;}dic {box-sizing: border-box;}.search_box {position: fixed;top: 0;/*居中*/left: 50%;transform: translateX(-50%);/*transform 属性允许你旋转、缩放、倾斜或平移给定元素*/-webkit-transform: translateX(-50%);/*向左平移当前元素长度的一半*//*兼容老浏览器写法*/width: 100%;min-width: 320px;max-width: 540px;height: 44px;display: flex;}.search {flex: 1; /*左边占一份*/height: 26px;line-height: 26px;border: 1px solid #ccc;margin: 7px 10px;border-radius: 5px;position: relative;padding-left: 25px;color: #707070;font-size: 13px;/*下边框阴影：x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色*/box-shadow: 0px 2px 4px rgba(0, 0, 0,.4);}.search::before {content: "";background: url(img/search.png) no-repeat center;width: 20px;height: 20px;background-size:20px;/*使用绝对定位，让他浮出来，不占一行，因为后面还有文字*/top: 3px;left: 3px;position: absolute; /*默认是相对整个body的位置进行绝对定位，如果父级元素加了position: relative，就是相对于父级的位置进行绝对定位*/}/* CSS 伪元素 :before 和 :after 是两个强大的工具，它们允许我们在选定元素的前后插入内容，而无需修改HTML结构。这些伪元素通常与 content 属性一起使用，可以插入文本或图像。*/.user::before {content:"";background: url(img/my.png) no-repeat center;width: 17px;height: 17px;background-size:17px;display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/margin: 0 auto; /*水平居中*/}.user {width: 44px;height: 44px;text-align: center;/*里面的文字水平居中*/font-size: 10px;padding-top: 8px;color: #1296db;}</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/49155.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！