创建简易HTML页面-1

最新推荐文章于 2024-08-22 21:22:47 发布

码农不秃呀

最新推荐文章于 2024-08-22 21:22:47 发布

阅读量276

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_53271010/article/details/120754809

版权

本文通过实例展示了如何在HTML中创建基础结构，并使用CSS设置body元素样式，包括边距、边框、高度、内填充和背景色。后续还介绍了如何添加div元素，以及针对wrap元素的样式调整和HTML全局背景色的设置。

摘要由CSDN通过智能技术生成

新建一个html文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

给body添加一些样式：（在head元素上挂载一个style元素）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<style>

</style>

</head>
<body>

</body>
</html>

写样式表：

<style>
body{
margin:2% 20%;
border:2px solid #666;
height:500px;
}
</style>

效果：

给body添加padding：

<style>
body{
margin:2% 20%;
border:2px solid #666;
height:500px;
padding：20px;
}
</style>

F12 刷新效果图：

为body添加背景色：

<style>
body{
margin:2% 20%;
border:2px solid #666;
height:500px;
padding：20px;
background-color:orange;
}
</style>

效果图：

为html添加背景色：

<style>
html{
background-color:#fff;
}
body{
margin:2% 20%;
border:2px solid #666;
height:500px;
padding：20px;
background-color:orange;
}
</style>

效果图：

在body元素上挂载一个div元素：

<body>
<div class='wrap'></div>
</body>

注：为div元素绑定一个class属性，属性值叫"wrap",多个元素可以绑定一个相同的class,即绑定了这个class的元素都能够拥有相同的样式效果。

给wrap添加样式：

.wrap{
height:80px;
background-color:skyblue;
}

效果图：

将高度改为100%：

.wrap{          padding.html:21
height:100%;
background-color:skyblue;
}

效果图：

关注