简单的HTML制作

于 2024-09-18 21:33:40 发布
阅读量265 收藏
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85041083/article/details/142341177
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界</title>
    <style>
        body{
            margin: 0;
            height: 50rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <img src="../assets/wdsj.jpg" alt="示例图片" width="300" height="200">
    <p>我的世界</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        *{
            box-sizing: border-box;
        }
        .head{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            background-color: black;
            height: 8rem;
            padding: 0 1rem;
            color: #ffffff;
        }
        .logo{
            height: 100%;
            line-height: 100%;
            display: flex;
            align-items: center;
        }
        .logo>img{
            height: 2rem;
            margin-right: 0.5rem;
        }
        m>a{
            text-decoration: none;
            color: #ffffff;
        }
        m>a:hover{
            text-decoration: underline;
            text-underline-offset: 0.2rem;
            text-decoration-thickness: 0.2rem;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="logo">
            <img src="../assets/LOGO.png" height="30" alt="LOGO">
            <span>我的世界</span>
        </div>
        <m>
            <a href="">首页</a>
            <a href="">新闻</a>
            <a href="">游戏</a>
            <a href="">教育</a>
            <a href="">关于我们</a>
        </m>
    <sdfhsioah></sdfhsioah>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        *{
            box-sizing: border-box;
        }
        ul{
            list-style: none;
            padding: 1rem;
            margin: 0;
        }
        ul>li{
            display: flex;
            margin-bottom: 1rem;
        }
        .thumbnail{
            width: 6rem;
            height: 6rem;
            background-color: rgb(0, 55, 255);
            border-radius: 0.4rem;
        }
        .inline-bock{
            display: inline-block;
        }
        .li-right{
            flex-grow: 1;
            border-bottom: 1px solid rgb(128, 128, 128, 0.236);
            display: flex;
            justify-content: space-between;
        }
        .li-title{
            font-size: 1.6rem;
            font-weight: bold;
        }
        .li-subtitle{
            font-size: 0.9rem;
            margin-left: 0.4rem;
            margin-top: 2.5rem;
        }
        .li-km{
            color: rgb(91, 91, 91);
        }
        .mark{
            background-color: rgb(254, 235, 210);
            color: rgb(204, 151, 5);
            padding: 0.2rem 0.4rem;
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul>
        <li>
        <div class="thumbnail"></div>
        <div class="li-right">
            <div>
                <div class="li-title">酥大娘中国烧饼</div>
                <div class="li-subtitle">江宁区</div>
            </div>
            
            <div>
                <div class="mark">点</div>
                <div class="li-subtitle li-km">2.6km</div>
            </div>
        </div>
    </li>
        <li>
            <div class="thumbnail"></div>
            <div class="li-right">
                <div>
                    <div class="li-title">酥大娘中国烧饼</div>
                    <div class="li-subtitle">江宁区</div>
                </div>
                
                <div>
                    <div>
                        <div class="mark">点</div>
                        <div class="mark">预</div>
                    </div>
                    <div class="li-subtitle li-km">2.6km</div>
                </div>
            </div>
        </li>
        <li>
            <div class="thumbnail"></div>
            <div class="li-right">
                <div>
                    <div class="li-title">酥大娘中国烧饼</div>
                    <div class="li-subtitle">江宁区</div>
                </div>
                
                <div>
                    <div class="mark">点</div>
                    <div class="li-subtitle li-km">2.6km</div>
                </div>
            </div>
        </li>
            <li>
                <div class="thumbnail"></div>
                <div class="li-right">
                    <div>
                        <div class="li-title">酥大娘中国烧饼</div>
                        <div class="li-subtitle">江宁区</div>
                    </div>
                    
                    <div>
                        <div>
                            <div class="mark">点</div>
                            <div class="mark">预</div>
                        </div>
                        <div class="li-subtitle li-km">2.6km</div>
                    </div>
                </div>
            </li>
    </ul>
    
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Layout</title>
    <style>
        *{
            box-sizing: border-box;
        } 
        body{
            margin: 0;
        }
        main{
            padding: 1rem;
        }
        hr{
            border-color: rgb(240, 248, 255, 0.238);
        }
        .card {
            width: 40rem;
            padding: 1rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .card>div{
            padding: 0.5rem;
        }
        .card-head{
            display: flex;
            gap: 1rem;
        }
        .card-head-logo{
            width: 5rem;
            height: 5rem;
        }
        .card-head-logo>img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <main>
        <div class="card">
            <div class="card-head">
                <div class="card-head-logo"><img src="../assets/wdsj.jpg" alt="Icon"></div>
                <div>
                    <div style="font-weight: bold;">Title</div>
                    <div style="font-size: 0.8rem; color: rgb(146, 147, 147);">April 01, 2024</div>
                </div>
            </div>
            <hr>
            <div style="font-size: 0.9rem; color: rgb(146, 147, 147);">我的世界我的世界我的世界我</div>
            <hr>
            <div>READ MORE</div>   
        </div>
    </main>
</body>
</html>
2401_85041083
关注
html网页制作代码大全——大学生影视主题网页制作——图图影视影院5页HTML+CSS+JavaScript
Q_Q___1875547220的博客
08-13 2640
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
html网页制作代码大全：庆余年——电影网站7页，不包含js 有登陆注册，表格 table布局 ，有的登录注册页面，内嵌 css
Q_Q___1875547220的博客
08-13 8924
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
推荐十款非常优秀的 HTML5 在线设计工具
weixin_33875839的博客
11-21 282
　　网络有很多优秀的设计和开发工具可能大家都不知道，因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具，这些工具能够帮助设计师们设计出更有创意的作品。随着 HTML5 技术的不断成熟，网络上涌现出越来越多的优秀 HTML5 应用，一起看看下面这些很棒的工具。 Online Sprite Box Tool 这款在线的 CSS Sprite 样式生成工具，结合jQuery、CSS3和HTML...
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
网页设计与制作
10-11 7367
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html的一些在线制作工具,在线制作工具
weixin_35550400的博客
05-30 522
HTML音画介绍之三--教你五分钟学会23种图片边条框和16种图片特效，制作可以如此简单好多朋友喜欢HTML音画边框和图片特效，几乎每天有人转载紫雨教程二--图片特效。这令紫雨改变了原拟教程计划，先就在线制作图片特效再写个续篇。因为对于初学者来说，运用在线制作方法，可以使初学者立马就会制作边条框和图片特效。使得制作更为简单便捷。这是一个在线编辑器--图片边框生成器 and 图片特效现将使用方法及其...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip
09-25
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
html制作简单的表格源码.zip
11-12
html表单制作及实例html制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.zip
使用HTML制作一个简单的个人主页
热门推荐
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
用javascript制作简单计算器.html
05-12
学习了javascript ，这个代码是使用javascript来做一个简单的计算器，可以实现简单的额加减乘除的计算
html网页的代码大全
12-03
html网页的代码大全 内容全面 涵盖了各种html源代码
网页设计html代码大全
02-07
文档对学习网页设计的人很有帮助，里面的HTML代码比较全面，学习时可供查阅，希望能对你学习网页设计有所帮助
成语在线(生成html)
02-21
软件介绍 来一来论坛成语栏目V2.0是在V1.0基础上的更新版。新增了生成成语HTML文件功能，从而大大减少了服务器访问的负担。只要进入管理页面login.asp即可生成所有成语单个页面，快速好用。 进入管理密码：www.laiyilai.com
html制作好看的个人简历(源码)
03-29
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下...
网页制作html新手代码,网页制作HTML基础标签代码大全
weixin_32160507的博客
06-09 3837
A标签标签说明实例a超链接标签aabbr表示文本的缩写SQL(!IE6)acronym与abbr类似，表示首字母缩写词DOMaddress表示文档的作者、签名、地址等联系信息，通常以斜体方式显示文本ymk18@163.comapplet用于在网页中插入可执行的applet程序暂无area在图象中定一个区域，对该区域进行分块链接暂无B标签标签说明实例b以粗体的方式显示文本bbase设置文档中的超链接...
网页制作的代码--HTML
sdfefafasfd的专栏
03-20 2820
html是标注语言，表面理解就是解释，是在客户端浏览器解释的。 同时在客户端浏览器解释执行的还有JavaScript。 c#和PHP、ASP这类的都是编程语言，不同的是后两者只用于Web编程，而C#还用于WinForm编程。 在网页设计的时候，HTML是用来控制你想表现在客户端的样子，JavaScript用来表现客户端操作的功能，编程语言用来表现服务端的功能。 客户
网页制作HTML基础标签代码大全
mail_cm的专栏
10-29 3860
from:http://blog.sina.com.cn/s/blog_615bd10b0100khfs.html   A标签 标签说明                                实例 a 超链接标签                                  a abbr 表示文本
html系统网页代码大全,html网页的代码大全
weixin_29629231的博客
06-27 3430
该楼层疑似违规已被系统折叠隐藏此楼查看此楼2)加入连接：写上你想写的字 1)贴图： 2)加入连接：写上你想写的字3)在新窗口打开连接：写上要写的字消除连接的下划线在新窗口打开连接：写上你想写的字4)移动字体(走马灯)：写上你想写的字5)字体加粗：写上你想写的字6)字体斜体：写上你想写的字7)字体下划线: 写上你想写的字8)字体删除线: 写上你想写的字9)字体加大: 写上你想写的字10)...
JS代码收藏大全
weixin_30337251的博客
12-31 4157
JS代码收藏大全 从其他地方找来的，希望对有需要的人带来方便！ 1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2...
HTML简单网页制作
最新发布
06-22
HTML，全称为HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。要创建一个简单的HTML网页，你可以遵循以下步骤： 1. **结构基础**： - 使用`<!DOCTYPE html>`声明文档类型，告诉浏览器这是一个HTML5文档。 - `<html>`标签是页面的根元素，包含所有其他内容。 - 在`<head>`部分，放置元数据如标题 `<title>`，这是浏览器标签页的标题。 - `<body>`标签包含了网页的实际内容，如文本、图像和链接。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个HTML页面</title> </head> <body> <!-- 内容将放在这里 --> </body> </html> ``` 2. **添加内容**： - 文本：使用`<p>`（段落）或`<h1>`-`<h6>`（标题）标签。 - 图像：用`<img>`标签，附上`src`属性指定图片URL。 - 链接：`<a>`标签，`href`属性指向目标地址。 ```html <body> <h1>欢迎来到我的网站</h1> <p>这是一个使用HTML创建的简单示例。</p> <img src="image.jpg" alt="我的图片"> <a href="https://www.example.com">点击这里访问另一个页面</a> </body> </html> ``` 3. **保存与查看**： - 将代码保存为`.html`文件，例如`index.html`。 - 双击打开文件或使用浏览器（如Chrome, Firefox等）打开该文件，网页内容就会显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值