- 浏览: 18353 次
- 性别:
- 来自: 广州
最新评论
Html分类:
1.基本标签:
<html>,<head>,<body>
<title>,<meta>,<a>
<h1>...<h6>:标题
<p></p>:字段
<ul>,<ol>:无序、有序
<font>:字体
<img>:图片
<hr>:横线
<b>后面结合CSS圆角
2.布局
framset(微软,不符合W3C的规范)
table:用于涨势有排列格式的数据(一般用于后台管理系统布局)
colspan:行扩充
rowspan:列扩充
div span:(一般用与门户网站布局)
3.用户交互
<form>系列
-<input>
text/password/radio/checkbox/file/hidden
-<select><option></option></select>下拉列表
-<textarea></textarea>
css:
1.存放形式
1).存放在某一属性<td style=""></td>
2).存放在页面<head></head>中的<style></style>
3).外部.css文档,<link rel="stylesheet" stye="text/css" href="css1.css">
优先级是:1最高,2,3同级别(不过用谁取决于位置的先后,使用摆放在后面的)
2.选择符
1).标签选择符:对同一种标签使用相同的样式(如:body/table/div/span)
2).id选择符:指定对某一标签使用某种样式(如:<div id="div2"> #div2{})
3).class选择符:指定对某一标签使用某种样式(如:<div class="div3"> .div3{})
4).群选择符:多个标签用同一样式,用“,”隔开(如:img,.div2,#div3{})
5).包含选择符:设置路径,“ (空格)”隔开(如:.div td p span {};ID为div的 里面的td 中的p中的span设置)
优先级:id选择符 > class选择符 > 标签选择符
3.控制
1 总体控制
1.1 透明效果
filter:alpha(opacity=100);
注意:只支持IE;
2 文字控制
2.1 字体
body {
font-family: 黑体, 幼园;
}
2.2 大小
body {
font-family: 黑体, 幼园;
font-size: 24pt;
}
2.3 颜色
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
}
2.4 粗细
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
font-weight: bold;
}
2.5 斜体
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
font-weight: bold;
font-style: italic;
}
2.6 线条
2.6.1 下划线
text-decoration: underline;
2.6.2 顶画线
text-decoration: overline;
2.6.3 删除线
text-decoration: line-through;
2.7 字母
2.7.1 单词首字母大写
text-transform: capitalize;
2.7.2 单词所有字母大写
text-transform: uppercase;
2.7.3 单词所有字母小写
text-transform: lowercase;
2.7.4 字母间距
letter-spacing: 10px;
2.8 与右边的距离
padding-right: 10px;
2.9 首字下沉
2.9.0.1 HTML
<p><span>首</span>好阿斗发缩短发送毒发</p>
2.9.0.2 CSS
p span {
float: left;
font-size: 80pt;
}
3 图片
3.1 背景图片
3.1.1 显示背景图片
background-image: url(User.jpg);
3.1.2 背景图片的重复
background-repeat: repeat-x; 横向排列
background-repeat: repeat-y; 纵向排列
background-repeat: no-repeat; 不重复
background-repeat: repeat; 平铺
3.1.3 背景图片的位置
background-repeat: no-repeat;
background-position: center;
3.1.4 固定背景图片的位置比例
background-attachment: fixed;
4 DI
4.2 相对定位
float: left;
4.3 绝对定位
position: absolute;
left: 100px;
top: 30px;
4.4 取消定位
clear: both;
4.5 固定宽度且居中
4.5.1 HTML
<body>
<div class="container">
<div>
<div class="d1">Hello </div>
<div class="d1">Eric </div>
<div class="d2">Eric </div>
<div class="d3">Eric </div>
</div>
</div>
</body>
4.5.2 CSS
body {
text-align: center;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
}
5 Table
5.1 位置
5.1.1 靠顶对齐方式
5.1.1.1 HTML
<tr>
<td class="a">Hello</td>
<td class="a">
Hello<br>
Eric
</td>
</tr>
5.1.1.2 CSS
.a {
vertical-align: top;
}
5.1.2 靠底对齐方式
5.1.2.1 HTML
<tr>
<td class="a">Hello</td>
<td class="a">
Hello<br>
Eric
</td>
</tr>
5.1.2.2 CSS
.a {
vertical-align: bottom;
}
5.1.3 居中对齐方式
5.1.3.1 HTML
<tr>
<td class="a">Hello</td>
<td class="a">
Hello<br>
Eric
</td>
</tr>
5.1.3.2 CSS
.a {
vertical-align: middle;
}
5.2 边框
5.2.1 设定分隔形边框
5.2.1.1 HTML
<table class="testTable">
<tr class="title">
<td class="cell">a</td>
<td class="cell">b</td>
</tr>
</table>
5.2.1.2 CSS
.testTable {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
.title {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
.cell {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
注意,各个<table><tr><td>的各个属性都要设置,才看得见边框和分隔
发表评论
-
ORACLE
2011-09-04 14:49 542SQL编程 ***编程语言不区分大小写,内容区分大 ... -
MYSQL
2011-09-04 14:45 5401.mysql bin目录: mysq ... -
JDBC
2011-09-04 14:42 5951.JDBC连接数据库 1).加载驱动 Str ... -
JAVAweb--JSP
2011-09-04 14:40 693JSP本身也是一个servlet ... -
JavaScript
2011-09-04 14:36 6411.存放形式 1).外部文件导入 2).head ... -
Servlet
2011-09-04 14:16 6321.servlet,XML中的配置 <serv ... -
Tomcat
2011-09-04 14:06 5931.tomcat 配置 1)必须配置了JAVA_HO ... -
JAVASE--其他
2011-09-04 14:03 5461.包装类 每一个八大基本类型都有与之对于的包装类 ... -
JAVASE--IO流
2011-09-04 14:01 6281.文件(File) **\n--换行,\\路径; ... -
JAVASE--集合
2011-09-04 13:50 610集合(Collection接口) ... -
JAVASE--面向对象2
2011-09-04 13:39 577父类和子类 子类到父类称为抽象(泛化) 父类到子类 ... -
JAVASE--面向对象
2011-09-04 13:37 4143.面向对象 1)面向对象的三大特性 a.封装 ... -
JAVASE--包
2011-09-04 13:36 5891.包概念(package) 1)com.angeo. ... -
JAVASE--环境变量
2011-09-04 13:30 6641.环境变量 1)变量:针对于编程语言 a.局部变量(c,j ...
相关推荐
静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页...
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目,下载即用无需修改。 基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目,下载即用...
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
HTML+CSS总结.doc
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html+css+jshtml+css+jshtml+css+jshtml+css+js
HTML+CSS+JS 网页设计模板.zip
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
HTML+CSS制作个人简历web网页.zipWeb前端静态个人简历,网页个人简历模版,HTML&CSS制作个人简历。 HTML+CSS制作个人简历web网页.zipWeb前端静态个人简历,网页个人简历模版,HTML&CSS制作个人简历。 HTML+CSS制作...
韩顺平 html+css+js笔记,配合视屏看效果更佳。
9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生...DIV+css+js学生网站如何做? 不靠这个吃饭--你还用自己做网站吗? 大学生静态网页成品作业代做
html+css+js网页设计之个人博客网页【html+css+js】html+css+js网页设计之个人博客网页【html+css+js】html+css+js网页设计之个人博客网页【html+css+js】html+css+js网页设计之个人博客网页【html+css+js】...
html+css+js新手练习项目,里面包含例子源码,还有单独文件夹分类。适合新手练习用