仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 640|回复: 7
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS实例教程:Border属性制造小三角

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-15 23:35:50 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
网页制造POLUOLUO文章简介:用css的border属性完成三角.
细心揣摩了一下使用的仍是很奇妙的,在实际的前端开辟中也很有效,最少能够减小图片的字节。
先看看使用实例吧:

完成的本来就是:在一个宽高为0像素的块状元素中设置border属性,比方
.box{
width:0px;
height:0;
border-bottom:50px#F00solid;
border-left:50px#03Fsolid;
border-right:50px#F90solid;
border-top:50px#6C0solid;
}
在扫瞄器中的显现如图:

如许就有高低摆布四个三角形了,再把除要用的三角外的其他3个三角(border)色彩设置为背景致就ok了。
比方如许就可以失掉一个色彩为#CCC的向上的三角:
.to-top{
display:block;
overflow:hidden;
width:0px;
height:0px;
border:6pxsolid#ccc;
border-color:#ccc#fff;
border-width:06px6px6px;
}

另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
admin 该用户已被删除
7#
发表于 2015-3-22 18:48:41 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
若天明 该用户已被删除
6#
发表于 2015-3-15 23:54:52 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
不帅 该用户已被删除
5#
发表于 2015-3-8 11:53:39 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-2-26 03:12:39 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
冷月葬花魂 该用户已被删除
板凳
发表于 2015-2-8 20:04:19 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
小妖女 该用户已被删除
沙发
 楼主| 发表于 2015-2-3 05:07:47 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
再见西城 该用户已被删除
楼主
发表于 2015-1-17 23:30:19 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-17 04:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表