CSS
靳小霞
分享是快乐的
展开
-
css js jquey 实现大转盘抽奖
1.布局如图所示2.实现思路 css布局分为 (1) 大转盘 (2)跑马灯 (3)内部转盘白色部分 (4) 奖品布局 (5) 抽奖按钮布局js 部分: (1)初始化奖品 (2) 通过随机数获得获奖奖品 (3) 通过获奖的奖品计算转盘需要旋转的角度 (4)旋转停止提示中奖信息...原创 2020-12-26 09:46:19 · 422 阅读 · 0 评论 -
前端CSS实现八卦图,三角形
浅谈前端CSS中的一个硬核属性-border前言了解过前端的都知道,html 所有的标签都离不开border属性,Border,顾名思义,边框,给标签加个边框,就像我们生活中的窗户框子,Border除了可以设置标签的边框之外,还有很多隐藏的特殊功能,比如,可以'画'个图,可以达到和canvas一样的效果。一、使用border画出一个太极八卦图 1.效果图如下 像这样的八卦图,除了可以使canvas画出来,我们强大的CS...原创 2020-10-22 16:57:45 · 1041 阅读 · 0 评论 -
HTML布局之CSS
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css</title> <style type="text/css"> a{ font-family: Verdana,sans-serif; font-weight: bold; text-原创 2016-10-07 10:30:19 · 245 阅读 · 0 评论 -
CSS之幻灯片
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; font:normal 12px/1.5em Verda原创 2016-10-12 09:36:53 · 391 阅读 · 0 评论 -
CSS之简易相册
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } #photo{ po原创 2016-10-11 17:13:57 · 413 阅读 · 0 评论 -
css之反馈表单
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .feedback{ width: 398px; padding: 1px; border: 1px so原创 2016-10-11 16:44:45 · 997 阅读 · 0 评论 -
CSS之搜索框
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .search_box{ position: relative; width: 360px; } .search_box原创 2016-10-11 11:45:53 · 1074 阅读 · 0 评论 -
CSS之登录表单
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .user_login{ width: 210px; padding: 1px; border:1px s原创 2016-10-11 11:21:21 · 928 阅读 · 0 评论 -
CSS之盒子模型
<!DOCTYPE html><head> <meta charset="utf-8"> <!--适应--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style type="text/css"> div{原创 2016-08-16 16:16:31 · 362 阅读 · 0 评论 -
CSS之margin
margin-top:上边距 margin-right:右边距 margin-bottom:底部边距 margin-left:左边距 margin:上右下左 margin相对于上一元素的left right top bottom<div id="d1">#d1</div><div id="d2">#d2</div><div id="d3">#d3</div><div id=原创 2016-08-16 11:03:16 · 218 阅读 · 0 评论 -
CSS之a链接标签样式
<style type="text/css"> a{ font-family: Verdana,sans-serif; font-weight: bold; text-decoration: none; } a:link{ color:black;/*链接未被访问时的样式*/ }原创 2016-08-16 10:36:39 · 680 阅读 · 0 评论 -
CSS之a链接样式
a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻<a href="" target="_blank">这是一个链接</a>CSS 样式a:link {color:#FF0000;} /* unvisited link */a:visited {原创 2016-07-15 16:31:36 · 1067 阅读 · 0 评论 -
CSS之选择器
-id选择器<div id="chooseid"></div>css选择div添加样式 方式为#id{} #chooseid{width: 100px;height: 100px;background-color: red;}-类选择器<div class="chooseclass"></div>css添加样式 方式为 .class{}.chooseclass{width: 100px原创 2016-07-15 16:16:32 · 311 阅读 · 0 评论