基础Html前端title开发记录

Love The Way You Lie 2023-07-19 08:29 22阅读 0赞

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

下面是基本的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">   
    				客户服务	
    				<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>