专栏首页python3CSS3学习3----举例

CSS3学习3----举例

1.浏览器支持的四种状态:

①:link → 未访问的 链接 。

②:visited → 已访问的 链接 。

③:hover → 鼠标正停在上面的 链接 。

④:active → 正在点击的链接 

eg>

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html;charset=GBK" />     <title>link-visited-hover-active</title>     <style type="text/css">         .button{             background-p_w_picpath:url(1.png);             background-repeat:no-repeat;             width:122px;             height:42px;             display:block;             line-height:42px; /*★此两行保证文字绝对居中!*/             text-align:center; /*★此两行保证文字绝对居中!*/             text-decoration:none;         }         .button:hover{             background-p_w_picpath:url(2.png);             /*background:#fff; 发现这个起作用了!上面一行不起作用了!!*/         }         .mail:link{             background-p_w_picpath:url(mail.png);             background-repeat:no-repeat;             padding-left:25px; /*根据图片的大小来设定*/             text-decoration:none; /*去掉下划线*/         }         .mail:visited{             background-p_w_picpath:url(yes.png);         }         a:hover{             background:#cacaca;             /*我们上面给.button设置了背景图片,现在又对a标签设置了背景色。             发现背景图片起作用了!注:给一个标签同时设置背景色和图片,图片在前。*/         }     </style> </head> <body>     <a class="button" href="http://google.com.hk">google</a>     <a class="mail" href="http://baidu.com">baidu</a> </body> </html> 

2.鼠标经过时添加下划线:

a:hover{

      color:#ccc;

      text-decoration:underline;

}

3.网站垂直导航栏的创建:(也许对你有用)

源码:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html;charset=GBK" />     <title>link-visited-hover-active</title>     <style type="text/css">         ul{             paddint-left:0px; /*完全居左*/             list-style-type:none; /*去掉项目符号*/         }         ul li{             height:30px;             width:200px;             border:1px dashed #ccc;             border-bottom:none; /*让中间的分界线不易*/             line-height:30px; /*使文字完全居中*/             text-align:center; /*使文字完全居中*/         }         ul li a{             text-decoration:none; /*去掉下划线*/             height:30px;             width:200px;             display:block;         }         ul li a:hover{             background:#ccc;         }         .last{             border-bottom:1px dashed #ccc;         }     </style> </head> <body>     <ul>         <li><a href="#">Link1</a></li>         <li><a href="#">Link2</a></li>         <li><a href="#">Link3</a></li>         <li class="last"><a href="#">Link4</a></li>     </ul> </body> </html> 

4.网站水平导航栏的创建:(也许对你有用)

源码:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html;charset=GBK" />     <title>link-visited-hover-active</title>     <style type="text/css">         ul{             paddint-left:0px; /*完全居左*/             list-style-type:none; /*去掉项目符号*/         }         ul li{             height:30px;             width:200px;             border:1px dashed #ccc;                          /*border-bottom:none; 让中间的分界线不易*/             border-right:none;/*change*/             float:left; /*change*/                          line-height:30px; /*使文字完全居中*/             text-align:center; /*使文字完全居中*/         }         ul li a{             text-decoration:none; /*去掉下划线*/             height:30px;             width:200px;             display:block;         }         ul li a:hover{             background:#ccc;         }         .last{             /*border-bottom:1px dashed #ccc;*/             border-right:1px dashed #ccc; /*change*/         }     </style> </head> <body>     <ul>         <li><a href="#">Link1</a></li>         <li><a href="#">Link2</a></li>         <li><a href="#">Link3</a></li>         <li class="last"><a href="#">Link4</a></li>     </ul> </body> </html> 

5.当鼠标放上去可以变成“手”:★

cursor:pointer;

6.网页的布局:★★★(也许对你有用)

如下面的网页布局:

html代码为:

<!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=GBK" />     <title></title>     <style type="text/css">         body{             margin:0px;             padding:0px;         }         #top{             width:960px;             height:100px;             background:#cc0000;             margin-left:auto; /*网页完全居中*/             margin-right:auto; /*网页完全居中*/         }         #contains{             width:960px;             height:900px;             background:#4096ee;             margin-left:auto; /*网页完全居中*/             margin-right:auto; /*网页完全居中*/                      }         #left{             width:120px;             height:900px;             background:#c79810;             float:left; /*左浮动*/         }         #right{             width:830px;             height:900px;             background:#ff7400;             float:right; /*右浮动*/         }     </style> </head> <body>     <div id="top"></div>     <div id="contains">         <div id="left"></div>         <div id="right"></div>     </div> </body> </html> 

7.圆角的产生的属性:(根据需要改变属性值)

eg.

border-radius:5px 5px 5px 5px;

8.光感产生属性:(根据需要改变属性值)

eg.

box-shadow:0 5px 5px #06c;

或 box-shadow:0 5px 5px rgba(0,0,0,0.15);

9.浮动(float)的学习:

注意:不参与浮动,清除浮动带来的影响用:clear:both;

eg.不清除浮动时,

清除浮动后:

代码:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html;charset=GBK" />     <title>float</title>     <style type="text/css">         body{             margin:0px;             padding:0px;         }         div{             width:300px;             height:300px;         }         .div1{             background:#ff7400;             float:left;         }         .div2{             background:#008c00;             float:left;         }         .div3{             width:800px;             background:#356a00;             clear:both;/*★不参与浮动!清除浮动带来的影响!*/             /*说明:★div1,div2,div3不在一个容器里,也会发生分层。             当不清除浮动时,div3的一部分被覆盖!!*/         }     </style> </head> <body>     <div class="div1">div1</div>     <div class="div2">div2</div>     <div class="div3">div3</div> </body> </html> 

10.相对定位和绝对定位

注意:绝对定位和相对定位经常是一起使用的!!

eg.

<!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=GBK" />     <title>相对定位和绝对定位</title>     <style type="text/css">         body{             margin:0px;             padding:0px;         }         .div1{             width:960px;             height:300px;             position:relative; /*★相对定位*/             margin-left:auto;             margin-right:auto;             background:#ff2000;         }         .div2{             width:50px;             height:50px;             background:#008c00;             position:absolute; /*绝对定位*/             right:0px; /*绝对定位的位置*/             top:0px; /*绝对定位的位置设置*/         }     </style> </head> <body>     <div class="div1">         <div class="div2"></div>     </div> </body> </html> 

效果:

《2》。对于绝对定位:对于上面的浮动的div1,div2,div3,我们还可以通过绝对定位对其进行设置。如:

.div1{

width:300px;

height:300px;

background:#ff7400;

position:absolute;

top:20px; /*距离上面的距离*/

left:90px; /*距离左边的距离;还有的属性:top,bottom,right,left*/

z-index:99; /*数值越大,越靠上;;它是控制几个层之间的层次关系!!*/

}

11.固定定位:(在有些网页中,我们常看到网页的左右两边有浮动广告,无论我们怎么上下拉升网页,广告就在网页的中间位置!!)

<!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=GBK" />     <title></title>     <style type="text/css">         body{             margin:0px;             padding:0px;             height:1000px;         }         #div2{             background:#fe8400;             position:fixed; /*固定*/             right:10px;             top:350px;             width:150px;             height:100px;         }     </style> </head> <body>          <div id="div2">             我是广告!固定在网页左右的固定广告!             你想去掉我吗??????         </div>  </body> </html> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3D盒子动画

    ---------------------------------------------------------

    py3study
  • CSS3 转换(Transform)

    在CSS中,允许元素实现 2D 和 3D的转换效果,主要包含 :旋转,缩放,移动,倾斜        

    py3study
  • HTML5+CSS3

    CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

    py3study
  • 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    Jackson0714
  • 来来来,手把手教你做大白!

    这个东西也是经常被拿来玩的一个小东西,就是通过border-radius 去自己切一个图形。

    疯狂的技术宅
  • 自定义按钮~自适应布局~常见bug

    超然
  • 微信拍一拍效果的原理分析及代码实现

    微信拍一拍功能上线之后,其用户评价褒贬不一,这里我们不去凑热闹讨论这个功能的应用场景是否真的如部分网友说的毫无卵用,毕竟这是产品经理们应该考虑的事,但我相信作为...

    石璞东
  • emlog后台登录失败邮件通知

    前面说到emlog后台登录参数加密,下面我们说说如何给emlog添加后台登录失败邮件通知的功能,本次我们需要用到mail函数,当然也就是需要25端口发信,如果是...

    墨渊
  • emlog后台登录失败邮件通知

    Youngxj
  • 慕课网javascript 进阶篇 第十章 编程练习

    大当家

扫码关注云+社区

领取腾讯云代金券