HTML/CSS/JS
IvyYin
达则兼济天下
展开
-
HTML基础知识(二)
网站如何与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。语法: <form method=”传送方式” action=”服务器文件”> <label for=”username”>用户名: <input type=”text” name=”username” />原创 2017-07-11 11:35:57 · 315 阅读 · 0 评论 -
JavaScript入门(四)
JS入门练习<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{ height:400px;原创 2017-07-18 20:34:59 · 369 阅读 · 0 评论 -
JavaScript入门(一)
最近学习了javascript的一些入门基础知识,在此做一总结,理顺一下思路,并且巩固复习。1、JS的位置(1)在HTML中,我们可以使用<script>标签将JS代码插入,下面是一个实例。<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-原创 2017-07-18 15:19:57 · 226 阅读 · 0 评论 -
Javascript进阶(一)
在之前的博客内容中,我简单地介绍了JS的入门知识,从本篇内容开始,较为细致地总结JS的基础以及各类用法,包括语法、函数、方法等。一、JS基础语法1、变量变量的命名遵循一定的规则,如下:变量要以字母、下划线、或者$开始;变量可以由任意多个英文字母、数字、下划线和$组成;变量名区分大小写;变量不可使用JS的关键字或者保留字。 JS的关键字和保留字如下图: 变量的赋值以及定义都较为简单,与原创 2017-07-18 21:58:13 · 302 阅读 · 0 评论 -
使用CSS实现一列布局
1、一列自适应布局 所谓自适应,就是布局大小随着窗口大小改变。自适应一列布局很容易实现。HTML代码:<!--一列布局--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>一列布局</title> <link rel="stylesheet" type="text/css" href原创 2017-07-24 17:00:22 · 908 阅读 · 0 评论 -
使用CSS实现两列布局
固定宽度的两列布局 实际上在项目过程中,自适应宽度的两列布局很少使用,基本都是使用固定宽度的两列布局,因此在这里,我们只介绍固定宽度的两列布局如何实现。 固定宽度的两列布局需要将两列包围在一个大的div当中才可实现。将左边的div设置为左浮动,右边的div设置为右浮动即可。HTML代码:<!--自适应宽度的两列布局不常使用,一般使用固定宽度的两列布局--><!DOCTYPE html><原创 2017-07-24 18:26:21 · 4252 阅读 · 0 评论 -
使用CSS实现三列布局
三列布局也是一种常用的布局方式,使用较多的三列布局有固定宽度三列布局和左右宽度固定、中间自适应宽度的三列布局。1、固定宽度三列布局 固定宽度的三列布局可以使用浮动实现。需要三个div包围在一个父级div中,并且将左边和中间两个子div设置为左浮动,将右边的子div设置为右浮动。HTML代码:<!--三列布局:固定宽度--><!DOCTYPE html><html lang="en"><head原创 2017-07-24 20:04:33 · 4835 阅读 · 1 评论 -
安装react并创建一个demo
step2:安装react1、安装reacthttps://facebook.github.io/react/docs/installation.html是下载react的官方网站,我是在阮一峰的github上面下载的,里面还包括了很多demo,下载解压后看到bulid文件夹,可以直接在JSX中引入使用。2、构建开发环境接着就使用react创建一个应用,当然,除了直接引入react之外,也可以直接使原创 2017-07-26 21:15:57 · 456 阅读 · 0 评论 -
解决 html 表格错位的问题
设置表格style为如下格式即可解决:table style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all;">原创 2018-01-12 12:36:22 · 11685 阅读 · 3 评论 -
JavaScript入门(三)
DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 如下代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,三种常见的DOM节点:元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。文本节点:向用户展示的原创 2017-07-18 20:33:01 · 382 阅读 · 0 评论 -
JavaScript入门(二)
常用交互函数(1)document.write()该函数可以直接用于在网页上输出内容,输出方式有2种:直接输出<script type="text/javascript"> document.write("Hello World!"); //内容用""括起来,""里的内容直接输出</script>利用变量输出内容<script type="text/javascript"> var原创 2017-07-18 20:31:38 · 269 阅读 · 0 评论 -
使用CSS实现上下左右居中
1、左右居中使用纯CSS实现左右居中的经典方法是将被居中元素的margin值左右设置为auto,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>左右居中</title> <style type="text/css"> *{ margin:原创 2017-07-25 19:51:19 · 7372 阅读 · 1 评论 -
HTML基础知识(一)
一、基础知识(一)1、HTML主体<body></body>2、HTML标题HTML标题通过<h1>…<h6>进行定义。 <h1>这里是一级标题</h1>3、HTML段落<p>这里是段落内容</p>4、HTML链接<a></a> 实例:<a href=”http://www.baidu.com”>百度链接</a> 需要在href属性中指定链接的地址。5、HTML图像<img src=”xx.j原创 2017-07-10 17:58:43 · 269 阅读 · 0 评论 -
Javascript进阶(二)
接之前的Javascript的变量及表达式,本篇文章介绍JS的数组。需要了解JS前面知识的可以参看Javascript进阶(一)。二、JS数组 在编程语言中,数组的应用非常广泛,数组的出现使得变量存储更加方便高效。1、数组的定义JS创建数组的语法为:var myarray = new Array();创建数组时可以指定数组长度,长度可根据需要制定。var myarray = new Array(8原创 2017-07-20 11:09:01 · 358 阅读 · 0 评论 -
CSS页面布局技巧(一)
设置文本样式1、字体类型绝大多数用户系统默认支持的中文字体有宋体、黑体、幼圆、楷体;默认支持的英文字体有Arial、Arial Black、Arial Narrow、 Century Gothic 、Comic SansMS、Times New Roman等等。在使用中,宋体和Arial使用频率最高。CSS提供font-family属性设置字体类型。 实例:p{font-family: 宋体;}原创 2017-07-13 18:10:54 · 2902 阅读 · 0 评论 -
CSS页面布局技巧(二)
设置页面背景1、设置背景色CSS提供background-color属性设置页面的背景色。 实例:background-color: red;2、设置背景图片页面添加图片 语法: <img src=”pic.jpg”/>页面添加背景图片 CSS提供background-image属性直接为页面添加一个背景图片。 语法:background-image: url(pic.jpg);(1)原创 2017-07-13 20:54:30 · 760 阅读 · 0 评论 -
CSS页面布局技巧(三)
超链接样式 设计网页时,我们可以通过伪类对链接的样式进行控制,引导用户浏览网页,增加互动的丰富元素。1、链接的属性 超链接的标签为<a></a>,网页上的超链接一般用来链接文字或者图片。超链接有4个伪类,分别代表链接的不同状态。 a: link(超链接未被访问前的样式) a: visited(链接地址被访问过后的样式) a: hover(鼠标悬停时的样式) a: active(鼠标点击与原创 2017-07-17 10:07:23 · 306 阅读 · 0 评论 -
CSS基础知识
CSS全称为“cascading style sheet”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。本篇文章总结CSS的一些常用基础。1、CSS注释使用/*注释语句*/完成注释2、CSS样式的位置行内样式 <p style = “color = red;”> 文字内容 </p>内嵌式 <style type = “text/css”>原创 2017-07-13 10:53:07 · 369 阅读 · 0 评论 -
CSS页面布局技巧(四)
列表样式1、无序列表无序列表是指列表符为圆点或者其他图形而非数字。无序列表语法为:<ul> <li>**</li> <li>**</li> ......</ul>其中ul的作用是说明其包含的列表是无序列表,每组li用于包含一个列表项目。2、有序列表有序列表的列表符为数字。有序列表语法为:<ol> <li>**</li> <li>**</li> ...原创 2017-07-17 10:48:58 · 347 阅读 · 0 评论 -
Javascript进阶(三)
关于JS变量和数组的相关知识,请参看 Javascript进阶(一) Javascript进阶(二)三、流程控制语句本篇文章介绍流程控制语句,JS的很多语法与C语言相通,可以说是一模一样,所以理解起来非常容易,本节内容不再过多地叙述,只给出实例,当做手册,随时翻阅。1、if语句<script type="text/JavaScript">var mypen = "black"; //定义变量m原创 2017-07-20 16:19:32 · 277 阅读 · 0 评论 -
解决 html 表格乱码的问题
html代码中添加以下内容:'' \'' \'' \原创 2018-01-26 13:05:52 · 3400 阅读 · 0 评论