-
浮动基本知识
查看全部 -
《盒子模型与公式》
对于子盒子,padding则是自身内容到自身盒子的距离，margin则是自身盒子到父盒子或其他盒子的距离
对于父盒子，padding则是子盒子到自身的距离，margin则是自身盒子到其他盒子的距离
float碰到浮动元素或者父盒子就会换行
查看全部 -
:focus 代表的是获取焦点时的样式，一旦链接获取了焦点，则它的样式就是你设置的focus样式
查看全部 -
<!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=gb2312" />
<title>3.1页面头部制作练习题</title>
<style type="text/css">
/*在此定义相关样式，控制列表的显示形式*/
*{margin:0; padding:0;}
body{width:100%;}
.a{
width:400px;
height:150px;
background-color:red;
}
.a h3{
padding-top:20px;
padding-left:10px;
}
.nav li
{
float:left;
list-style-type:none;
text-align:center;
line-height:30px;
padding-top:30px;
padding-left:50px;
}
.nav li a{
display:block;
}
.nav li a:link,.nav li a:visited
{
color:black;
text-decoration:none;
}
.nav li a:hover,.nav li a:active
{
color:white;
background:#be3948;
}
</style>
</head>
<body>
<div class="a">
<h3>课程难度</h3>
<!--在此制作一个无序列表-->
<ul class="nav">
<li><a href="#">全部</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
</div>
</body>
</html>
查看全部 -
<a>是一个内联元素，为了使<a>同时具有内联元素和块级元素的属性和特点，即：可以在一行内显示多个元素，又可以设置其宽和高，同事能使其在W3C和IE中都兼容， 页码制作是使用：display:inlin-block;
查看全部 -
1.当鼠标悬浮在超链接上时，列表项样式设置既有背景图片，又有背景颜色的，且背景图片不重复，此时在左边显示背景图片，没有背景图片的地方显示背景颜色。 2.鼠标悬浮时，背景颜色改变没有占据整行，只改变了文字颜色因为<a>为内联元素，要想它宽高起作用，就要设成块元素 display:block。
查看全部 -
行内样式的优先级高于外部样式
行内样式适用于写少量样式的地方
查看全部 -
课程中心盒子模型分析：3部分。
查看全部 -
新闻中心制作
查看全部 -
.list li{ width: 50px; height: 30px; float: left; list-style-type:none;}.list a{ display:block; height: 30px; width: 50px; text-align:center; line-height: 30px; text-decoration:none;}.list a:link, .list a:visited{ color:#000; text-decoration:none;}.list a:hover, .list a:active{ color: #FFF; text-decoration:none; background-color: #BE3948;}查看全部 -
li{ float: left; list-style-type:none;}li a:link, .li a:visited{ color: #000; text-decoration:none;}li a:hover, .li a:active{ color:#FFF; text-decoration:none; background-color: #BE3948;}li a{ display: block; line-height:30px; text-align:center;}li, a{ width:50px; height:30px; }查看全部 -
导航栏盒子模型细分
查看全部 -
导航内容盒子模型
查看全部 -
Logo区域盒子模型分析
查看全部 -
页面头部盒子模型分析
查看全部
举报