请选择 进入手机版 | 继续访问电脑版

网页UI-淘宝边框

发表于 2016-12-14 10:52 显示全部楼层 25 984

本帖最后由 赵延明老师 于 2016-12-14 10:52 编辑

简介

网页UI第五讲 淘宝边框。
淘宝官网,很受大家欢迎,设计风格是其一,那么它网站的细节处理也是非常贴心。也就是说我们对于细节处理要格外谨慎。俗话说细节决定成败,那我们来看一下它是怎么实现的。

常见的网页UI效果

效果图3.png

案例效果

案例效果.png

技巧说明

这里使用到的是伪类:hover 边框属性使用的是outline,并非为border,使用方式是一样的。

视频

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				border: none;
			}
			body{
				margin: 10px;
			}
			div{
				width: 200px;
				height: 200px;
				background: pink;
				float: left;
				margin-right: 10px;
			}
			div:hover{
				outline: 1px solid #1E90FF;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>

详细代码

游客,如果您要查看本帖隐藏内容请回复



想了解更多内容,可以点击以下链接:

小码哥官网:http://www.520it.com/

网页UI学院:http://www.520it.com/special/ui


回复 使用道具
举报
蛋黄派

发表于 07-09 11:52 显示全部楼层

来看看学习学习

回复 支持 反对 使用道具
举报
设计师傅

发表于 03-29 08:28 来自手机 显示全部楼层

厉害了
回复 支持 反对 使用道具
举报
scj麦子

发表于 2017-07-20 14:10 显示全部楼层

不错的demo

回复 支持 反对 使用道具
举报
nettman

发表于 2017-02-12 18:57 显示全部楼层

回复 支持 反对 使用道具
举报
懵懂的少年猴哥

发表于 2017-02-12 18:53 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
易文沁

发表于 2017-02-12 02:05 显示全部楼层

回复 支持 反对 使用道具
举报
谁和我同名

发表于 2017-02-11 22:33 显示全部楼层

回复 支持 反对 使用道具
举报
monkeye

发表于 2017-02-10 07:44 显示全部楼层

回复 支持 反对 使用道具
举报
易文沁

发表于 2017-02-10 05:05 显示全部楼层

回复 支持 反对 使用道具
举报
123下一页

发表新文章
赵延明老师

小码哥名师团队

0

学分

3380

学币

3662

积分

小码哥名师团队

Rank: 5Rank: 5

积分
3662

小码哥一周年勋章关注小码哥教育公众号意见领袖勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育