html+css一个简单的个人介绍界面

最新推荐文章于 2024-04-18 13:51:27 发布
最新推荐文章于 2024-04-18 13:51:27 发布
阅读量9.8k 收藏 49
点赞数 6
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuyueshiba/article/details/104454867
版权 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>界面</title>
        <style>
            div{
                width: 400px;
                height: 400px;
                padding: 10px;
                position: absolute;
                border-color:black;
                border-style: solid;
            }
            textarea{
                width: 100%;
                height: 150px;
                padding: 0;
                resize: both;
                box-sizing: border-box;
            }
            .center-in-center {
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);}
        </style>
    </head>
    <body>
        <div class="center-in-center">
        <form action="">
          昵称：<input type="text" name="name" value="admin"><br>
          密码：<input type="password" name="password" value="....."><br>
          邮箱：<input type="email" name="mail" value="admin">
          <select>
              <option value="qq.com">qq.com</option>
              <option value="139.com">139.com</option>
              <option value="127.com">127.com</option>
          </select><br>
          性别：<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女<br>
          兴趣：<input type="checkbox" name="interest" value="旅游">旅游
                <input type="checkbox" name="interest" value="摄影">摄影
                <input type="checkbox" name="interest" value="运动">运动<br>
        个人介绍：<textarea>加油，奥里给</textarea><br>
                <center><input type="button" value="注册"></center><br>
        上传个人照片：<br><input type="button" value="选择文件">未选择文件
        </form>
        </div>
    </body>
</html>`

效果图：
在这里插入图片描述

涂月十八
关注
  • 6
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript
qq_365392777
09-29 2万+
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水
简单的个人网页，HTML+CSS
03-18
动态滑动，使用时将图片、.css以及.html文件均放置在Web文件夹下。 背景图片和头像的萌妹图可以自己选择。 当然我的背景图是美美的紫金港。
个人博客页面设计（html + css）
05-29
个人博客页面设计（html + css）
用HTML制作简单的自我介绍
Java_and_one的博客
03-17 4865
成功是你梦寐以求的那多玫瑰，挫折后是那遍及周围的针刺。快乐是你辛勤耕耘获得的果实，悲伤正是那成熟前的粃粒。
制作一个简单的HTML个人网页
Python老吕的博客
03-05 5238
大家可能发现了，只要你手头上有台能用的电脑，直接按照我这个文章，复制一下我的代码另存为指定文件，直接打开预览，立马就是一个简单的HTML个人网页了，制作一个简单的HTML个人网页是不是很简单呢？在这个样式中，我们设置了body、header、nav、main和footer的背景颜色、字体样式和边距等属性。选择index.html文件，鼠标右键→打开方式→选择其他应用→更多应用→下拉→选择记事本→点击确定。现在，您可以在HTML结构中的各个部分添加内容了。为了美化您的网页，您可以在。
个人网页（HTML+css）
weixin_46153254的博客
03-27 3209
这个是一个简单的个人网页，图片什么的都是网上找的，都可以自己替换的哦。下面是网页的效果图。以上是一部分代码哦，有兴趣的有问题需要解答小伙伴可以留言评论哈，我都会看的。
设计一个简单HTML爵士音乐网页（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
制作一个简单HTML个人网页网页——人物介绍梵高（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
热门推荐
xcLeigh
12-16 8万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
个人介绍主页制作简单的（html css js）
qq_51813155的博客
09-23 7374
个人主页网站设计 提出问题： 4个按钮，4个div，4个按钮控制控制div切换？（位置合适） 有一个div放4张图片？ 制作个留言区？ 解决问题： 4个div用position absolute； 使重叠一起（共同属性） 之后用z-index=1，使重叠位于上面（想让哪个div出现在最上层， 就加css属性z-index=1，其它的没有这个属性） js: 获取元素方式：通过获取它的css标签 找到元素并定义变量 var button=document.getElementsByClassName(‘
html+js+css自我介绍
07-18
html+js+css自我介绍，滑动滚轮进行界面的更换
个人简历html+css网页
11-06
主要是个人简历的网站网页前端，自己亲手写的，页面炫酷
html+css+js实现登录注册界面.rar
08-08
采用html+css+js技术实现登录注册界面共有六个案例，主要用来做个人博客、管理系统、购物网站的登录界面等等。
用html写文本变形动画
liulang68的博客
04-15 383
【代码】用html写文本变形动画。
前端开发攻略---合并表格单元格，表格内嵌套表格实现手风琴效果。
nibabaoo的博客
04-18 269
合并表格单元格，表格内嵌套表格实现手风琴效果。
【HTML】制作一个简单的实时字体时钟
qq_70814008的博客
04-11 1436
整体上，这个网页应用程序通过HTML提供了页面结构，CSS赋予了页面美观的样式，而JavaScript则让页面具有动态更新和用户交互的能力。三者共同协作，实现了一个既美观又实用的动态时钟和日期时间转换工具。
用html写一个搜索页面
最新发布
liulang68的博客
04-18 520
【代码】用html写一个搜索页面。
HTML+css制作一个支付商城界面
06-02
好的，下面是一个简单的支付商城界面的HTML和CSS代码示例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>支付商城</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>支付商城</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品</a></li> <li><a href="#">购物车</a></li> <li><a href="#">个人中心</a></li> </ul> </nav> </header> <main> <section class="product-list"> <h2>商品列表</h2> <ul> <li> <img src="https://via.placeholder.com/150x150" alt="product image"> <h3>商品名称</h3> <p>商品描述</p> <p>价格：$99.99</p> <button>加入购物车</button> </li> <li> <img src="https://via.placeholder.com/150x150" alt="product image"> <h3>商品名称</h3> <p>商品描述</p> <p>价格：$199.99</p> <button>加入购物车</button> </li> </ul> </section> <aside class="cart"> <h2>购物车</h2> <ul> <li> <h3>商品名称</h3> <p>价格：$99.99</p> <input type="number" value="1"> <button>删除</button> </li> <li> <h3>商品名称</h3> <p>价格：$199.99</p> <input type="number" value="1"> <button>删除</button> </li> </ul> <p>总价：$299.98</p> <button>去结算</button> </aside> </main> <footer> <p>© 2021 支付商城</p> </footer> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: center; } nav ul { list-style: none; display: flex; } nav li { margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { display: flex; } .product-list { flex: 3; padding: 20px; } .product-list h2 { margin-top: 0; } .product-list ul { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; } .product-list li { flex-basis: calc(50% - 20px); margin: 10px; padding: 10px; background-color: #f9f9f9; text-align: center; } .product-list img { max-width: 100%; height: auto; } .product-list button { background-color: #333; color: #fff; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; margin-top: 10px; } .cart { flex: 1; padding: 20px; background-color: #f9f9f9; } .cart h2 { margin-top: 0; } .cart ul { list-style: none; padding: 0; margin: 0; } .cart li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cart input { width: 50px; } .cart button { background-color: #333; color: #fff; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; } footer { background-color: #ccc; padding: 10px; text-align: center; } ``` 这个示例中包括了一个头部导航栏、一个商品列表和一个购物车，以及一个页脚。你可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

涂月十八

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值