css设计文本框及按钮样式(CSS仿网易首页的头部菜单栏按钮和三角形制作方法)
类别:Web前端 浏览量:269
时间:2022-01-16 00:44:58 css设计文本框及按钮样式
CSS仿网易首页的头部菜单栏按钮和三角形制作方法我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说:
网易首页的头部菜单栏中,也会有这样的三角形
当鼠标经过时,三角形会垂直翻转,如下
现在我分享制作三角形的做法,主要是利用边框做成的
首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形
源代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>正方形</title>
- <style>
- .li{
- width: 0px;
- height: 0px;
- border-top:50px solid red;
- border-bottom:50px solid green;
- border-left:50px solid yellow;
- border-right:50px solid blue;
- /*注意:四条边框的宽度必须相同!*/
- }
- </style>
- </head>
- <body>
- <li class="li"></li>
- </body>
- </html>
效果如下:
现在,要把其中一个三角形取出来,其实就是要把其他的隐藏掉
源代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>制作三角形箭头</title>
- <style>
- .arrow{
- width:0;
- height:0;
- border-top:50px solid #000; /*设置并显示上边框*/
- border-bottom:none; /*不设置下边框*/
- border-left:50px solid transparent; /*设置但隐藏左边框*/
- border-right:50px solid transparent; /*设置但隐藏右边框*/
- }
- .arrow:hover{
- border-top:none; /*鼠标经过时,不设置上边框*/
- border-bottom:50px solid #000; /*鼠标经过时,设置并显示下边框*/
- }
- </style>
- </head>
- <body>
- <li class="arrow"></li>
- </body>
- </html>
效果如下:
接下来,我分享一种按钮的做法
主要是利用边框样式、盒子阴影和伪类效果来实现的
源代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS制作按钮</title>
- <style type="text/css">
- .btn{
- width:100px;
- height:100px;
- background:#ccc;
- border-radius:50%;
- box-shadow:5px 5px 10px #000; /*设置外阴影*/
- }
- .btn:active{
- background:#bbb;
- box-shadow:5px 5px 10px #000 inset; /*设置内阴影*/
- }
- .btn li{
- font-size:30px;
- font-family:"微软雅黑";
- color:blue;
- float:left;
- margin-top:28px;
- margin-left:20px;
- }
- </style>
- </head>
- <body>
- <li class="btn">
- <a href="###">
- <li>开始</li>
- </a>
- </li>
- </body>
- </html>
效果:
您可能感兴趣
- css3所有动画(CSS3常见动画的实现方式)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- css盒子模型有什么用处(深入理解CSS中的盒子模型)
- css中px是什么单位(CSS中px em rem区别与使用)
- css选择器知识汇总(在Less中写IE的css hack的方法介绍)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- css3经典动画效果(CSS3 3D位移translate效果实例介绍)
- html怎么去除css边框(Html/CSS前端实现文字边框阴影效果)
- webpack打包后css路径(Webpack 中 css import 使用 alias 相对路径的方法)
- css如何制作动画效果(CSS制作三角形广告引导文字效果)
- css边框样式讲解(纯css实现动态边框的示例代码)
- css下填充代码(CSS学习笔记之常用Mixin封装实例代码)
- css3实现凸起效果(CSS3轻松实现圆角效果)
- class对应的css(CSS的class与id常用的命名规则)
- css3画出苹果手机(基于CSS3画一个iPhone)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
热门推荐
- python3标准库资源(Python3标准库总结)
- mysql拆分成多行(mysql单字段多值分割和合并的处理方法)
- 织梦dedecms网站后台数据(DEDECMS织梦系统的会员调用方法详细介绍)
- django数据库详解(Django页面数据的缓存与使用的具体方法)
- 阿里云mysql配置升级注意事项(详解如何在阿里云上安装mysql)
- python简单代码实例(Python实现 版本号对比功能的实例代码)
- python 自定义获取文件目录(Python使用os.listdir和os.walk获取文件路径与文件下所有目录的方法)
- 远程给docker容器执行命令(Docker命令让普通用户能够执行的实现)
- phpredis存储对象(PHP使用redis位图bitMap 实现签到功能)
- 组态王如何做按钮弹框(Ratchet 模态框的实现)