HTML/css碎片知识

最新推荐文章于 2024-04-26 22:16:05 发布

joy_91

最新推荐文章于 2024-04-26 22:16:05 发布

阅读量712

点赞数

分类专栏：基本概念 css

本文链接：https://blog.csdn.net/joy_91/article/details/39475407

版权

基本概念同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1. http-equiv 属性 -- HTTP协议的响应头报文

此属性出现在meta标签中
此属性用于代替name，HTTP服务器通过此属性收集HTTP协议的响应头报文
此属性的HTTP协议的响应头报文的值应使用content属性描述

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta http-equiv="content-language" content="zh-CN" />

2.the total width and height of an element is the sum of its width, border, margin and padding

由外到内
margin：外边距

border：边距

padding：内边距

content：内容

3.ul 横向排列

<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。

<style type="text/css">
#menu li { 
float:left; /* 往左浮动 */
}
</style>

4.hover

hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

在此基础上，定义onmouseover和onmouseout方法。

5.导航思想

略过时，显示隐藏子列表

<script language="javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function() {
this.className+=" over";
 }
 node.οnmοuseοut=function() {
 this.className=this.className.replace(" over", "");
 }
 }
 }
 }
}
window.οnlοad=startList;
</script>
<style type="text/css">
<!--
body {
  font: normal 11px verdana;
  }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }
  
ul li {
  position: relative;
  }
  
li ul {
  position: absolute;
  left: 149px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-bottom: 0;
  }
  
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

<span style="color:#FF0000;">li:hover ul, li.over ul { display: block; } /* The magic */</span>
-->
</style>
<ul id="nav"> 
 <li><a href="#">Home</a></li> 
 <li><a href="#">About</a> 
 <ul> 
 <li><a href="#">History</a></li> 
 <li><a href="#">Team</a></li> 
 <li><a href="#">Offices</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Services</a> 
 <ul> 
 <li><a href="#">Web Design</a></li> 
 <li><a href="#">Internet Marketing</a></li> 
 <li><a href="#">Hosting</a></li> 
 <li><a href="#">Domain Names</a></li> 
 <li><a href="#">Broadband</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Contact Us</a> 
 <ul> 
 <li><a href="#">United Kingdom</a></li> 
 <li><a href="#">France</a></li> 
 <li><a href="#">USA</a></li> 
 <li><a href="#">Australia</a></li> 
 </ul> 
 </li> 
</ul>