css之div布局

最新推荐文章于 2023-03-25 17:26:45 发布

leo1949asd

最新推荐文章于 2023-03-25 17:26:45 发布

阅读量629

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/pqleo/article/details/26588027

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
<head>
<title>youku.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html">

<link rel="stylesheet" type="text/css" href="./youku.css">

</head>

<body>
	<div class="div1">
		<div>
			<span class="span1"><a class="font1">优酷牛人</a><a href="#1">更多牛人</a></span>
			<ul class="faceul">
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#2">张三</a></li>
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#3">张三</a></li>
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#4">张三</a></li>
			</ul>
		</div>
		<div>
			<span class="span1"><a class="font1">优酷明星</a><a href="#1">更多明星</a></span>
			<ul class="faceul">
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#2">张三</a></li>
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#3">张三</a></li>
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#4">张三</a></li>
			</ul>
		</div>
		<div>
			<span class="span1"><a class="font1">优酷达人</a><a href="#1">更多达人</a></span>
			<ul class="faceul">
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#2">张三</a></li>
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#3">张三</a></li>
				<li><img src="img/1.jpg"><br />
				<a class="font2" href="#4">张三</a></li>
			</ul>
		</div>

	</div>

</body>
</html>

css

body {
	width: 1000px;
	height: 1000px;
	margin: 0 auto;
	border: 1px solid red;
}

.div1 {
	width: 350px;
	height: 370px;
	border: 1px solid blue;
}
/*常用字体*/
.font1 {
	font-size: 15px;
	font-weight: bold;
}

.font2 {
	font-size: 12px;
	float: left;
}

.span1 { /* 	background-color: green; */
	display: block;
}

.faceul {
	
}

.span1 a:LINK {
	text-decoration: none;
	float: right;
	font-size: 12px;
}

.span1 a:HOVER {
	text-decoration: underline;
	color: red;
}

.faceul a:LINK {
	text-decoration: none;
	margin-left: 32px;
}

.faceul a:HOVER {
	text-decoration: none;
	color: green;
}

/*  a:LINK{
	text-decoration: none;
 }
 a:HOVER{
	text-decoration: underline;
	color: red;	 
 }	
  */
.div1 ul { /* 	border: 1px pink solid; */
	height: 85px;
	margin-top: 5px;
	list-style-type: none;
	/* 	background-color: pink;  */
	padding: 0;
}

.div1 li {
	float: left;
	margin-left: 25px;
}

.div1 img {
	height: 80px;
	margin: 0px;
}