简易的HTML网页设计
简单的HTML网页，适合新手
·
前言：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！
图片展示：
代码段：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>I'M A PROGRAMMER</title>
</head>
<body>
<div class="H1">
<h2 class="L2">
</h2>
</div>
<div class="H2">
<h3 class="L3">
</h3>
</div>
<div class="H3">
<div class="K1">
<h1>
    I ' M A <span class="L1">PROGRAMMER</span>
</h1>
</div>
<div class="K2">
</div>
<div class="K3">
<p>
N A M E : John Doe
</p>
<hr/>
<p>
J O B : Freelancer
</p>
<hr/>
<p>
A G E : 26 Years
</p>
<hr/>
<p>
R E S I D E N C E : United States
</p>
<hr/>
<p>
H O M E T O W N : Dokri
</p>
</div>
<div class="K4">
<p>
      Qui ne indoctum electram vituperatoribus. Eirmod tamquam efficiendi mei cu, eum idque<br/>
      voluptatum ad, quo id tollit regione prompta.Cu probo iusto assentior eos, usu summo<br/>
      perpetua ne.'Te suas phaedrum ullamcorper has.Ea mei ponderum rationibus dissentias.<br/>
      lnani phaedrum suavitate eu qui, vide aperiri facilis est eu.'Te appetere cotidieque pro, duo eu<br/>
      assum facete instructior, no autem aeterno reprimique nec.Pri cu delectus adolescens,<br/>
      eruditi placerat cu sed, zril nonumes forensibus in eam.Eam ne dolore diceret pericula, in vis<br/>
      numquam pertinax. Vel ne dolorum cloquentiam, et vel senscrit incorrupte neglegentur, pro<br/>
      cu audiam ocurreret reprimique.
</p>
<p>
      Qui ne indoctum electram vituperatoribus.Eirmod tamquam efficiendi mei cu, eum id<br/>
      quevoluptatum ad, quo id tollit regione prompta.Cu probo iusto assentior. Qui ne indoctum<br/>
      electram vituperatoribus. Eirmod tamquam efficiendi mei cu, eum idque voluptatum ad.<br/>
</p>
</div>
</div>
<div class="H4">
<h3 class="L4">
</h3>
</div>
<div class="H5">
<h2 class="L5">
</h2>
</div>
<div class="H1">
<h2 class="L2">
</h2>
</div>
<div class="H2">
<h3 class="L3">
</h3>
</div>
<div class="H3">
<div class="K1">
<h1>
    MY <span class="L1">SERVICES</span>
</h1>
</div>
<div class="K2">
</div>
<div class="K5">
<div class="M1">
</div>
<div class="M2">
<h4>
 PHOTOGRAPHY
</h4>
</div>
<div>
<p style="line-height: 30px">
  Ei constituam theopharastus per,</br>
  sea dolorum disputationi in,vel</br>
  menandri suavitate similique in.</br>
  Vide assum conceptam eum</br>
</p>
</div>
</div>
<div class="K6">
<div class="M1">
</div>
<div class="M2">
<h4>
 PROGRAMMING
</h4>
</div>
<div>
<p style="line-height: 30px">
  Ei constituam theophrastus per,</br>
  sea dolorum disputationi in, vel</br>
  menandri suavitate similique in.</br>
  Vide assum conceptam eum.</br>
</p>
</div>
</div>
<div class="K7">
<div class="M1">
</div>
<div class="M2">
<h4>
 WORDPRESS
</h4>
</div>
<div>
<p style="line-height: 30px">
  Ei constituam theophrastus per,</br>
  sea dolorum disputationi in, vel</br>
  menandri suavitate similique in.</br>
  Vide assum conceptam eum.</br>
</p>
</div>
</div>
</div>
<div class="H4">
<h3 class="L4">
</h3>
</div>
<div class="H5">
<h2 class="L5">
</h2>
</div>
<div class="H1">
<h2 class="L2">
</h2>
</div>
<div class="H2">
<h3 class="L3">
</h3>
</div>
<div class="H3">
<div class="K1">
<h1>
    MY <span class="L1">SKILLS</span>
</h1>
</div>
<div class="K2">
</div>
<div class="K8">
<div class="M3">
<h5>
H T M L / C S S
</h5>
</div>
<div class="M4">
<div style="height: 10px;width: 400px;background-color: blue">
</div>
</div>
</div>
<div class="K9">
<div class="M3">
<h5>
J A V A S C R I P T
</h5>
</div>
<div class="M4">
<div style="height: 10px;width: 400px;background-color: blue">
</div>
</div>
</div>
<div class="K10">
<div class="M3">
<h5>
P H P
</h5>
</div>
<div class="M4">
<div style="height: 10px;width: 200px;background-color: blue">
</div>
</div>
</div>
<div class="K11">
<div class="M3">
<h5>
W O R D P R E S S
</h5>
</div>
<div class="M4">
<div style="height: 10px;width: 300px;background-color: blue">
</div>
</div>
</div>
<div class="K12">
<div class="M3">
<h5>
J Q U E R Y
</h5>
</div>
<div class="M4">
<div style="height: 10px;width: 350px;background-color: blue">
</div>
</div>
</div>
<div class="K13">
<div class="M3">
<h5>
S E O
</h5>
</div>
<div class="M4">
<div style="height: 10px;width: 250px;background-color: blue">
</div>
</div>
</div>
</div>
<div class="H4">
<h3 class="L4">
</h3>
</div>
<div class="H5">
<h2 class="L5">
</h2>
</div>
<div class="H1">
<h2 class="L2">
</h2>
</div>
<div class="H2">
<h3 class="L3">
</h3>
</div>
<div class="H3">
<div class="K1">
<h1>
    MY <span class="L1">PRICING</span>
</h1>
</div>
<div class="K2">
</div>
<div style="width: 300px;height: 350px;float: left;margin-right: 70px;border: 1px solid black">
<div style="width: 300px;height: 100px;margin-top: -70px">
<h6 style="text-align: center;font-size: 30px;line-height: 90px">
BASIC
</h6>
</div>
<div style="width: 300px;height: 200px">
<div style="width: 50px;height: 200px;float: left">
</div>
<div style="width: 200px;height: 200px;float: left">
<p style="text-align: center">
<span style="position: relative;top: -55px">$</span>
<span style="line-height: 150px;font-size: 100px;font-weight: bold">19</span>
<span>/ H R</span>
</p>
</div>
<div style="width: 50px;height: 200px;float: left">
</div>
</div>
<div style="clear: both;text-align: center">
App Designing
</div>
</div>
<div style="width: 300px;height: 350px;float: left;margin-right: 70px;border: 1px solid black">
<div style="width: 300px;height: 100px;margin-top: -70px">
<h6 style="text-align: center;font-size: 30px;line-height: 90px">
PRO
</h6>
</div>
<div style="width: 300px;height: 200px">
<div style="width: 50px;height: 200px;float: left">
</div>
<div style="width: 200px;height: 200px;float: left">
<p style="text-align: center">
<span style="position: relative;top: -55px">$</span>
<span style="line-height: 150px;font-size: 100px;font-weight: bold">29</span>
<span>/ H R</span>
</p>
</div>
<div style="width: 50px;height: 200px;float: left">
</div>
</div>
<div style="clear: both;text-align: center">
App Designing
</div>
</div>
<div style="width: 300px;height: 350px;float: left;border: 1px solid black">
<div style="width: 300px;height: 100px;margin-top: -70px">
<h6 style="text-align: center;font-size: 30px;line-height: 90px">
GOLD
</h6>
</div>
<div style="width: 300px;height: 200px">
<div style="width: 50px;height: 200px;float: left">
</div>
<div style="width: 200px;height: 200px;float: left">
<p style="text-align: center">
<span style="position: relative;top: -55px">$</span>
<span style="line-height: 150px;font-size: 100px;font-weight: bold">39</span>
<span>/ H R</span>
</p>
</div>
<div style="width: 50px;height: 200px;float: left">
</div>
</div>
<div style="clear: both;text-align: center">
App Designing
</div>
</div>
</div>
<div class="H4">
<h3 class="L4">
</h3>
</div>
<div class="H5">
<h2 class="L5">
</h2>
</div>
</body>
</html>
<style>
body{
background: url("M1.jpg") center;
padding: 0px;
margin: 0px;
}
h2{
width: 1400px;
height: 30px;
}
h3{
width: 30px;
height: 642px;
}
h4{
font-size: 30px;
text-align: left;
}
h5{
font-size: 20px;
color: blue;
}
.H1{
width:100%;
height: 100px;
}
.H2{
width:8%;
height: 650px;
float: left;
}
.H3{
width: 84%;
height: 650px;
float: left;
}
.H4{
width: 8%;
height: 650px;
float: left;
}
.H5{
clear: both;
width: 100%;
height: 100px;
}
.K1{
height: 300px;
margin: -22px 0px;
line-height: 200px;
}
.K2{
width: 130px;
height: 350px;
float: left;
}
.K3{
width: 300px;
height: 350px;
float: left;
text-align: left;
}
.K4{
width: 800px;
height: 350px;
float: left;
line-height: 30px;
}
.K5{
width: 350px;
height: 350px;
float: left;
margin-right: 50px;
border: 2px solid black;
}
.K6{
width: 350px;
height: 350px;
float: left;
margin-right: 50px;
border: 2px solid black;
}
.K7{
width: 350px;
height: 350px;
float: left;
border: 2px solid black;
}
.K8{
width: 500px;
height: 50px;
float: left;
margin-right: 30px;
}
.K9{
width: 500px;
height: 80px;
float: left;
}
.K10{
margin-top: 30px;
margin-right: 30px;
width: 500px;
height: 80px;
float: left;
}
.K11{
margin-top: 30px;
width: 500px;
height: 80px;
float: left;
}
.K12{
margin-top: 30px;
margin-right: 30px;
width: 500px;
height: 80px;
float: left;
}
.K13{
margin-top: 30px;
width: 500px;
height: 80px;
float: left;
}
.L1{
color: blue;
}
.L2{
border: 3px solid dodgerblue;
margin: auto;
position: relative;
top: 65px;
}
.L3{
border: 3px solid dodgerblue;
margin: auto;
position: relative;
left: 9px;
}
.L4{
border: 3px solid dodgerblue;
margin: auto;
position: relative;
right: 9px;
}
.L5{
border: 3px solid dodgerblue;
margin: auto;
position: relative;
bottom:2px;
}
.M1{
width: 350px;
height: 150px;
}
.M2{
margin-top: -45px;
width: 350px;
height: 50px;
}
.M3{
margin-top: -33px;
width: 500px;
height: 30px;
}
.M4{
width: 500px;
height: 10px;
border: 1px solid white;
}
</style>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)