wyr123789
- 浏览: 37787 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
加广告与加封页脚的代码是差不多的！
以前封页脚都是图片现在只是简单的css就可以实现有效减少http请求 加快页面的的加载速度·····
<!D<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS右上角倾斜四十五度封页角效果</title>
<!--<link rel="stylesheet" href="http://demo.lanrenzhijia.com/2016/lanren0812/css/lanren.css">-->
</head>
<style>
.lanren .ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
/* -webkit-transform: rotate(45deg); */
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear,left top,left bottom,from(#BFDC7A),to(#8EBF45));
background-image: -webkit-linear-gradient(top,#BFDC7A,#8EBF45);
background-image: -moz-linear-gradient(top,#BFDC7A,#8EBF45);
background-image: -ms-linear-gradient(top,#BFDC7A,#8EBF45);
background-image: -o-linear-gradient(top,#BFDC7A,#8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.lanren .ribbon-green:before {
left: 0;
}
.lanren .ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.lanren .ribbon-green:after {
right: 0;
}
.lanren .ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;}
.lanren .ribbon-lanren-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.lanren {
margin: 50px auto;
width: 280px;
height: 180px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
</style>
<body>
<div class="lanren">
<div class="ribbon-lanren-green">
<div class="ribbon-green">LANREN</div>
</div>
</div>
</body>
</html>
以前封页脚都是图片现在只是简单的css就可以实现有效减少http请求 加快页面的的加载速度·····
<!D<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS右上角倾斜四十五度封页角效果</title>
<!--<link rel="stylesheet" href="http://demo.lanrenzhijia.com/2016/lanren0812/css/lanren.css">-->
</head>
<style>
.lanren .ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
/* -webkit-transform: rotate(45deg); */
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear,left top,left bottom,from(#BFDC7A),to(#8EBF45));
background-image: -webkit-linear-gradient(top,#BFDC7A,#8EBF45);
background-image: -moz-linear-gradient(top,#BFDC7A,#8EBF45);
background-image: -ms-linear-gradient(top,#BFDC7A,#8EBF45);
background-image: -o-linear-gradient(top,#BFDC7A,#8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.lanren .ribbon-green:before {
left: 0;
}
.lanren .ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.lanren .ribbon-green:after {
right: 0;
}
.lanren .ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;}
.lanren .ribbon-lanren-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.lanren {
margin: 50px auto;
width: 280px;
height: 180px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
</style>
<body>
<div class="lanren">
<div class="ribbon-lanren-green">
<div class="ribbon-green">LANREN</div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 686不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11581.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 471<div class="js_mobile&q ... -
js 规格多选，选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1068<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 345/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 773<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 590<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 530<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 583<!DOCTYPE html> <html& ... -
图形笑脸 增加动画
2016-07-21 15:23 574<!DOCTYPE html> <html& ... -
各种图形
2016-07-21 14:47 485<!DOCTYPE html PUBLIC " ... -
小用例
2016-07-20 17:24 362<!DOCTYPE html> <html& ... -
css3样式
2016-07-15 18:58 472<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 715<!DOCTYPE html> <html& ...
相关推荐
"纯CSS3制作倾斜45度封页角特效"是一个利用CSS3技术实现的独特设计，常用于增强图片或产品列表的展示效果，为用户界面增添了一种精致而专业的视觉感受。 这个特效主要通过CSS3的transform属性来实现，该属性允许...
【纯CSS3制作倾斜45度封页角特效特效代码】是一种常见的网页设计技术，它利用CSS3的新特性来实现视觉上的创新效果。在网页设计中，封页角特效可以为图片或产品列表添加一种独特且专业的外观，使得页面元素显得更加...
这个“纯CSS3制作图片倾斜45度封页角特效源码.zip”文件正是为了帮助开发者创建一个模拟封页角效果的图片倾斜特效。这种效果常用于模拟纸质书籍的页面，增添网站或应用的视觉吸引力和立体感。 首先，我们需要理解...
用户也可以右击图框属性，在属性界面的右上角太阳标识处添加“行高”及“用于行号的字符串”。 4. 添加特殊文本：用户可以通过【插入】——【特殊文本】——【项目属性】弹出的【放置】栏中，点击右侧【…】按钮搜索...
它基于IDE（集成开发环境），提供了一个直观的拖放界面，允许开发者将控件直接放到窗体上，构建用户界面。在这个书封页设计程序中，可能包含了各种控件，如按钮、文本框、图片框等，用于输入书名、作者信息、选择...
Eplan2项目属性的更改与标题页封页的设计 Eplan2是一个专业的 CAD 软件，广泛应用于电气工程、机械设计、建筑设计等领域。项目属性的更改和标题页封页的设计是 Eplan2 中两个非常重要的概念，本文将对这两方面进行...
这个"delphi书封页设计程序完善"项目显然涉及到使用Delphi来创建一个能够设计书籍封面的应用程序。以下是一些关于Delphi和书封页设计程序开发的关键知识点： 1. **Delphi编程基础**：Delphi基于Pascal语言，提供了...
《封页及目录》是我们在阅读和管理文档时不可或缺的一部分，尤其在专业IT领域，一个清晰、详尽的封页和目录能为用户提供快速导航和理解文档内容的关键信息。在这个压缩包“参考资料-封页及目录.zip”中，包含了一个...
EPLAN中如何制作标题页和封页？
首先，封页上的“分发号”是一个关键元素，它通常用来唯一标识每一个程序文件版本，便于跟踪和管理。分发号的设定有助于确保团队成员使用的都是最新的和正确的版本，防止因为版本混乱导致的错误或冲突。 “编制”一...
SSM搭建笔记，新手需要的，无封页
"软件测试模板-缺陷报告封页.doc" 是一个用于规范和标准化缺陷报告格式的模板，确保所有关键信息的完整性和一致性。 首先，缺陷报告封面上包含了一些基本要素： 1. **No: G11234567** - 这是报告的唯一标识号，...
《建筑施工组织2021-封页及目录》涵盖了高速公路建设中预应力薄壁混凝土管桩施工的多个关键环节，旨在提供一个详尽的施工组织设计和实施方案。以下是主要的知识点： 1、**施工进度计划**：施工进度计划是整个工程的...
- 页面边距：上3.5cm，下2.5cm，左2.7cm，右2.7cm。 - 页眉高度2.5cm，页脚1.8cm，装订线0cm。 - 页眉应居中显示“沸腾十五年——张朝阳与搜狐”，字体为5号宋体。 - 页码应位于页面底端居中，使用5号宋体，首页...
3. Bootstrap提供的前端样式，确保用户界面友好且响应式。 4. MySQL作为数据存储，通过jdbc反射实现数据操作的通用化。 5. 针对学生、教师、考试和课程的单表操作，便于管理和查询。 这样的系统设计对于初学者来说...
通常，页面大小为A4纸，页边距设定为上、下2.54厘米，左、右3.17厘米，这提供了一个清晰的阅读区域。 2. **标题设置**：标题应使用二号黑体（Times new Roman），加粗，字符间距根据内容适当地调整，但建议尽量保持...
页边距设置为上2cm，下2cm，左3cm，右3cm，页码居中，页眉内容为项目名称，字体为宋体小五号字。 2. **内容构成**： - **封页**：采用大赛规定的样式。 - **目录**：方便读者快速找到所需信息。 - **摘要**：...