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;        }