html写简单网页

知识点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">首&nbsp;&nbsp;页</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;
        }