知识点1:
宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+contentwidth
宽=margin+border+width+padding 盒子模型
页面布局:
块级元素:div p ul li ol dl dt dd
行内元素(内联元素):span strong en i b a
块级元素居中:margin:0 auto;
行内元素居中:父元素 text-align:center;
清除浮动方式:clear:both/left/right
变为行内块:display:inline-block
圆角:border-radius
鼠标变成手:curosr:pointer
文本框获取焦点时去标签:outline:none;
注释快捷键Ctrl+shift+/
html注释:<!--注释文本--
>
css注释:/注释文本/
案例(保利集团)
1.导航栏,html部分
<div id="top">
<div class="logo fl"><a href=""><img src="logo.gif" alt=""/></a></div>
<div class="nav fl">
<a href="" class="current">首 页</a>
<a href="">集团概况</a>
<a href="news.html">新闻中心</a>
<a href="">产品服务</a>
<a href="">企业文化</a>
<a href="">综合服务</a>
<a href="">品牌建设</a>
<a href="">人力资源</a>
<a href="">国际合作</a>
</div>
</div>
css部分
body{
background:url(../img/body.gif);
}
#top,.banner,.content{
width:960px;
margin:0 auto;
background: #fff;
}
#top{
height:54px;
}
.logo{
width:230px;
height:54px;
}
.nav{
width:730px;
height:35px;
border-top:solid 10px #000;
margin-top: 9px;
}
.nav a{
font-size: 16px;
line-height:35px;
padding:0 8px;
color:#000;
height:35px;
display:inline-block;
}
.nav a:hover,.current{
color:#fff!important;
background: #900;
}
2.内容区:分为左中右三部分,要算好每一部分占的宽度
<div class="content">
<div class="con-left fl">
<h3><span>图片</span>新闻</h3>
<img src="1.jpg" alt=""/>
</div>
.content{
height:450px;
padding-bottom:20px;
}
.con-left,.con-right{
width:300px;
}
.con-left{
margin-left: 5px;
}
.con-right{
margin-right: 5px;
}
.con-main{
width:330px;
margin:0 10px;
}
.con-left img{
width:288px;
border:solid 1px #ccc;
padding:5px;
border-radius:10px;
}
制作中间部分时左边的三角用背景制作,虚线是border-bottom
制作网页时要找到共同点把共同的部分写在css里,用的时候可以直接引用,一定要算好总宽度以及每一部分所占的宽度。
知识点2:
**定位:**1.position:relative相对定位,以原来默认位置为参考点
2:position:absolute绝对定位,以父元素发生偏移
3:position:fixed固定定位
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
ul{
width:800px;
margin:30px auto 0;
}
ul>li{
width:180px;
height:40px;
line-height:40px;
text-align: center;
float:left;
background:#000;
position:relative;
}
ul>li>a{
color:#fff;
text-decoration:none;
}
i{
background:orange;
color:#fff;
display:inline-block;
width:40px;
height:20px;
line-height:17px;
font-style:normal;
position:absolute;
top:-5px;
right:5px;
}
</style>
知识点3:制作下拉菜单
父子选择 空格:后代
display:none——隐藏(不占位置可以放其他东西)
visibility:hidden——隐藏(占位置)
*{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
.nav{
height:40px;
background:pink;
}
.nav>ul{
width:1210px;
margin:0 auto;
}
.nav>ul>li{
float:left;
width:160px;
text-align: center;
line-height: 40px;
}
.nav>ul>li a{
width:100%;
text-decoration: none;
color:#fff;
display:inline-block;
}
.nav>ul>li>a:hover{
background:lightblue;
}
.nav>ul>li>ul{
display: none;
}
.nav>ul>li:hover>ul{
display: block;
}
.nav>ul>li>ul>li{
background:gainsboro;
}
.nav li>ul>li>a{
color:#fff;
}
.nav li>ul>li:hover{
background:paleturquoise!important;
}
.nav>ul>li>ul>li:hover>a{
color:gainsboro;
}