1.盒子模型
宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+contenWidth
即宽=margin+border+padding+width
同理:高=margin+border+padding+height
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tmall</title>
<style>
.fl{
float:left
}
#top,#login,#header,#nav,#ban{
width:1210px;
margin:0 auto;
}
#top{
height:80px;
background:red;
}
#login{
height:40px;
background:pink;
}
#header{
height:100px;
background:coral;
}
.logo{
width:300px;
height:60px;
background:yellowgreen;
margin-top:20px;
margin-left:20px;
}
.search{
width:500px;
height:60px;
background:green;
margin-left:20px;
margin-top:20px;
}
#nav{
height:40px;
background:cornflowerblue;
}
#ban{
height:300px;
background:deepskyblue;
}
.meau{
width:200px;
height:300px;
background:mediumpurple;
}
.banner{
width:800px;
height:300px;
margin-left:10px;
background:lightcoral;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="login"></div>
<div id="header">
<div class="logo fl"></div>
<div class="search fl"></div>
</div>
<div id="nav"></div>
<div id="ban">
<div class="meau fl"></div>
<div class="banner fl"></div>
</div>
</body>
</html>
效果图:
2.页面布局
标准流
浮动流
浮动:float:left;
清除浮动:clear:both/left/right
块级元素 : div p ul li ol dl dt dd
行内元素(内联元素):span strong em i b a
块级元素居中 :margin:0 auto;
行内元素居中:父元素 text-align:center;
3.line-height:行高
行高与高度一样:字在正中间
行高比高度大:字体偏下
行高比高度小:字体偏上
4.display:block; 行内元素——>块级元素
display:inline-block; 行内块级元素
5.webstorm: 注释快捷键 ctrl+shift+/
html注释:
css注释: /注释文本/
6.border-radius:10px; 圆角效果
border-radius:50%; 圆
div{
height:500px;
width:500px;
background:blue;
margin:auto;
border-radius:20px;
}
div{
height:500px;
width:500px;
background:blue;
margin:auto;
border-radius:50%;
}
7.outline:none;/文本框获取焦点时去边框/
8.cursor: pointer;/鼠标变成手状/
9.定位:
position:relative; /相对定位/ 以他的原来位置相对发生偏移
position:absolute;/绝对定位/ 以他的父元素发生偏移,与文档流,无关,不占据空间。
position:fixed;/固定定位/
定位和top bottom left right 在一起使用
定位和浮动都是页面布局的样式,不能一起使用
10.给父元素加相对定位<没有父元素时默认父元素为html页面>
给需要移动的元素加绝对定位及top等值
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
ul{
width:800px;
margin:30px auto 0;
}
ul>li{
width:150px;
height:30px;
line-height:30px;
text-align:center;
float:left;
background:#000;
position:relative;
}
ul>li>a{
color:#fff;
}
i{
width:40px;
height:18px;
line-height:18px;
background:orange;
display:inline-block;
color:#fff;
font-style:normal;
position:absolute;
right:2px;
top:-10px;
}
div{
width:40px;
height:300px;
position:fixed;
top:150px;
right:20px;
background:#000;
}
body{
height:1200px;
background:palegreen;
}
</style>
</head>
<body>
<ul>
<li><a href="">国际酒店</a><i>hot</i></li>
<li><a href="">国内酒店</a><i>news</i></li>
</ul>
<div>
</div>
</body>
</html>
11.z-index:3 上下层叠位置
12.通栏 二级菜单
<1> ul>li 父子关系
ul li 后代关系
<2>display:none;隐藏(不占位置)——首选
display:hidden;隐藏(占位置)
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background:plum;
}
*{
margin:0;
padding:0;
}
ul>li{
list-style:none;
}
.nav{
height:40px;
background:papayawhip;
}
.nav>ul{
width:1210px;
margin:0 auto;
}
.nav>ul>li{
float:left;
width:200px;
text-align:center;
line-height:40px;
}
.nav>ul>li>a{
width:100%;
text-decoration:none;
color:#000;
display:inline-block;
}
/* .nav ul li:hover{
background:dodgerblue;
}*/
.nav>ul>li>a:hover{
background:dodgerblue;
}
.nav>ul>li>ul{
width:200px;
height:160px;
background:orange;
display:none;
}
.nav>ul>li:hover>ul{
display:block;
}
.nav>ul>li>ul>li>a{
color:#000;
}
.nav>ul>li>ul>li:hover{
background:darkslateblue;
}
.nav>ul>li>ul>li:hover>a{
color:#fff;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司简介</a>
<ul>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
</ul>
</li>
<li><a href="">新闻动态</a></li>
<li><a href="">国际合作</a></li>
<li><a href="">关于我们</a>
<ul>
<li><a href="">bbbb</a></li>
<li><a href="">bbbb</a></li>
<li><a href="">bbbb</a></li>
<li><a href="">bbbb</a></li>
<li><a href="">bbbb</a></li>
</ul>
</li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>