基础Html前端title开发记录

最新推荐文章于 2023-06-17 11:36:12 发布

灰暗角落里的琴

最新推荐文章于 2023-06-17 11:36:12 发布

阅读量252

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/u012329294/article/details/105196500

版权

前端专栏收录该内容

3 篇文章 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">   <!-- 注意 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>

灰暗角落里的琴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
基础Html前端title开发记录

前端确实是短板，不过功夫不负有心人，只要肯学习，一定能掌握。下面是基本的HTML CSS配置要点，记录一下：1、去掉干扰因素在*中处理，避免后面遇到很多意向不到的兼容问题2、对于屏幕中的每一个不同的区域都设置为一个Div，大块包小块3、margin中的auto能够快速水平居中，但需注意不要跟浮动、内联、绝对定位一起用，会无效4、块级元素float水平布局5、文字垂直居...
复制链接

扫一扫