精华内容
下载资源
问答
  • 个人名片HTML5模板

    2019-12-01 12:50:14
    个人名片HTML5模板
  • HTML简单练习——个人名片

    千次阅读 2021-02-01 22:05:12
    个人名片 <!doctype html> <html> <head> <meta charset="utf-8"> <title>个人名片</title> </head> <link rel="stylesheet" href="css/style.css"> <...

    个人名片

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>个人名片</title>
        </head>
        <link rel="stylesheet" href="css/style.css">
        <body>
            <div>
                <h1 style="color:blue">姓名</h1>
                <img src="image/n.jpg" width="150" height="200">
                <p>sust学生</p>
            </div>
    
            <div>
                <h2>我的爱好</h2>
                <ul>
                    <li id="hello">写代码</li>
                    <li class="world">乒乓球</li>
                    <img src="image/p.jpg" width="150" height="200">
                    <li>看综艺</li>
                    <li>玩游戏</li>
                </ul>
            </div>
    
            <div>
                <h2>我的学习经历和梦想</h2>
                <ol>
                    <li>y中学</li>
                    <li>sust大学</li>
                    <li><a href="https://www.qq.com/">腾讯</a></li>
                </ol>
            </div>
        </body>
    </html>
    

    还需要的配置
    在这里插入图片描述
    css文件里面是
    在这里插入图片描述
    代码

    /*元素选择器*/
    h2{
        color: aquamarine;
    }
    /*id选择器*/
    #hello{
        color: red;
    }
    /*类选择器*/
    li.world{
        color: red;
    }
    h1{
        text-align: center;/*居中*/
        font-size: 100px;/*字体大小*/
    }
    body{
        background-image: url("../image/n.jpg");
    }
    div.hobby li:hover{
        color: blue;
    }
    
    

    image里面是一些图片(图片随便放,只要图片名称和代码中的一致即可)
    在这里插入图片描述
    最后就在tomcat/webapps目录下,放进去,启动tomcat,就可以看到成果。

    展开全文
  • HTML基础知识学习 1.什么是html 2.标题元素 3.图片元素 4.input 5.列表 6.超链接 7.换行 +++++++++++++++++++++++++++++++++++++ 1.什么是html 用来描述网页的语言、超文本标记语言、不是编程,而是一种标记语言、...

    HTML基础知识学习

    HTML :构建一个PC和移动端展示的页面。[搭骨架]
    CSS:样式,显示更加丰富。[ 装修]
    JS: JavaScript(JS), 动起来,调用后端接口(API) 。

    1.什么是html

    用来描述网页的语言、超文本标记语言、不是编程,而是一种标记语言、使用标记标签来描述网页等等…由一系列的元素组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。

    2.嵌套元素

    可以把元素放到其它元素之中——这被称作嵌套。

    <p>我爱我的<strong>祖国</strong></p>
    

    这里使用 标签,来强调 祖国 这一内容。

    3.块级元素和内联元素

    <p>第一段</p>
     <p>第二段</p> 
     <p>第三段</p> 
     <p>第四段</p> 
    
    
    <strong>第一句话</strong> 
    <strong>第二句话</strong> 
    <strong>第三句话</strong>
    <strong>第四句话</strong>
    
    • 块级元素在页面中默认以块的形式展现。更多的是表示一类段落的语义
    • 内联元素不会导致文本换行。更多的表示一个词、一句话等语义

    4.HTML 注释

    为了将一段HTML中的内容置为注释,你需要将其用特殊的记号 包括起来, 比如:

    <p>我在注释外!</p> 
    <!-- <p>我在注释内!</p> -->
    

    常见的元素介绍

    1.标题元素:越往下字体越小

    <h1><h6>越往下字体越小
    <h1>学习 Java</h1>
    <h2>学习 Java</h2> 
    <h3>学习 java</h3> 
    <h4>学习 java</h4>
    <h5>学习 java</h5> 
    <h6>学习 Java</h6>
    

    2.段落:

    段落:  <p>
    <h1>为什么数据结构很重要</h1> 
    <p>因为在计算机的使用过程中,数据结构使用的非常频繁。</p>
    

    3.列表:

    > 无序列表 <ul> 
    > 有序列表: <ol> 
    > 列表项目: <li>
    
    <h1>早餐提供:</h1> 
    <ul>
         <li>豆浆</li> 
         <li>油条</li> 
         <li>豆腐脑</li> 
         <li>米汤</li> 
    </ul>
    
    <h1>学校怎么走?</h1> 
    <ol>
        <li>沿着条路走到头</li> 
        <li>右转</li> <li>直行穿过第一个十字路口</li> 
        <li>在第三个十字路口处左转</li> 
        <li>继续走 300 米,学校就在你的右手边</li> 
    </ol>
    

    4.超链接:

    超链接可以从一个页面跳转到另一个页面,或是当前页面的其他位置
    使用a标签来定义超链接
    属性:
    herf:指定跳转路径,
    值可以是外部网站的地址
    也可以写一个内部页面地址
    超链接是行内元素,在a标签中可以嵌套除自身外任何元素

    当我们需要跳转一个服务器内部页面时,一般我们会使用相对路径,
    相对路径使用./或…/
    ./代表同级目录下,可以省略不写
    …/代表当前目录的上级目录

    超链接: <a>
    <p>创建了一个指向<a href="http://bitedu.vip/">比特论坛</a>的超链接。</p>
    
    
    <body>
         <a href="http://www.baidu.com">超链接</a>
    </body>
    

    5.图片元素

    <img src="图片路径">
    <h1>图片</h1> 
    <img src="bite.jpg">
    

    6.块级无语义元素:

    无语义元素,通常是用来组织内容,方便之后通过 css 或者 js 对其进行布局或操作。

    <!-- 某个版块 --> 
    <div>
          <h2>...</h2> 
          <p>...</p> 
    </div> 
    
    <!-- 另一个版块 --> 
    <div>
        <h2>...</h2> 
        <p>...</p> 
    </div>
    

    7.内联无语义元素:

    内联无语义元素: <span>
    <p>大家一起往前<span></span>啊!</p>
    

    8.input

    input可以当作文本框,密码框,按钮

    在这里插入图片描述

    9换行

    1<br></br> 换行符
    2)<p></p>  段落符
    3><div></div>  无语义的容器符
    

    CSS基础知识学习

    在这里插入图片描述
    样式优先选择权:级别最高是自己单独的样式,然后才是全局样式。

    ###使用CSS有3种方式

    (1)内联
    使用style属性,只是对当前标签有效,页面内容和样式高度耦合的。
    (2)内部样式
    在head中使用style标签,当前页面有效,内容和样式一定程度分离,但是不彻底
    (3)外部样式
    将样式写到一个单独CSS文件中,需要用到HTML文件,引用它即可。

    基本语法

    <style>
     .名称1 {属性的设置;}
     </style>
     <body>
     <标签 class = "名称1">内容
     </body>
    
    

    对齐

    即左对齐,居中对齐,右对齐。基本语法就是在选择器里加入属性:
    text-align:center/left/right;
    居中
    在这里插入图片描述
    外边距margin

    颜色背景

    <style>
    div{
    background-color:red;
    }
    </style>
    

    个人名片代码:

    <html>
    <h1>xxx</h1>
    <h2>基本信息</h2>
    <img src="psc.jpg">
    <ul>
    	   <li>求职意向:测试工程师</li>
    	   <li>联系电话:xxxxxxxxxxxx</li>
    	   <li>邮    箱:xxxxxxxxxxxx</li>
    	   <a target="_blank"href="https://www.baidu.com">我的GitHub</a><br>
    	   <a target="_blank"href="https://www.baidu.com">我的博客</a><br>
    </ul>
    <h2>教育背景</h2>
    <ol>
    <li>小葵花幼儿园 幼儿园</li>
    <li>小葵花小学   小  学</li>
    <li>小葵花中学   中  学</li>
    <li>小葵花高中   高  中</li>
    <li>小葵花大学   大  学</li>
    </ol>
    <h2> 我的项目</h2>
    <li>
       <strong>1.留言墙</strong> <p></p>
        开发时间:20089月到200812<p></p>
    	功能介绍:
    	<ul>
    	   <li>支持留言发布</li>
    	   <li>支持匿名留言</li>
    	</ul>
     </li>
     <li>
       <strong>2.学习小助手</strong> <p></p>
        开发时间:20089月到200812<p></p>
    	功能介绍:
    	<ul>
    	   <li>支持错题检索</li>
    	   <li>支持同学探讨</li>
    	</ul>
     </li>
    <h2>个人评价</h2>
    <p>在校期间,学习成绩优良,多次获得奖学金</p>
    </html>
    

    js

    js弹窗

    在这里插入图片描述
    JS语言的特点是弱化数据类型。
    传参的时候,不需要设置数据类型。
    变量声明可以使用var表示所有的数据类型。

    使用JS输出HTML 代码:

    在这里插入图片描述

    js for循环

    在这里插入图片描述
    在这里插入图片描述

    js获取页面信息

    在这里插入图片描述

    jquery

    之前学的JS的操作语法都是原生的JS.
    JS分为两种:
    自己写的JS,叫做原生JS。
    外部JS实现动态的效果一jQuery。

    原生JS的问题:

    1.写法太臃肿。
    2.在不同的浏览器下,它的执行行为是不同。

    学到这,就大概掌握HTML,CSS和JS啦
    接下来好好练习,加油!!!

    展开全文
  • 响应式个人电话名片html模板,从国外网站扒下来,可以用于做个人作品简历
  • 个性名片HTML5模板

    2019-12-01 16:47:36
    个性名片HTML5模板
  • 电子名片 这套博客原始码的名字是vCard,是由来自悉尼的创意总监和UI / UXdesigner-FeleciaBrown设计的,她的设计理念是将复杂的问题变成简单,外观和直观的设计。那么这套vCard个人博客模板亦是如此,采用简约,...
  • pulse英文个人简历电子名片HTML静态模板
  • html完成名片的制作

    千次阅读 2018-07-25 13:13:27
    初学HTML,制作了简单的名片。程序里的图片内容需自己添加。 工具;eclipse 下面是完整代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8&...

    初学HTML,制作了简单的名片。程序里的图片内容需自己添加。

    工具;eclipse

    下面是完整代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Insert title here</title>
    	<style type="text/css">
    		#div1{
    			width:450px;
    			height:350px;
    			
    			margin:100px auto;
    			background:#808080;
    			border-radius:10px;
    			
    		}//对#div1进行布局处理
    		#div2{
    			width:120px;
    			height:120px;
    			background:blue;
    			position:absolute;
    			margin:-270px 70px 135px 300px;
    			border-radius:60px;
    		}
    		body{
    			background-image:url("4.jpg");//背景处理
    			
    			background-clip:content-box;
    		}
    		#photo{
    			position:relative;
    			top:10px;
    			left:10px; 
    		}
    		#photo1{
    			width:120px;
    			height:120px;
    			border-radius:120px;
    			}
    		
    		h3{  
    			position:relative;
    			left:20px;
    		}
    		h1{
    			position:relative;
    			left:20px;
    		}
    	</style>
    </head>
    
    <body>
    	<div id="div1">
    		<a href="http://www.zhiyou100.com/">
    		<img  id="photo" src="biaozhi.png" width="220px" height="60px">
    		</a>
    		<h1>打扰</h1>
    		<h3>大数据工程师</h3><br/>
    		<h3>手机:13623800355</h3>
    		<h3>QQ  :1352895716</h3>
    		<h3>邮箱:1352895716@qq.com</h3>
    		 <div id="div2">
    		 	<img id="photo1" src="touxiang.png" >
    		 </div>
    	</div>
    </body>
    </html>
    

    运行图片:

    展开全文
  • 个人电子名片css模板

    2019-11-24 08:47:55
    个人电子名片css模板是一款蓝色个性的个人简介电子名片网站模板。
  • 个人名片设计模版

    2013-12-01 09:59:25
    个人名片设计模版
  • 名片简历网站个人主页模板是一款响应式个人简历网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • CSS js 制作动画个人名片-网页前端UI设计id1078-网页前端设计 源码下载地址 在新演示地址 html <!DOCTYPE html> <!-- Created By CodingNepal --> <head> <meta charset="utf-8"> <...

    HTML & CSS js 制作动画个人名片-网页前端UI设计id1078-网页前端设计
    在这里插入图片描述
    源码下载地址

    在新演示地址

    html

    <!DOCTYPE html>
    <!-- Created By CodingNepal -->
      <head>
        <meta charset="utf-8">
        <title>Animated Profile Card | CodingNepal</title>
        <link rel="stylesheet" href="style.css">
        <script src="a076d05399.js"></script>
      </head>
      <body>
        <div class="container">
          <div class="image">
            <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
          </div>
    <div class="content">
            <div class="info">
              <h2>
    Andrew Neil</h2>
    <span>Web Developer</span>
            </div>
    </div>
    <ul>
    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
    <li><a href="#"><span class="fab fa-instagram"></span></a></li>
    <li><a href="#"><span class="fab fa-github"></span></a></li>
    <li><a href="#"><span class="fab fa-youtube"></span></a></li>
    </ul>
    </div>
    </body>
    </html>
    

    css

    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
    *{
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }
    html,body{
      display: grid;
      height: 100%;
      place-items: center;
      text-align: center;
      background: #f2f2f2;
    }
    .container{
      position: relative;
      height: 500px;
      width: 400px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
      transition: 0.3s ease-out;
    }
    .container:hover{
      box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
    }
    .container .image{
      background: #000;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 2;
      transition: transform 0.3s ease-out;
    }
    .container:hover .image{
      transform: translateY(-100px);
    }
    .image img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: opacity 0.3s ease-out;
    }
    .container:hover .image img{
      opacity: 0.7;
    }
    .container:hover .image{
     transform: translateY(-100px);
    }
    .container ul{
      display: flex;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      list-style: none;
    }
    ul li{
      margin: 0 5px;
    }
    ul li a{
      display: block;
      height: 50px;
      width: 50px;
      color: #000;
      line-height: 50px;
      font-size: 20px;
      border-radius: 50%;
      opacity: 0;
      transform: translateY(200px);
      background: #fff;
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }
    .container:hover > ul > li > a{
      opacity: 1;
      transform: translateY(0);
    }
    .container:hover > ul > li:nth-child(2) a{
      transition-delay: 0.1s;
    }
    .container:hover > ul > li:nth-child(3) a{
      transition-delay: 0.2s;
    }
    .container:hover > ul > li:nth-child(4) a{
      transition-delay: 0.3s;
    }
    .container:hover > ul > li:nth-child(5) a{
      transition-delay: 0.4s;
    }
    .container .content{
      position: relative;
      width: 100%;
      height: 100%;
      background: #fff;
    }
    .info{
      position: absolute;
      bottom: 20px;
      text-align: center;
      width: 100%;
      color: #000;
      line-height: 26px;
    }
    .info h2{
      font-size: 27px;
      margin: 3px 0;
    }
    .info span{
      color: #1a1a1a;
    }
    

    源码下载地址

    在新演示地址

    点赞 评论 转发就是对up的最大支持和鼓励, 非常谢谢!

    展开全文
  • html+css小名片代码

    千次阅读 2020-05-21 15:15:58
    HTML+css小名片效果效果图小名片代码 学习html+css时做的小名片案例。 效果图 鼠标移动到名片前 鼠标移动到名片后 小名片代码 <!doctype html> <html> <head> <meta charset="utf-8"> <...
  • pulse英文个人简历电子名片HTML静态模板.zip
  • 需要实现个人名片+可编辑名片信息,且可以实时下载。 实现如下图: 笔者决定在vue中引入html2canvas实现将整块dom进行图片化并且实时下载保存(本地)。 一、引包 npm install --savehtml2canvas 二、导入 ...
  • 根据昨天的《静态网页托管平台》一文里面的介绍,一个轻量级的个人卡片项目应运而生,我们来瞅一瞅这个无聊的网页。主要是因为这个占着我的GithubPages仓库空间,想把它删掉,但又有点可惜,...
  • 个人名片 功能:根据数据库查出个人数据,生成个人名片,名片中有个人二维码,微信扫描二维码可快速保存联系人信息到手机通讯录。 vue中引入html2canvas实现将整块dom进行图片化 引包 npm install --save ...
  • <!DOCTYPEhtml> <htmllang="en"> <...metaname="viewport"content="width=device-width,initial-scale=1.0">...个人名片</title> <scriptsrc="https://cdn.jsdelivr.n...
  • 个人名片生成工具

    2019-02-28 14:29:00
    地址链接:https://pan.baidu.com/s/1AW9bLHM1sZ8E_0SFWFD4ww 提取码:ze9p 转载于:https://www.cnblogs.com/zhangjie6/p/10450178.html
  • 欢迎来到此页面! 这是我的电子商务卡。 网址为
  • 个人名片管理系统

    2007-11-18 16:06:07
    这是一个Java做的单机版的个人名片管理系统
  • CSS盒模型的应用--个人名片的制作

    千次阅读 2017-04-18 20:53:44
    本篇文章介绍如何使用html与css制作个人名片。一个得体的名片往往代表着自身或者企业的形象,一个好的设计至关重要,当然,将设计师的设计进行也使用到网页设计中的知识。本篇文章重点介绍利用盒模型实现个人名片的...
  • 微擎首家平台式 智能AI雷达名片小程序,服务于企业 + 个人 智能名片有的我们有,智能名片没有的我们也有 「超人名片名片小程序的首选,适用于各行各业 不仅仅是名片,更多的是 商机... 小小一张名片 - 『商城』...
  • 个人名片的网页

    2017-06-24 18:34:00
    个人名片的网页 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na...
  • hello,我是wangzirui32,今天来教大家如何Flask框架和segno模块实现个人名片二维码在线生成器。 开始学习吧! 1. 项目架构 image文件夹为空,templates下存储了2个模板。 2. 模块准备 首先,你需要安装Flask(那...
  • aravinddass.github.io 个人电子名片
  • 仿微信二维码名片功能,该项目实现了仿微信二维码名片,通过绘图来制作二维码,并且可以将具体的一张图片插入到二维码中,具体如效果图所示。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,015
精华内容 2,006
关键字:

html个人名片