HTML入门
ljl_web
这个作者很懒,什么都没留下…
展开
-
HTML文件的基本结构
HTML文件的基本结构1、文件结构标记 HTML文件的基本结构主要包含一些最基本的文件结构标记。如下表所示: 文件结构标记 说明 <html> <HTML 文档的开始> <head> <HTML 文档的头部开始> <title> <HTML 文档的标题信息开始> </title> <HTML 文档的标题信息结束> </head> <HTML原创 2016-02-16 22:26:05 · 8292 阅读 · 0 评论 -
Demo11:content与counter案例
content与counter案例:实现自动章节生成效果要求在起点网诛仙小说截图如下: 代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> body{ background-color:rgb(231,244,254);原创 2016-02-27 22:22:19 · 347 阅读 · 0 评论 -
Demo13:div实现太极旋转
div实现太极旋转使用div(非canvas)实现太极旋转使用div border相关属性绘制太极图案,结合动画功能完成旋转,如图: 代码实现<!DOCTYPE html><html> <head> <title>太极</title> <meta charset="utf-8" /> <style> body{ background-color:#66fff原创 2016-02-27 23:08:39 · 444 阅读 · 0 评论 -
Demo12:书册子旋转
利用css动画功能实现书册子旋转效果要求每个册子以不同的速度同一原点旋转,鼠标进入每一个册子,本书册停止转动,如下所示: 代码实现<!DOCTYPE html><html> <head> <title>书册旋转</title> <meta charset="utf-8" /> <style> body{ background-color:#33ccff;原创 2016-02-27 22:57:59 · 379 阅读 · 0 评论 -
Demo10:简单天猫导航
简单天猫导航的实现效果展示代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> #top{ width:900px; height:40px; margin:auto; bac原创 2016-02-27 20:35:50 · 837 阅读 · 0 评论 -
Demo9:简单晒单效果
简单晒单效果的实现效果展示代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> body{ font:12px Arial,"microsoft yahei"; color:#666; } #原创 2016-02-27 19:56:39 · 559 阅读 · 0 评论 -
Demo8:简单商品评星
简单商品评价星级与标签的实现实现效果代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> body{ font-size:12px; color:#9c9a9c; } #content{原创 2016-02-27 18:30:13 · 386 阅读 · 1 评论 -
Demo7:背景截取图标显示
背景截取图片显示的实现实现效果为了减少网页加载图片量,开发人员常常讲页面用到的图标/logo等集合在一张图片里,使用时引入合适的坐标值即可。 背景图片如下: 用一个div实现精华两个字的显示,如下: 代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" />原创 2016-02-27 17:03:27 · 296 阅读 · 0 评论 -
Demo6:简单图片容器的实现
简单图片容器拉动显示效果的实现实现效果实现代码<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> #d1{ width:500px; height:150px; border:1px solid #原创 2016-02-27 16:49:00 · 340 阅读 · 0 评论 -
Demo5:简单登录界面
简单登录界面的实现实现效果代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> </head> <body> <header> <h1> <img src="logo.png" width="180px" height="80px" /原创 2016-02-27 16:19:38 · 659 阅读 · 0 评论 -
Demo4:求职信息表
个人求职信息表实现效果代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> </head> <body> <h1>个人求职信息</h1> <form> <table border="1" cellspacing="0" width="50%"原创 2016-02-27 15:37:54 · 411 阅读 · 0 评论 -
Demo3:基础语法实现论文的样式
基础语法实现论文的样式论文样式实现论文样式效果如下图所示(来源于一篇论文) 图一引用图片为: 实现代码:<!doctype html><html> <head> <meta charset="utf-8" /> <style> #div{ width:800px;原创 2016-02-27 14:40:10 · 352 阅读 · 0 评论 -
Demo1:五色表格
五色表格的实现原创 2016-02-17 22:23:01 · 556 阅读 · 0 评论 -
Demo2:简单求职表格
简单求职表格原创 2016-02-17 23:19:21 · 328 阅读 · 0 评论 -
Demo14:图片渐入
利用css动画实现图片渐入的功能实现效果点击文字实现相应的效果 代码实现<!DOCTYPE html><html> <head> <title> 图片渐入效果的实现 </title> <meta charset="utf-8"/> <style> a{ display:inline-b原创 2016-02-29 21:43:36 · 510 阅读 · 0 评论