加载中…
个人资料
HTML教程
HTML教程
  • 博客等级:
  • 博客积分:0
  • 博客访问:95,657
  • 关注人气:35
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
博主文章提示
  • HTML与CSS正在更新

  • html、DIV+CSS全部教程正在更新中
    每日教程稳定更新中......
    来制作一个HTML纯静态网页吧!
HTML教程

HTML与 CSS 的运用

  • 一个排名靠前的网站必定离不开HTML标签代码的优化
  • 一个外观好看的网页更是离不开DIV+CSS样式的布局
  • HTML与CSS相结合,不仅能让我们做出精简美观的网页,
  • 还能用于许多其他领域的布局排版及文章编辑,
  • 如:新浪、网易中的自定义及源码发布文章;
  • 淘宝店铺首页及宝贝详情页的装修;
  • QQ空间日志里无法实现的文章效果等;
  • 如果你问我,HTML 难学吗?我会告诉你一点也不难,
  • 把你的十分心拿出三分来学习即可,
  • 如果你连一分心都没有,那当我没说...
  • 在本教程中,我将用最简易的方法,
  • 教会你html+css最详细的做法,喜欢的朋友记得加个关注哦!
博文
标签:

letter-spacing

分类: CSS教程
在做网页时,有时候我们会觉得文字间的间距太密,想让字与字之间分开一点,是否可以用CSS实现?答案是肯定的,在CSS中,用letter-spacing属性就能控

制文字之间的间距。

letter-spacing 属性增加或减少字符间的空白(字符间距)。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为0。

注释:允许使用负值,这会让字母之间挤得更紧。

应用实例:   
HTML代码:‹div class='text'›控制文字之间的间距‹/div›
  CSS代码 :.text {letter-spacing:10px}

预览效果如下:

 控制文字之间的间距
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

last-child

分类: CSS教程
last-child 选择器用来匹配父元素中最后一个子元素。意思就是指定倒数第一个(最后一个)对象设置CSS样式。请看以下代码举例:


上面代码中创建了一个 ul 列表,列表里设置了三个 li 标签。
在CSS中,为 ul 规定了总宽度是1002像素,其中每个li标签的宽度是314像素,那么三个li标签就是942像素。
然后每个 li 标签都有一个右边30像素的外边距,三个 li 标签一共是90像素。这个时候 li 标签加上三个边距的总宽等于1032像素。很显然超过了父元素 ul 的总宽。这样三个 li 就没法
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
box-sizing:border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

如果上述的内容还不是太明白,我们就来举个例子:
· 比如插入一个DIV,这个DIV的宽度设置为200像素,高度也设置为200像素;那么这个DIV就是宽200px,高200px;
· 下面我们为这个DIV的上下左右分别增加10的像素,即padding:5px;那么这个时候这个DIV的宽就会变成210px,高同样也是210px
· 若再给这个DIV加上一个15像素的边框,那个这个DIV也就会继续扩大,变成了宽240px,高也是240px。该DIV的CSS代码如下:

div {width:200px; height:200px; border:solid 1em #DD1F22; box-sizing:border-box;padding:5px}

预览效果如下:

CSS3中box-sizing:border-box代码举例

而box-
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

padding0

margin0

分类: CSS教程
采用*{pading:0;margin:0;}这样的写法好处是写起来很简单,但是*是通配符,需要把所有的标签都遍历一遍,当网站较大时,样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此一般大型的网站都有分层次的一套初始化样式。

常用的reset.css

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
*:before,
*:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,fieldset,legend,input,button,textarea,p,blockquote, th, td {margin: 0;padding: 0;}
body {background: #fff;color: #555; font-size: 14px; font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;} td, th, caption {font-size: 14px;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
(2018-09-15 21:53)
a.窗口事件,只在body和frameset元素中才有效
on1oad 页面或图片加载完成时
onunload 用户离开页面时

b.表单元素事件,在表单元素中才有效
onchange 框内容改变时
onsubmit 点击提交按钮时
onreset 重新点击鼠标按键时
onselect 文本被选择时
onblur 元素失去焦点时
onfocus 当元素获取焦点时

c.键盘事件,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效
onkeydown 按下键盘按键时
onkeypress 按下或按住键盘按键时
onkeyup 放开键盘按键时

d.在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效
onclick 鼠标点击一个对象时
ondblclick 鼠标双击一个对象时
onmousedown 鼠标被按下时
0nmousemove 鼠标被移动时
0nmouseout 鼠标离开元素时
0nmouseover 鼠标经过元素时
0nmouseup 释放鼠标按键时

e.其他
onresize 当窗口或框架被重新定义尺寸时
onabort 图
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 

JavaScript鼠标事件。什么是JS事件,就是当你的鼠标进行操作时会发生怎样的事情,比如鼠标点击时会发生什么、鼠标移上去时又会发生什么、离开时等将会发生都称之为“事件”。一旦我们要它发生怎样怎样的事件,就可以为其写函数“function”。

下面建一个DIV来测试,并为DIV规定样式。代码如下:

﹤div id='juli' 0nmouseover='onOver()' 0nmouseout='onOut()'﹥JavaScript 事件﹤/div﹥

JavaScript 事件

上述代码解释:div的ID名“juli”;鼠标移上去时命名为“onOver”发生;鼠标移开时命名为“onOut”发生。

为id名为“juli”的div设定样式,CSS代码如下:
#juli {width:200px; height:150px; background:#f30; color:#fff}

下面为其写“function”函数执行要发生的事件:
﹤script﹥
function onOver(){
var x=document.getElementByIdx_x_x_x_x_x_x_x('juli');
x.innerHTML='鼠标移上DIV时所要展示
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

javascriptdom

分类: JavaScript学习
JavaScript中的DOM除了能改变标签中的内容和属性外,还能改变其CSS样式。

如何用JavaScript中的DOM改变HTML标签中的CSS样式,script代码如下:

以上代码更改了元素样式,代码解释如下:
var x=document.getElementByIdx_x_x('juli') ;  //通过id名称“juli”来获取元素;
x.style.background='#ccc';  //背景颜色为:灰色;
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

javascriptdom

分类: JavaScript学习
这次我们不是要改变标签里的内容,而是改变标签中的属性,例如为p标签加上 align='center' 代码如下:


align='center' 这段代码是内容居中,在script中我们用了x.align='left'; 这时当你点击按钮时,内容不会再居中,而是居左显示。又或者不是P标签的属性,加入是a标签,一条超链接中的href属性,该如何操作,示例如下:
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

javascriptdom

分类: JavaScript学习
DOM:首先了解DOM是什么意思,它是“document object modal”的缩写,就是“文档对象模型”的意思。
在JavaScript的核心用法中,是通过JavaScript脚本的命令来控制你的HTML代码里的内容。比如你写一对P标签,在P标签中有一些内容,那么通过JavaScript脚本是可以对标签里的内容进行控制的;同时,也能对P标签本身的标签属性及样式进行控制。

JavaScript中的DOM改变HTML标签中的内容,示例代码如下:


举例:
第一步:上面的代码中我们首先插入了一对P标签,给了P标签一个id名称,叫做“juli”,同时标签中还包含了一些文字内容。

第二步:然后通过一个函数来调取它,这个关键函数就是前面我们讲过的“funciton”,在script
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 

JavaScript运算符用于赋值,比较值,执行算术运算等。算术运算符用于执行两个变量或值的运算,示例代码如下:

JavaScript减号运算符代码

在上列js代码中会输出z的值,z=x-y 即:20-5,所以得出的结果会是15。这里使用到的运算符是“-”减号。 下面就列举一些在js中经常能用到的运算符。

算术运算符
+ :加号;
- :减号;
* :乘法;
/ :除法;
% :余数(比如x=21,y=5,x%y即21÷5,很明显除不尽,余数为1,那么输出的结果就是余数1);

++:累加。
代表加1,比如x=20,++x就是x+1得出的结果即是21;又如:z=++x,意思是x加1,赋值给z,那么z的输出结果为21。);这里需要注意的是,比如x=20,当我们写成z=x++,请注意,这个时候的z返回的结果不会是21,而依旧是20。这种情况原因是运算符中出现了

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
新浪微博
网站设计案例

饭堂承包
广州旺记饮食管理有限公司

广州食堂承包
广东八月八餐饮管理有限公司

深圳蔬菜配送
深圳佳惠鲜农副产品有限公司

留言
加载中…
评论
加载中…
访客
加载中…

新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有