基础Html前端title开发记录-蒲公英云

基础Html前端title开发记录

前端确实是短板，不过功夫不负有心人，只要肯学习，一定能掌握。

下面是基本的HTML CSS配置要点，记录一下：

1、去掉干扰因素在*中处理，避免后面遇到很多意向不到的兼容问题

2、对于屏幕中的每一个不同的区域都设置为一个Div，大块包小块

3、margin中的auto能够快速水平居中，但需注意不要跟浮动、内联、绝对定位一起用，会无效

4、块级元素float水平布局

5、文字垂直居中 line-height == height

6、鼠标滑过显示块，注意li1要包含kf块，否则无法显示。

7、mouseover在ready中初始化，找到index，与对应的div中的index进行关联即可

<!DOCTYPE html>
<html>
<head>
    <title>测试2</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<style type="text/css">
    * {
        margin:0;          /*去掉干扰因素*/
        padding: 0;
        text-decoration: none;
        list-style: none;
        font-size: 12px;
        font-family: Arial;
    }
    #title {
        width: 100%;                    /*外部大块*/
        height: 30px;
        background-color: #F7f7f7;
        border:1px solid #eeeeee;
    }
    #title #title_main {
        width: 1210px;
        height: 30px;
        margin: 0 auto;       /*auto水平居中，在浮动，内联，绝对定位中会失效*/
    }
    #title #title_main #top_l {
        float: left;          /*左侧浮动*/
        width: 300px;
        height: 30px;
    }
    #title #title_main #top_l li{
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;   /*文字垂直居中*/
    }
    #title #title_main #welcome {
        float: left;
        margin-left: 180px;
        width: 220px;
        height: 30px;
        line-height: 30px;
    }
    #title #title_main #top_r {
        float: left;    /*右侧浮动*/
        width: 300px;
        height: 30px;
    }
    #title #title_main #top_r #li1 {
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;
    }
    #title #title_main #top_r #li1 #kf {
        /*position: relative;   */
        width: 400px;
        height: 380px;
        display: none;      /*默认不显示的块*/
    }
    #title #title_main #top_r #li1:hover #kf {
        display: block;    /*鼠标滑过li显示内部块*/
    }
    .maincenter .cent1{
        width: 200px;
        height: 200px;
        display: none;
        position: absolute;
        top: 30px;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){    
// 1F滑块效果开始
    $('#title #title_main #top_l li').mouseover(function(){
            var index=$(this).index();
            $(this).find('h3').css('color','#ff0000');
            $(this).siblings('li').find('h3').css('color','#00ff00');
            $('#title #title_main .maincenter .cent1').eq(index).show().siblings('.cent1').hide();
    });
// 1F滑块效果结束
});
</script>
<div id="title">
    <div id="title_main">
        <ul id="top_l">
            <li><h3>收藏本站</h3></li>
            <li><h3>关注本站</h3></li>
        </ul>
        <div class="maincenter">
                <div class="cent1" >
                    不错啊
                </div>
                <div class="cent1" >
                英明啊 ^*^
                </div>
        </div>
        <div id="welcome">
            欢迎来到本站
            <a href="">登录</a>
            <a href="">注册</a>
        </div>
        <ul id="top_r">
            <li id="li1">   <!-- 注意 li1 和 kf 的关系, kf 必须在 li1中 -->
                客户服务    
                <ul id="kf">
                    <li><a href="">联系我们</a></li>
                    <li><a href="">环境发顺</a></li>
                    <li><a href="">商家发货</a></li>
                    <li><a href="">无偿退款</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>