HTML
关注
分享
扫一扫
文章平均质量分 70
一只野生饭卡丘
这个作者很懒，什么都没留下…
展开
-
前端——HTML5之input属性
各大网页都要用到输入框，用以提交各类信息。这些功能大部分都是由html中的input来完成的。H中新增段了input属性，这里总结一下input的几种使用类型。1、urlurl类型用于包含url地址的输入域，或者说，用于应该包含url地址的输入域，它在提交表单的时候会自动验证url域的值。语法实例：index：<input type="url"name=“user_url”/...原创 2018-09-25 21:14:45 · 1467 阅读 · 0 评论 -
前端——用“小学加法”就能实现百度搜索功能
今天学到form表，知道了该怎么用form表和input来实现百度搜索功能。代码如下:<html><head><head><body><form action="https://www.baidu.com/s" method="get" id="submit"> <div&a原创 2018-09-23 01:01:39 · 1207 阅读 · 0 评论 -
前端——用H5表单属性制作简易的登陆界面
今天学了H5新增的表单属性，知道如何用新增的那些属性（如form、placeholder）制作一个建议的登陆界面。界面如下：源代码如下：<html><head><head><body><form method="post"> 用户名：<input type="text" name="原创 2018-09-23 10:13:00 · 8359 阅读 · 1 评论 -
前端——通过“拖放”元素来添加、删除元素
当今时代，玩手机恐怕成为了大部分人的日常。玩手机，那当然是玩手机里的app啦，那么多app，肯定有很多有趣好玩的。可万一不想要这个应用了怎么办？简单！谁还没卸载过几个应用呀~怎么卸载呢，最简单的方法，长按这个app的图标一两秒，这个图标就会变成可拖动，手机桌面上方的位置会出现一个写着卸载的区域，将图标拖进该区域，确认之后，就可以卸载这个软件啦。这一部分功能实现可以称作通过拖放来删除ap...原创 2018-10-12 23:54:55 · 2416 阅读 · 3 评论 -
前端——css块级元素和行内元素的区别详细解析
BIU~biu~biu~biu~块级元素和行内元素是布局中常见的两种基本元素，但是未必有很多人深入的研究它们的细微差别。 常见块级元素：div p form ul ol li 等； 常见的行内元素：span strong em;它们的区别主要有以下几点：1.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。这一点在进行页面布局...原创 2018-10-13 12:13:07 · 1045 阅读 · 0 评论 -
前端——通过position定位及z-index实现元素重叠
Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~别的话不多说，我们直接切入正题吧~~再放代码之前我们先来了解一下z-index的一些知识~使用前提：z-index只能在position属性值为re...原创 2018-10-13 14:33:31 · 1501 阅读 · 0 评论 -
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点——用div来画“三角”。之前本帅博主写过一篇《前端——菜鸟网站横向CSS导航条菜单：带小三角形》，里面也有介绍如何制作小三角形，不过它是用的现成的小三角图片，虽然也可以用，但是毕竟做网站的人，什么情况都可能会遇到，因此，还是自己画一个“三角”比较好。下面就介绍一下如何用div画菜鸟网站首页导航条的小三角形。菜鸟网站首页导航条如下：可以看到这里有一个小三角...原创 2018-10-13 23:31:02 · 1585 阅读 · 0 评论 -
前端——子元素覆盖父元素的边框的四种方式
平常我们在浏览网站的时候经常会看到这样的菜单栏：看到这个，有些人不禁会想，这是如何做的呢？？？有人说：“border！！！！”对，的确是border，但是要怎么用呢？？？上面一共有三个div，莫非要给三个div都设置border属性？那也忒麻烦了~这里本帅博主给大家介绍几种更高富帅的方法~1.子元素定位 遮盖父元素的border-bottom 写一个div，颜色为白...原创 2018-10-15 22:04:29 · 11523 阅读 · 0 评论 -
HTML——Header:请求头参数详解
Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html,application/json Accept-Charset 浏览器可以接受的字符编码集。 Accept-Charset: iso-8859-5 Accept-Encoding 指定浏览器可以支持的web服务...原创 2018-11-03 23:38:06 · 15162 阅读 · 0 评论 -
前端——CSS如何使文字居中
最近在制作网页的时候，经常需要用到添加文本。但大部分文本都需要调整到需要的位置。调整文本的位置，可以通过margin来设置外边距的方法来调整。而使文本居中，则一般有以下三种方法。text-align:center 属性规定元素中的文本的水平对齐方式，设置文本居中 margin:0 auto 自动对齐，设置块元素或与之类似的元素居中 CENTER 使布局居中 1、t...原创 2018-09-22 21:15:25 · 20504 阅读 · 0 评论 -
前端——HTML百度首页制作
前些天为了学习页面布局，做了一个简易的百度首页。做百度首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。仿做一个网页之前需要分析该网页的布局，下图是百度首页。从上图可以看出，百度首页大概分为三个块：头部，中部，和底部。中部又可以分为LOGO和搜索框，地步可以分为百...原创 2018-09-22 19:32:15 · 27439 阅读 · 3 评论 -
前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项
在布局的过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。什么？使用绝对定位还要条件？？？当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。在讲这两个条件的之前，我们要先提一个概念——标准流。什么是标准流呢？标准流（normal flow），也被称为...原创 2018-10-12 14:27:07 · 23004 阅读 · 1 评论 -
前端——设置列表中不同类型的列表标记
列表分为两种：有序列表和无序列表。这两种列表的列表标记也不一样。它们的列表标记可以用list-style-type来设置。有序列表常用的有decimal、lower-roman、higher-roman等；无序列表常用的有disco、square、circle等。1、有序类表语法示例：<html><head><style type="text/css...原创 2018-09-25 21:37:36 · 1206 阅读 · 0 评论 -
前端——“一看就会的”菜鸟教程网站首页制作！
之前在复习网页制作，仿照菜鸟教程的首页写了一个仿菜鸟首页。效果如下： 制作网页之前先布局。原网页如下：分析该网站的布局，我们可以发现，菜鸟教程的首页主要有四个模块，分别是顶端，顶端导航， 左边菜单，右边菜单内容。先在原网站查看源码，找到相应模块的参数，根据这些参数来设置自己的模块，这样就可以增加自己网页与原网页的相似度。1、顶端LOGO和搜索框顶端LOGO和文本框的制作...原创 2018-09-26 13:21:58 · 23639 阅读 · 1 评论 -
前端——GitHub登录界面和首页制作
程序员当然少不了运用GitHub，这正好在复习前端知识，就做了一个GitHub的登录界面和首页。登录界面如下：我做的这个网页并没有提交表单的功能，只是简单地在button中添加了超链接。点击Sign in 按钮之后会跳转到首页。首页界面如下： 下面是源代码。登录界面源代码：<!DOCTYPE html><html><meta...原创 2018-10-02 16:11:11 · 4379 阅读 · 1 评论 -
前端——CSS3中三种清除浮动（float）影响的方式
float是HTML中布局的一大关键，很多难题一旦用上float都能很愉快地解决。但是凡是好用的，也容易出错。比如当子元素都为float时，其父元素会受影响，或者偶尔会发现自己某个div的高度变成了0等等。这里介绍一下CSS3中三种清除浮动的方式。1.增加一个空的标签（div 或 br等都行），通过clear：both语句消除float对后面元素的影响。示例：<div cl...原创 2018-10-03 16:19:27 · 5228 阅读 · 0 评论 -
JavaScript——setTimeout()制作简易计时器
不得不说，setTimeout()是一个非常神奇的东西，我们可以用它来掌控时间，从而达到意想不到的结果。这里先看一下setTimeout()的定义。 定义和用法setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。提示： 1000 毫秒= 1 秒。提示： 如果你只想重复执行可以使用 setInterval() 方法。提示： 使用 clearTimeout...原创 2018-10-03 19:01:24 · 1720 阅读 · 0 评论 -
前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作
昨天逛拉勾网，发现它首页菜单在鼠标移上去之后会出现二级子菜单，正好最近在整理HTML的知识，就仿照这拉勾网首页的菜单写了大体的框架。原网页如下：如果鼠标滑过相应的区域，会出现相应的二级子菜单。1、布局分析这个菜单的布局特别明显，就是一个大的div_leftmenu,然后再在该div中设置各类小的div。相关的属性可以在拉勾网的源代码上找到。在每个小块中，如“技术”块，又分为...原创 2018-09-26 21:55:45 · 1368 阅读 · 1 评论 -
前端——菜鸟网站横向CSS导航条菜单：带小三角形
之前看到很多网页的导航条都会有小三角形，一直好奇是如何实现的，正好前些天做的菜鸟教程首页的导航栏也有小三角形，就研究了一下它的实现方法。菜鸟教程首页导航如下图：其实实现这个功能也挺简单。首先写一个大的div_nav，而“首页”“菜鸟笔记”“菜鸟工具”“参考手册”等则作为div包含在div_nav中。div_nav背景色设置为对应的颜色。背景色的设置代码如下：.blue #slat...原创 2018-09-23 12:15:09 · 4692 阅读 · 1 评论 -
前端——使用base64编码在页面嵌入图片
最近学了页面布局，开始写一些复杂的网站，这些网站通常含有很多的图片。因此，在写这些网站的时候我需要插入很多的图片。因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址，如果是在自己电脑文件夹里的图片，当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片一起发过去而导致图片无法显示。为了便于显示，我今天试了一下将图片转换为base...原创 2018-09-21 23:58:29 · 6515 阅读 · 2 评论