每日小结9.6

①html的一般格式:


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

         <title>**********</title>

         <style type="text/css">

                body{

                          font-family:verdana,san-serif;

                          font-size:small;

                }

                #navigation{

                             margin:20px;

                   }

                .......

         </style>

         <script type="text/javascript">

                       function.......

         </script>

</head>


<body>

       <ul id="**">

                <li>

                     <a href="#">****</a>

                      <ul>

                             <li><a href="*">********</a></li>

                      </ul>

                 </li>

        </ul>

</body>

</html>


总结来说,就是html大框架包含着head,body两个中框架,head包含style和script两个小框架,body包含页面结构代码;


②js代码:控制下拉子菜单显示

<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 

function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 

</script> 


      然后body中通过<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 控制

       两个函数:隐藏菜单函数,展示菜单函数。利用getElementsByTagName("ul")返回带有ul标签的对象的数组,然后[0]表示返回这个数组的第一个元素;

       注意:getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。问题:【0】为什么只对第一个进行操作??????


③<style>...</style>的小结:

<style type="text/css"> 
* { 
padding:0; 
margin:0; 

body { 
font-family:verdana, sans-serif; 
font-size:small; 

#navigation, #navigation li ul { 
list-style-type:none; 

#navigation { 
margin:20px; 

#navigation li { 
float:left; 
text-align:center; 
position:relative; 

#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#000; 
width:120px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c5dbf2; 
padding-left:10px; 

#navigation li a:hover { 
color:#fff; 
background:#2687eb; 

#navigation li ul li a:hover { 
color:#fff; 
background:#6b839c; 

#navigation li ul { 
display:none; 
position:absolute; 
top:40px; 
left:0; 
margin-top:1px; 
width:120px; 

#navigation li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:130px; 
margin-top:0; 
margin-left:1px; 
width:120px; 

</style> 

1. 

 *表示全局声明div的边框外部和元素距离为0。作用就是重置样式(RESET),在不同浏览器中样式一致,较为暴力,可能会降低效率;可以使用Normalize来清除默认样式,这个方法相比之下通用性和可维护性较好。

2.

字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant;

其中字体系列font-family支持按照优先级顺序列出各种要指派使用的字体,当用户系统没有安装首选字体时候,向后搜索,选用下一个指派的字体解析显示。

3.

font-style属性:normal、italic和 oblique。
normal:默认样式。标准的字体。
italic:斜体的字体。
oblique:倾斜的字体。

4.

font-size:

字体大小的度量单位包括很多,常用的有像素px、磅pt、em、百分比。

5.

font-weight:设定字体的浓淡粗细程度,可能的值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

font-variant 属性:小写字母均会被转换为大写


6.

<style>
#a{font-size:20px;}
.b{font-size:20px;}
</style>

<div>无样式</div>
<div id=a>id标识定义方法;id定义用 # 号声明</div>
<div class="b">类别定义方法;类别定义用 . 声明</a>

7.

.navigation li a:link是navigation类下li的a标签未访问的链接样式,故名思义.navigation li a.selected:link表示a标签下selected类的未访问的链接样式。
同理visited表示已访问的链接样式


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值