深度理解CSS样式表,内有彩蛋....
2016-12-23 21:43
92 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS样式表</title> <style type="text/css"> .divclassB{ width:100px; height:100px; border:1px green dotted; background:#0F0 ; margin-top:10px; } *{ font:"黑体"; margin:0px; padding:0px;} div{ background-color:#C00} #DD{ width:100px; height:100px; border:1px green dotted; background:#0F0 ; margin-top:10px; } </style> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="divclassA" style="width:100px; height:100px; border:1px red solid;">内联样式表</div> <div class="divclassB">内嵌样式表</div> <div class="divclassC"></div> <div class="divclassD" id="DD" name="dd"></div> </body> </html>
样式表的几点常用:background-color: 背景颜色
background-image:url 设置图片背景
background-repeat平铺 repeat-x 横向平铺
background-position:center 背景居中
background-position:right top 图片在右上角
font-family 字体
font-weight:bold 加粗
font-style:italic 倾斜
text-decoration:underline下划线
text-align:center 水平居中对齐 left right
vertical-align:middle 垂直居中 top bottom
{margin in:opx auto;}自动居中
hover 鼠标移上去
position与absolute
外层没有position:absolute(或relative),div相对于浏览器定位。有的话,div相对于边框定位
.divclassA :hover{cursor:pointer}有小手
a{ text-decoration:none}有下划线
a:hover{text-decoration:underline}鼠标移上去有下划线
a:active{background:black}点击一瞬间背景变黑
a:visited 所有被访问的链接
导航栏简易制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #nav{ width:800px; height:100px; border:1px solid black; margin:0px auto; } .nav-banner{ text-align:center; line-height:100px; width:20%; height:100px; float:left; position:relative; } .nav-banner:hover{ background-color:#0F9; color:#F00; cursor:pointer; } </style> </head> <body> <div id="nav"> <div class="nav-banner">第一导航</div> <div class="nav-banner">第二导航</div> <div class="nav-banner">第三导航</div> <div class="nav-banner">第四导航</div> <div class="nav-banner">第五导航</div> </div> </body> </html>
相关文章推荐
- 深度学习深理解(一)-logistic回归深理解与BP反向传播算法
- 深度学习研究理解:OverFeat:Integrated Recognition, Localization and Detection using Convolutional Networks
- 深度学习深理解(六)-改善深度神经网络-第二周
- 如何理解微软的深度残差学习
- 深度神经网络结构以及Pre-Training的理解
- iptables 垫脚石之 NAT DNAT SNAT 代理 深度理解
- 深度学习简单理解
- 理解深度学习需要重新思考泛化
- 深度学习GPU卡的理解(一)
- 关于深度森林的一点理解
- 【深度学习】理解dropout
- 深度理解redux(一)
- [重磅]Deep Forest,非神经网络的深度模型,周志华老师最新之作,三十分钟理解!
- 树的高度和深度的理解
- 深度学习卷积网络中反卷积/转置卷积的理解 transposed conv/deconv
- 深度学习——通俗理解卷积神经网络
- 深度理解链式前向星(转)
- (这已经是数据库基础需要掌握的范畴的)mysql的深度解析 以及b+tree的原理 (给的答案是索引表 但感觉是要考察对b+tree的理解 博主能力有限不敢瞎说)
- 深度理解依赖注入(Dependence Injection)
- 线性代数中向量、矩阵深度理解(PartI)