使用盒子模型制作浮动案例

最新推荐文章于 2024-07-16 20:55:17 发布

原创最新推荐文章于 2024-07-16 20:55:17 发布 · 689 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5

本文介绍了如何利用CSS盒子模型创建浮动布局，包括去除超链接下划线、设置元素背景色全显示、调整图片位置、移除li列表小圆点，并通过设置边距创建粉色小方框。通过这些步骤，可以清晰地理解CSS在页面布局中的应用。

定义超链接去除下划线

a:link{
 text-decoration:none;

将背景色显示全，定义为块
（在定义图片位置时可先设置一个背景色，以方便在调试时观看）

.span1{
background-color:pink;
display:block;
}

如图：
在这里插入图片描述

将li列表前的小圆点去除

/*设置ul列表大小*/
.faceul{
width:310px;
height:80px;
/*background-color:gray;*/
list-style-type:none;/*将li列表前的小圆点去除*/
}

设置图片背景色为粉色，与上边距和左边距都为5px，制成一个一个小方框

.faceul li{
float:left;/*在li中设置图片为左浮动*/
width:90px;
height:85px;
background-color:pink;
**加粗样式**margin-left:5px;/*设置图片背景色为粉色，与上边距和左边距都为5px，制成一个一个小方框*/
margin-top:5px;
text-align:center;/*text-align 表示放在该元素的其他元素会左右居中，设置图片居中与小方框中,也可用margin-top和margin-left来设置*/
}

如图：
在这里插入图片描述
完整案例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*设置body居中与大小颜色*/
body{
margin:0 auto;
width:1024px;
height:1000px;
border:1px solid blue;
font-size:12px;
}
.s1{
width:350px;
height:370px;
border: 1px solid gray;
}
/*定义字体大小与样式为粗体*/
.font1{
font-weight:bold;
font-size:15px;
margin-left:3px;
margin-top:3px;
}
/*定义超链接除去下划线*/
a:link{
 text-decoration:none;
}
.span1{
/*background-color:pink;*/
display:block;/*将背景色显示全，定义为块*/
}
.span1 a{
margin-left:225px;
margin-right:5px;
margin-top:5px;
}
.s1 img{
width:46px;
height:35px;
margin-top:3px;
border: 1px solid red;
}
/*设置ul列表大小*/
.faceul{
width:310px;
height:80px;
/*background-color:gray;*/
list-style-type:none;/*将li列表前的小圆点去除*/
}
.faceul li{
float:left;/*在li中设置图片为左浮动*/
width:90px;
height:85px;
/*background-color:pink;*/
margin-left:5px;/*设置图片背景色为粉色，与上边距和左边距都为5px，制成一个一个小方框*/
margin-top:5px;
text-align:center;/*text-align 表示放在该元素的其他元素会左右居中，设置图片居中与小方框中,也可用margin-top和margin-left来设置*/
}
</style>
</head>
<body>
<div class="s1">
<div >
<span class="span1"><font class="font1">图片展示</font><a href="#">更多图片</a></span>
<ul  class="faceul">
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><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="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><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="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
<li><img src="C:\Users\小强\Desktop\练习\image\life.jpg"><br/><a href="#">图片</a>
</li>
</ul>
</div>
</div>
</body>
</html>