html和css的小结

最新推荐文章于 2024-01-31 21:00:14 发布

原创最新推荐文章于 2024-01-31 21:00:14 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS基础 #html

CSS 专栏收录该内容

11 篇文章

订阅专栏

img标签的特殊性：

1、块级元素的表现，有宽和高
2、内联元素的表现，不占一整行

块级元素和内联元素的互换：

display：block | inline | none
block为块级，inline为内联，none不占空间的消失

display：inline-block；（把div变成图片排列形式）

form表单

css层叠样式表：

      外部样式表，内联样式表，嵌入式样式表
               8种选择器：id，class，元素，伪内，伪元素，包含元素，属性，通配符*
               ：before{}     ：after{}
               字体、文字、背景的设置
定位：margin，padding，border，float，position
图片与文字对齐：在图片里设置vertical属性，vertical：middle | top | bottom

局部布局可以用table标签，ul等标签

布局：定宽布局，圣杯布局，流式布局，局部布局，盒子（注意padding和margin）

css3：有兼容性问题，-webkit-（谷歌） -moz-（火狐） -o-
                动画：animation   @keyframes
                渐变：background：gradient
                阴影：box-shadow
                过渡：transition
                字体引用： @font-face

下面这个例子是一个导航效果的实现

 <pre class="html" name="code"><!DOCTYPE html>
<html>
<head>
	<title>导航</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="导航.css">
</head>
<body>
	<div class="warp">
		<ul>
			<li>
				<a href="#">首页</a>
			</li>
			<li class="sec-nav">
				<a href="#">狗雄联盟</a>
				<ul>
					<li class="subnav">
						<a href="#">法海</a>
					      <ul>
					      	<li>小徒弟</li>
					      	<li>白素贞</li>
					      	<li>许仙</li>
					      	<li>小青</li>
					      </ul>
					</li>
					<li class="subnav">
						<a href="#">不懂</a>
						<ul>
					      	<li>小徒弟</li>
					      	<li>白素贞</li>
					      	<li>许仙</li>
					      	<li>小青</li>
					      </ul>
					</li>
					<li  class="subnav">
						 <a href="#">爱，下来</a>
					      <ul>
					      	<li>小徒弟</li>
					      	<li>白素贞</li>
					      	<li>许仙</li>
					      	<li>小青</li>
					      </ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">EVE</a>
			</li>
			<li>
				<a href="#">找你妹</a>
			</li>
			<li>
				<a href="#">剑灵</a>
			</li>
		</ul>
	</div>
</body>
</html>

外部引用文件导航.css

body{
		margin: 0px;
		padding: 0px;
	}
	ul{
		list-style: none;
		margin-left: -40px;
		/*visibility: hidden;*/

	}
	.warp{
		width: 600px;
		margin: 100px auto;
		height: 43px;
		background: red;
		font-size: 0;

	}
	.warp>ul>li{
		/*将元素转化为类图片格式“半妖”*/
		display: inline-block;
		width: 20%;
		height: 100%;
		text-align: center;
		/*line-height: 100%;这里100%不行的*/
		line-height: 45px;
		font-size: 14px;
		background: #faa;
		vertical-align: top;
	}
	.warp>ul>li:hover{
		background: #E5266A;
	}
	a{
		text-decoration: none;
		font-size: 16px;
		font-family: "幼圆";
		font-weight: 500;
	}
	.warp a:link,
	.warp a:visited{
		color: #fff;
		text-decoration: none;
	}
	.sec-nav>ul{
		display: none;
		margin: 0px;
		padding: 0px;
	}
	.sec-nav>ul>li{
		height: 45px;
		font-size: 16px;
		font-family: "幼圆";
		color: #fff;
	}
	.sec-nav>ul>li:hover{
		background: #faa;
		cursor: pointer;
		color: yellow;
	}

	.sec-nav:hover ul{
		display: block;
	}
	.s{
		/*display: none;*/
		/*隐藏可视化，结构保留“隐形的翅膀！”*/
		visibility: hidden;
	}
	.subnav>a:hover{
		color: yellow;
		background: #faa;
	}
	.subnav>ul{
		width: 100px;
		background: lightblue;
		position: relative;
		left: 160px;
		top: -45px;
		visibility: hidden;
		padding: 0px;
	 
	 
	}
	/*.subnav>ul>li{
		width: 25%;
		display: inline-block; 
		background: lightblue;
		padding: 0px;
		 
	}*/
	.subnav:hover ul{
		visibility: visible; 
	}
	.subnav>ul>li:hover{
		 background: purple;
		 color: red;
	}

效果为：

当鼠标放在狗熊联盟上时会显示