CSS实例【八】

最新推荐文章于 2022-07-14 09:53:51 发布

虾尾丸子

最新推荐文章于 2022-07-14 09:53:51 发布

阅读量87

点赞数

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

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/118031095

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

hello！今天下午是CSS浮动：

有float属性的使用，包括图像浮动，段落第一个字放大浮动在左侧，还有图片廊（就是图片库，改变窗口大小，图片浮动排序）；
clear属性的使用，就是清除浮动，要不然会把下面的饿内容也带偏哦～。
最后好玩的还有一个网页，但是内容有丢丢多，怕乱就单独放到【九】里面了，这是从零散知识点到一个简易静态网页的转变，就像老师常说的量变引起质变，可能刚开始看有点懵，但是慢慢久了就会觉得其实没太难，细心+耐心让你收获很多！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			img
			{
				float: right;
				border: 1px dotted black;
				margin: 0rem 0rem 0.9375rem 1.25rem;
			}
			
			div
			{
				float: right;
				width: 7.5rem;
				margin: 0 0 0.9375rem 1.25rem;
				padding: 0.9375rem;
				border: 1px solid black;
				text-align: center;
			}
			span.fstFloat{
				/* 元素的宽度是相当于现在的字体大小的1.2倍大，元素是当前字体的400%，相当大 */
				float: left;
				width: 1.2em;
				font-size: 400%;
				font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
				line-height: 80%;
			}
			.thumbnail
			{
				float: left;
				width: 6.875rem;
				height: 5.625rem;
				margin: 0.3125rem;
			}
			.text_line
			{
				clear: both;
				margin-bottom: 0.125rem;
			}
			ul{
				float: left;
				width: 100%;
				padding: 0;
				margin: 0;
				list-style-type: none;
			}
			a
			{
				float: left;
				width: 6em;
				text-decoration: none;
				color: white;
				background-color: purple;
				padding: 0.2em 0.6em ;
				border-right: 1px solid white;
			}
			a:hover{background-color: #FF3300;}
			li{display: inline;}
		</style>
		
		
	</head>
	<body>
		
		<h1>一、css浮动</h1>
		<h2>1.float:</h2>
		<p>
			<img src="lala.jpg" width="95" height="84" >
			图像将向右浮动。黑色虚线边界添加到图像。我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:
			This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text.
		</p>
		
		<div>
			<img src="sun.gif" width="95" height="84" />
			<br>CSS is fun!
			<p></p>
		</div>
		<p>添加了边缘的0px的顶部、右侧的margin， 15px底部margin,和20px左侧的margin的图像。使得文本远离图片:This is some text.This is some text. This is some text.This is some text. This is some text.</p>
		
		<br>
		<h2>2.段落第一个字浮动到最左侧:</h2>
		<p><b>使用span标签，在head设置好style，将段落第一个字放入span标签即可</b></p>
		
		<p>
			<span class="fstFloat">这</span>里是一些文字，段落第一个字放大，并且浮动在最左侧。中午没睡着，有点困啊～～ 元素的宽度是相当于现在的字体大小的1.2倍大，元素是当前字体的400%，相当大
		</p>
		
		<h2>3.用float属性创建一个图片廊:</h2>
		<p>thumbnail:缩略图</p>
		<h4>图片库:试下调整窗口大小，看看图片没有足够空间会怎么样</h4>
		<img class="thumbnail" src="img1.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img2.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img3.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img4.jpeg" width="107" height="90"/>
		<p>如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻</p>
		<h2>4.clear在浮动中的作用</h2>
		<p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素</p>
		<img class="thumbnail" src="img1.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img2.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img3.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img4.jpeg" width="107" height="90"/>
		<p class="text_line"><b>注意看：第二个图片库与第一个分开，上下观察</b></p>
		<img class="thumbnail" src="img1.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img2.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img3.jpeg" width="107" height="90"/>
		<img class="thumbnail" src="img4.jpeg" width="107" height="90"/>
		<h2 class="text_line">5.创建一个水平菜单</h2>
		<br>
		<br>
		<ul>
			<li><a href="#">Link one</a></li>
			<li><a href="#">Link two</a></li>
			<li><a href="#">Link three</a></li>
			<li><a href="#">Link four</a></li>
			<p>上面的示例,ul元素和元素浮动。 li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。 ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。 我们添加一些颜色和边界使其更高档。</p>
		</ul>
		<h2>6.创建一个没有表格的网页（没有表格但是可以有列表啊～）</h2>
		<p>网页了网页了网页了，激动的心，颤抖的手，这个页面内容太多了，我新建一个</p>
	</body>
</html>

代码还是放到资源里，有问题的欢迎大家提出了交流学习，共同进步呀～

虾尾丸子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例【八】

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> img { float: right; border: 1px dotted black; margin: 0rem 0rem 0.9375rem 1.25rem; } div { f
复制链接

扫一扫