HTML&CSS基础2

最新推荐文章于 2024-04-20 17:59:05 发布

半皖丨清愁

最新推荐文章于 2024-04-20 17:59:05 发布

阅读量240

点赞数

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

本文链接：https://blog.csdn.net/weixin_47481936/article/details/109646949

版权

盒子阴影(重要)

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
    
				width: 200px;
				height: 200px;
				background-color: #bfa;
				margin: 100px auto;
				/*水平位置		垂直位置	模糊距离	大小	颜色	inset/outset(默认不写):里阴影/外阴影*/
				/*必须属性:水平位置,垂直位置*/
				/*box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);*/
			}
			.box:hover{
    
				box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

文字阴影

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
    
				text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
			}
		</style>
	</head>
	<body>
		<p>火之意志继承者</p>
	</body>
</html>

浮动

网页布局:标准流，浮动，定位

浮动特性:

脱离标准流，浮动的盒子不再保留原先的位置
浮动元素一行显示，顶端对齐，如果父盒子装不下，则会另起一行显示
浮动元素具有行内块元素特性
浮动元素经常搭配标准流父级盒子食用

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1 {
    
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			
			.box2 {
    
				float: left;
				width: 200px;
				height: 200px;
				background-color: green;
			}
			
			.box3 {
    
				float: left;
				width: 100px;
				height: 200px;
				background-color: purple;
			}
			
			.span1 {
    
				width: 100px;
				height: 100px;
				float: left;
				background-color: #bfa;
			}
			
			.span2 {
    
				float: right;
				height: 200px;
				background-color: skyblue;
			}
		</style>
	</head>

	<body>
		<div class="box1">div</div>
		<div class="box2">div</div>
		<div class="box3">div</div>
		<span class="span1">span</span>
		<span class="span2">spannnnn</span>
	</body>

</html>

基本网页布局

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
    
				margin: 0;
				padding: 0;
			}
			li{
    
				list-style: none;
			}
			.top{
    
				height: 50px;
				background-color: gray;
			}
			.banner{
    
				width: 980px;
				height: 150px;
				background-color: green;
				margin: 10px auto;
			}
			.box{
    
				width: 980px;
				height: 300px;
				margin: 0 auto;
				background-color: pink;
			}
			.box li{
    
				width: 237px;
				height: 300px;
				background-color: skyblue;
				float: left;
				margin-right: 10px;
			}
			.box .last{
    
				margin-right: 0;
			}
			.footer{
    
				height: 200px;
				background-color: gray;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="box">

最低0.47元/天解锁文章

半皖丨清愁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS基础2

盒子阴影(重要)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #bfa; margin: 100px auto; /*
复制链接

扫一扫

专栏目录