HTML+CSS3+Bootstrap第二章例子大全

DarkFlameM

已于 2024-03-25 12:30:30 修改

阅读量253

点赞数 13

分类专栏： html 文章标签： html css3 bootstrap

于 2024-03-24 11:15:36 首次发布

本文链接：https://blog.csdn.net/weixin_63175492/article/details/136983696

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

哇酷哇酷！

例2-1shadow属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>shadow属性</title>
		<style>
				
			*{
				background-color: #000;
			}
			p{
				font-size: 50px;
				color:  rgba(255,223,0,1);
	/* 			设置文字阴影的垂直距离,水平距离,模糊半径和颜色 */
				text-shadow: 10px 10px 10px #ccc;
			}
		</style>
	</head>
	<body>
		<P>D.F.M.</P>
	</body>
</html>

运行效果：

例2-2@font-face用法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>@font-face用法</title>
</head>
<style>
@font-face {
    font-family: myFont;
    src:url('fonts/demo2-1/书法.ttf');
}
    div{
        font-family: myFont;
        font-size: 4em;
    }
</style>
<body>
<div>
    使用@font-face，享受美好人生
</div>
</body>
</html>

运行效果：

例2-3使用font-awesome

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>字体图标应用</title>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<i class="fa fa-comments" style="font-size: 2em"></i>
</body>
</html>

运行效果：

例2-4字体图标应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>字体图标应用</title>
    <style>
        @font-face {
            font-family: 'FontAwesome';
            src: url("fonts/fontawesome-webfont.eot?v=4.5.0");
            src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.5.0")
            format("embedded-opentype"),
            url("fonts/fontawesome-webfont.woff2?v=4.5.0") format("woff2"),
            url("fonts/fontawesome-webfont.woff?v=4.5.0") format("woff"),
            url("fonts/fontawesome-webfont.ttf?v=4.5.0")
            format("truetype"),
            url("fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular")
            format("svg");
            font-weight: normal;
            font-style: normal;
        }
      
        .fa-weixin:before {
            content: "\f1d7";
        }
        .fa {
            color: green;
            font:  normal normal 50px FontAwesome;
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body>
<i class="fa fa-weixin"></i>
<h5>WECHAT</h5>
</body>
</html>

运行效果：

例2-5css3盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.box{
				width: 800px;
			}
			img{
				width: 150px;
				height: 150px;
				float: left;
				box-sizing: border-box;
				border: 1px solid #000;
				margin-left: 1px;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="css/images/goods/登山鞋.jpg" alt="" />
			<img src="css/images/goods/女包.jpg" alt="" />
			<img src="css/images/goods/男包.jpg" alt="" />
			<img src="css/images/goods/棉服.jpg" alt="" />
		</div>
	</body>
</html>

运行结果：