css_day9---盒子模型的综合案例

最新推荐文章于 2024-03-18 20:32:46 发布

KLeonard

最新推荐文章于 2024-03-18 20:32:46 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/gavin_john/article/details/16931467

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ CSS

8 篇文章 0 订阅

订阅专栏

Day9

1、

要达到如图效果：

一开始我的想法是用很多个小块（div），即每个图片都占一个块。但实际上用列表就可以实现，因为图片的排列类似于列表，只要对格式加以控制即可。

html代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./box.css">

  </head>
  
  <body>
  	<div class="div1">
  		<ul class="faceul" >
  			<li><img src="../images/boy3.jpg" width=100px></img><a href="#">小龙女</a></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			<li><img src="../images/boy3.jpg" width=100px></img></li>
  			
  		</ul>
  	</div>
  </body>
</html>

对应的CSS文件如下：

body{
	margin:0px;
	padding:0px;
}

/*div1--类选择器，用于控制显示的位置*/
.div1{
	width:500px;
	height:400px;
	border:1px solid #b4b4b4;
	margin-left:100px;
	margin-top:20px;
}

/*faceul 用于控制显示图片区域的宽度和高度*/
.faceul{
	width:350px;
	height:300px;
	border:1px solid red;
	list-style-type: none;/*列表前面没有小圆点*/
	padding:0px;
	margin-left:80px;
}

/*用于控制单个图片区域的大小*/
.faceul li{
	width:100px;
	height:80px;
	border:1px solid blue;
	float:left;/*左浮动*/
	margin-left:10px;
	margin-top:5px;
}

.faceul a{
	font-size:12pt;
	margin-left:25px;
	margin-top:5px;
}

a:link{
	text-decoration: none;
	font-color:blue;
}

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

.faceul img{
	width:80px;
	margin-top:5px;
	margin-left:10px;
}

2、要实现类似于优酷网这样的效果

同样的，也是用列表。每一行图片都是一个列表，图片上的一行字用<span>标记即可

html代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>youku.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./youku.css">

  </head>
  
  <body>
  <div class="div1">
		<div>
			<span class="span1"><font class="font1">优酷牛人</font><a href="#">更多牛人</a></span>
			<ul class="faceul">
			<li><img src="../images/boy.jpg"></img><br/><a href="#">张三</a></li>
			<li><img src="../images/boy2.jpg"></img><br/><a href="#">李四</a></li>
			<li><img src="../images/boy3.jpg"></img><br/><a href="#">王五</a></li>
			</ul>
		</div>
		<div>
			<span class="span1"><font class="font1">名人空间</font><a href="#">更多空间</a></span>
			<ul class="faceul">
			<li><img src="../images/boy.jpg"></img><br/><a href="#">张三</a></li>
			<li><img src="../images/boy2.jpg"></img><br/><a href="#">李四</a></li>
			<li><img src="../images/boy3.jpg"></img><br/><a href="#">王五</a></li>
			</ul>
		</div>
		<div>
			<span class="span1"><font class="font1">优酷公益</font><a href="#">更多牛人</a></span>
			<ul class="faceul">
			<li><img src="../images/boy.jpg"></img><br/><a href="#">张三</a></li>
			<li><img src="../images/boy2.jpg"></img><br/><a href="#">李四</a></li>
			<li><img src="../images/boy3.jpg"></img><br/><a href="#">王五</a></li>
			</ul>
		</div>
	</div>
  </body>
</html>

对应的CSS文件如下：

body{
	margin: 0 auto;
	width:1000px;
	height:1000px;
	font-size:12px;
	margin-top:5px;
}
.div1{
	width:350px;
	height:370px;
	border: 1px solid #F0F0EF;
	background-color:#FBFBFA;
}

/*定义几个常用的字体样式*/
.font1{
	font-weight: bold;
	font-size:20px;
	margin-left: 3px;
	margin-top:3px;
}

.span1{
	display:block;
}

.span1 a{
	/*margin-left:200px;*/
	float:right;
	margin-top:6px;
	/*右浮动也可以*/
}

.faceul{
	width:350px;
	height:70px;
	list-style-type: none;
	padding:0px;
}

.faceul li{
	float:left;
	width:107px;
	height:78px;
	margin-left:6px;
	text-align: center;/*注意居中写的位置*/
	/*表示放在该元素中的其他的元素会左右居中*/
}

.faceul img{
	margin-top:2px;
	width:80px;
	height:50px;
	margin-bottom:5px;
}

/*定义几种超链接的样式*/
a:LINK {
	text-decoration: none;
}
a:HOVER {
	text-decoration: underline;
}

最后实现的效果图（图片和原图不一样）：

KLeonard

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css_day9---盒子模型的综合案例

Day91、要达到如图效果：一开始我对想法是用很多个小块（div），即每个图片都占一个块。但实际上用列表就可以实现，因为图片的排列类似于列表，只是对格式加以控制即可。html代码如下： box.html 小龙女
复制链接

扫一扫