标签：40px 网页 效果 auto height html5 设置 margin css
一、效果分析
根据案例示意图我们对案例的效果进行分析
二、具体实现
-
1.打开Dreamweaver2021新建一个html5格式文档，并设置title
-
-
2.在新建的的文档里利用html搭建起整体框架结构
-
3.搭建完整体的结构之后引入对应的图文内容
-
4.最后嵌入式的方式引入css样式设计效果
-
最后使用浏览器打开预览
效果如下
实现代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<style>
*{
margin: 0px;
padding: 0px;
/*清除浏览器的默认样式*/
}
.all{
width: 150px;
height: 278px;
margin: 50px auto;/*设置50px的外边距，在使用auto实现总体的居中效果*/
font-size: 16px;
}
div p{/*使用后代选择器对div内嵌套的段落文本p进行设置*/
width: 138px;
height: 40px;
border: 1px #333 solid;
padding-left:10px;/*设置文字的左边内边距*/
line-height: 40px;
margin-bottom: 10px;/*设置p标签的内部下边距，让其分隔开*/
}
</style>
</head>
<body>
<div class="all" >
<div>
<img src="user.jpg" alt="用户头像">
</div>
<div>
<p> 用户姓名：</p>
<p> 学习进度：</p>
<p> 兴趣爱好：</p>
<p> 参与的群：</p>
</div>
</div>
</body>
</html>
标签：40px,网页,效果,auto,height,html5,设置,margin,css 来源： https://blog.csdn.net/No1banana/article/details/122705890
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。