前端开发过程，网页的布局是最基本的元素，其中图文的布局是最常见的,下面我总结的常见的网页布局方式，与大家分享:
收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本控制1</title>
<style type="text/css">
p{font-weight: bold; /* 定义粗体 */
font-size: 30px; /* 定义字体大小*/
font-family: 楷体; /* 定义字体*/
text-align: center; /*文本居中center*/
}
h1 {font-weight: bold; /* 定义粗体 */
font-size: 30px; /* 定义字体大小*/
font-family: 楷体; /* 定义字体*/
text-align: center; /*文本居中center*/
}
span{font-size: 40px;
font-weight: bold; font-family:georgia ;
}
img{width: :300px; height: 400px;}
b{display: block;width: 300px;height: 40px;
background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;
}
b:hover{overflow: visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外*/
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<!-->Google的Logo</!-->
<span style="color: #0388F1">G</span>
<span style="color:rgb(245,28,39)">o</span>
<span style="color: #FFE80E">o</span>
<span style="color: #0388F1">g</span>
<span style="color: #39FF1B">l</span>
<span style="color: #FFE80E">e</span>
<!-- 图文混排 -->
<p style="display: inline-block; width: 300px;height: 400px;">能解决常规业务逻辑，PHP操作mysql增删改查，动态网站数据展示，能够手写mvc框架。</p>
<br>
<img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg">
<b>能解决常规业务逻辑，PHP操作mysql增删改查，动态网站数据展示，能够手写mvc框架。</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
上面使用的样式主要有：
p 段落的样式
h1标题一的样式
span的样式
img的样式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
