都说程序员是大大的直男，但是一旦程序员浪漫起来，他们会用他们狂拽酷炫吊的技能展现自己的罗曼蒂克实力，那时候就真的没文科男什么事啦！下面我就跟大家分享如何用简单的html制作一个网页版的爱心表白，不管你是不是程序员都能用，手机就可展示。
先来看下效果：
后面会提供给大家源代码，在这里先交大家怎么去根据自己的实际情况去改这个文件。
2024年09月01日
都说程序员是大大的直男，但是一旦程序员浪漫起来，他们会用他们狂拽酷炫吊的技能展现自己的罗曼蒂克实力，那时候就真的没文科男什么事啦！下面我就跟大家分享如何用简单的html制作一个网页版的爱心表白，不管你是不是程序员都能用，手机就可展示。
先来看下效果：
后面会提供给大家源代码，在这里先交大家怎么去根据自己的实际情况去改这个文件。
2024年09月01日
效果如图:
代码如下：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css垂直菜单栏</title> <link rel="stylesheet" href="index.css" media="screen" type="text/css" /> </head> <body> <div id="container"> <div style="text-align:center;clear:both;"> </div> <div class="tab-container"> <div id="c1"> <a href="#c1" title="First">First</a> <div class="tab-content"> <h3>First</h3> </div> </div> <div id="c2"> <a href="#c2" title="Second">Second</a> <div class="tab-content"> <h3>Second</h3> </div> </div> <div id="c3"> <a href="#c3" title="Third">Third</a> <div class="tab-content"> <h3>Third</h3> </div> </div> <div id="c4"> <a href="#c4" title="Fourth">Fourth</a> <div class="tab-content"> <h3>Fourth</h3> </div> </div> </div> </div> </body> </html>
2024年09月01日
实例
设置一个p元素的所有四个边距：
p
{
margin:2cm 4cm 3cm 4cm;
}
属性定义及使用说明
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
2024年09月01日
实例
设置一个p元素的右边距：
p
{
margin-right:2cm;
}
属性定义及使用说明
margin-right属性设置元素的右边距。
注意： 负值是允许的。
2024年09月01日
好程序员web前端培训分享CSS不同元素margin的计算：
行内级元素
Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
2024年09月01日
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
* {
margin: 0;
}
.mask {
background-color: #7b7070;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
margin-top: -100px;
background-color: #fff;
height: 200px;
width: calc(100% - 50px); //这里是水平居中的关键 margin-left = 50/2
margin-left: 25px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div class="mask"></div>
<div class="box">
<p>title</p>
</div>
</div>
</body>
</html>
2024年09月01日
margin 外边距（标签与标签之间的距离）
margin的四个方向
margin-top 上边距
margin-right 右边距
2024年09月01日
我们先分析一下整个网页的结构，整体内容采用的是一个两列布局，导航无限延长的背景，并且添加了分割符号
素材：
第一步： 去掉默认的HTML间距。
*{padding:0;margin:0;}
Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h1,div等)