菜单 搜索
首页 前端知识 简易的HTML网页设计

简易的HTML网页设计

2024-06-07 12:06:19 前端知识 前端哥 631 444 我要收藏

前言：

超文本标记语言（英语：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>
                &emsp;&emsp;&emsp;&emsp;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>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Qui ne indoctum electram vituperatoribus. Eirmod tamquam efficiendi mei cu, eum idque<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;voluptatum ad, quo id tollit regione prompta.Cu probo iusto assentior eos, usu summo<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;perpetua ne.'Te suas phaedrum ullamcorper has.Ea mei ponderum rationibus dissentias.<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;lnani phaedrum suavitate eu qui, vide aperiri facilis est eu.'Te appetere cotidieque pro, duo eu<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;assum facete instructior, no autem aeterno reprimique nec.Pri cu delectus adolescens,<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;eruditi placerat cu sed, zril nonumes forensibus in eam.Eam ne dolore diceret pericula, in vis<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;numquam pertinax. Vel ne dolorum cloquentiam, et vel senscrit incorrupte neglegentur, pro<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;cu audiam ocurreret reprimique.
            </p>
            <p>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Qui ne indoctum electram vituperatoribus.Eirmod tamquam efficiendi mei cu, eum id<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;quevoluptatum ad, quo id tollit regione prompta.Cu probo iusto assentior. Qui ne indoctum<br/>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;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>
                &emsp;&emsp;&emsp;&emsp;MY <span class="L1">SERVICES</span>
            </h1>
        </div>
        <div class="K2">

        </div>
        <div class="K5">
            <div class="M1">

            </div>
            <div class="M2">
                <h4>
                    &emsp;PHOTOGRAPHY
                </h4>
            </div>
            <div>
                <p style="line-height: 30px">
                    &emsp;&emsp;Ei constituam theopharastus per,</br>
                    &emsp;&emsp;sea dolorum disputationi in,vel</br>
                    &emsp;&emsp;menandri suavitate similique in.</br>
                    &emsp;&emsp;Vide assum conceptam eum</br>
                </p>
            </div>
        </div>
        <div class="K6">
            <div class="M1">

            </div>
            <div class="M2">
                <h4>
                    &emsp;PROGRAMMING
                </h4>
            </div>
            <div>
                <p style="line-height: 30px">
                    &emsp;&emsp;Ei constituam theophrastus per,</br>
                    &emsp;&emsp;sea dolorum disputationi in, vel</br>
                    &emsp;&emsp;menandri suavitate similique in.</br>
                    &emsp;&emsp;Vide assum conceptam eum.</br>
                </p>
            </div>
        </div>
        <div class="K7">
            <div class="M1">

            </div>
            <div class="M2">
                <h4>
                    &emsp;WORDPRESS
                </h4>
            </div>
            <div>
                <p style="line-height: 30px">
                    &emsp;&emsp;Ei constituam theophrastus per,</br>
                    &emsp;&emsp;sea dolorum disputationi in, vel</br>
                    &emsp;&emsp;menandri suavitate similique in.</br>
                    &emsp;&emsp;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>
                &emsp;&emsp;&emsp;&emsp;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>
                &emsp;&emsp;&emsp;&emsp;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>

 

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11232.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Jackson 反序列化失败，出现JSON: Unrecognized field

2024-06-13 21:06:48

高性能 Rust JSON 库 sonic-rs 优化实践

2024-06-13 21:06:41

labelme标签格式json转化成yolov8支持是数据集格式

2024-06-13 21:06:39

JWT（JSON Web Tokens）入门与Java实践

2024-06-13 21:06:39

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

常见的第三方依赖管理工具：Maven、Gradle、npm、Nuget……（什么是第三方依赖工具）

2024-06-13 21:06:26

【全网首出】npm run serve报错 Expression: thread_id_key != 0x7777

2024-06-13 21:06:20

vue3代码运行报错 No matching export in “node_modules/.pnpm/vue-demi@0.14.6_vue@3.2.47/node_modules/vue-dem

2024-06-13 21:06:20

npm install 出现 npm ERR! cb() never called! npm ERR! This is an error with npm itself.

2024-06-13 21:06:20

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！