HTML和CSS
2014 年 7 月 16 日
一：前端开发简介
标签：表格的标识
border：边框
width：设置表格的宽度
height：设置表格的宽度
cellpadding：内容到单元格边框的距离
cellspacing：每个单元格之间的距离
2.
一、概述：前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过 HTML ， CSS 及 JavaScript 以及衍生出来的各种技术、框
架、解决方案，来实现互联网产品的用户界面交互。
二、发展过程：它从 网页制作 演变而来，名称上有很明显的时代特征。在 互联网 的演化进程中，网页制作是 Web1.0 时代的产物，早期网站
主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着 互联网技术 的发展和 HTML5 、 CSS3 的应
用，现代网页更加美观，交互效果显著，功能更加强大。
二：HTML5
一、HTML简介
HTML是超文本标记语言，是网页的核心，是一种制作万维网页面的标准语言
二、HTML基本骨架
MyHtml.html
HTML基本骨架代码实现
三、HTML常用标签
1. 文档信息标签
文档信息标签
文档信息标签代码实现
2. 文本标签
排版标签
#div{
width: 100px;
height: 100px;
background-color: red;
}
#span{
width: 100px;
height: 100px;
background-color: blue;
}
博客园简介 - 代码改变世界 Coding Changes the World
博客园创立于2004年1月，是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者
打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的
使命是帮助开发者用代码改变世界。
Cnblogs.com was founded in 2004. It is a knowledge-sharing community for developers. Our mission is to help
developers change the world by coding.
<!--
3. 文本格式化标签
1. 水平线：
2. 换行：
3. 空格：
4. 字体加粗：
5. 字体倾斜：
6. 下划线：
7. 删除线：
Email
：ad@cnblogs.com 或 bd@cnblogs.com
电话
：0571-88079867（杭州）
QQ：206423184
广告位示例
我是一个div
我是一个span
文本标签代码实现
3. 图像和超链接标签
图像和超链接标签
网络资源
本地资源
<!--
3. 锚点
1. 作用：在一张网页中进行资源跳转
2. 使用
1. 在需要的位置添加锚点
2. 使用a标签跳转到指定的锚点
访问方式：
href的值为#时，表示刷新当前页，用来跳转到顶部
-->
底部
这是一个锚点
图像和超链接标签代码实现
4. 列表标签
列表标签
中国四大电商
中国四大电商
<!-- 3. 自定义列表- 数据的标题
- 数据的具体内容
自定义列表
- 淘宝
- 马云
5. 表格标签
表格标签
<!--
1. | 标签：表头单元格，加粗居中显示 width：设置此列表格的宽度 4. | 标签：普通单元格，居左显示
5. 单元格合并：
1. 首先确保表格是一个规整的
2. 找到要合并单元格的源码位置
3. 合并
1. 列合并：在其中一个单元格中使用colspan="数量"属性，删除另一个要合并单元格
2. 行合并：在其中一个单元格中使用rowspan="数量"属性，删除另一个要合并单元格
6. 创建一个4行4列的表格
四、HTML5表单
action：表单域数据提交的地址
method：表单域数据提交的方式
2. form表单域标签：按照键值对的方式提交表单域数据
1. 输入文本：
2. 输入密码：
3. 单选按钮：
4. 复选框：
5. 选择文件：
6. 输入数字：
7. 输入日期：
8. 输入颜色：
9. 输入电子邮件：
10. 搜索字段：
11. 输入URL：
12. 单选下拉框：
内容
13. 文本域：
14. 预选列表：list属性必须引用 元素的 id 属性。
15. 提交按钮：提交表单域数据
3. input属性
1. value 默认值
2. readonly 规定输入字段为只读
3. disabled 规定输入字段应该被禁用
4. max 规定输入字段的最大值
5. min 规定输入字段的最小值
6. maxlength 规定输入字段的最大字符数
7. pattern 规定通过其检查输入值的正则表达式
8. required 规定输入字段是必填
9. size 规定输入字段的字符数
10. step 规定输入字段的合法数字间隔
-->
用户名：
密码： 性别： 男 女 爱好： 打篮球 看电影 蹦迪 籍贯： 上海 北京 广东 深圳 QQ： 邮箱： 出身日期： 期望工资： 个人说明： 表单代码实现 五 、HTM5L新增标签
@charset "UTF-8";
*{
margin-top: 20px;
width: 400px;
height: 100px;
}
/*传统div布局*/
.header,header{
background-color: gray;
}
.nav,nav{
background-color: blue;
}
.main,main{
height: 200px;
background-color: red;
}
.article,article{
height: 150px;
width: 300px;
background-color: aqua;
position: absolute;
letf: 50px;
}
.section,section{
width: 250px;
background-color: orange;
}
.footer,footer{
background-color: fuchsia;
}
CSS代码
三：CSS3 一、CSS3 简介 CSS 指层叠样式表 ( C ascading S tyle S heets)，在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 二、CSS3 选择器
/*通用选择器*/
*{
margin: 0;
padding: 0;
}
/*标签选择器*/
h3{
color: red;
}
/*属性选择器*/
#div_01{
background-color: lime;
}
/*类选择器*/
.div_02{
background-color: maroon;
}
/*后代选择器*/
.div_02 b{
color: silver;
}
/*子元素选择器*/
.div_02>p{
color: orange;
}
/*并集选择器*/
#div_01,.div_02{
height: 100px;
}
/*属性选择器*/
input[value="按钮"]{
color: red;
}
选择器CSS代码
三、CSS3 样式
@charset "UTF-8";
/*背景*/
.div_01 {
width: 100%;
height: 600px;
/*设置背景图片*/
background-image: url("../images/a.jpg");
/*取消背景图片重复*/
background-repeat: no-repeat;
/*开启图像固定*/
background-attachment: fiexd;
/*设置背景图像位置*/
background-position: 50% 15%;
background-image: url("../images/a.jpg")
}
/*文本及字体*/
p {
/*设置首行缩进*/
text-indent: 2em;
/*设置行高*/
line-height: 20px;
/*设置对齐方法*/
text-align: left;
/*设置字体系列*/
font-family: serif, cursive, fantasy;
/*设置字体大小*/
font-size: 20px;
}
p>b {
color: orange;
/*设置字体闪烁*/
text-decoration: blink;
/*设置字体加粗*/
font-weight: bold;
}
/*超连接*/
a:link, a:visited { /*点击之前*/
display: block;
font-weight: bold;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active { /*点击时*/
background-color: #7A991A;
}
/*列表*/
ul li {
/*取消样式*/
list-style-type: none;
/*浮动*/
float: left;
margin-left: 20px;
color: red;
}
/*表格*/
#ikun {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 200px;
border-collapse: collapse;
}
#ikun td, #ikun th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#ikun th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#ikun tr.kunkun td {
color: #000000;
background-color: #EAF2D3;
}
样式CSS代码
四、CSS 盒模型 一： 外边距：margin 1. 作用：设置元素和元素之间的间隔 2. 使用：margin：上 右 下 左 二：边框：border 1. 作用：设置边框的大小 2. 使用：border：大小 线条 颜色； 3. 圆角：border-radius：20px 三：内边距：padding 1. 作用：设置内容区和边框之间的距离 2. 使用：padding：10px； 五、CSS3 定位
我是老大
我是老二
我是老三
你是我的小苹果
@charset "UTF-8";
/*定位*/
.div_01{
width: 500px;
height:500px;
background-color: silver;
position: relative;
}
.one,.two,.three{
width: 100px;
height: 100px;
}
/*相对定位*/
.one{
background-color: lime;
position: relative;
left: 50px;
}
/*绝对定位*/
.two{
background-color: navy;
position: absolute;
left: 300px;
}
/*固定定位*/
.three{
background-color: orange;
position: fiexd;
right: 50px;
}
/*浮动*/
.div_02{
width: 500px;
height: 500px;
background-color: orange;
}
img{
width: 160px;
float: left;
}
/*溢流*/
.div_03{
width: 500px;
height: 500px;
background-color: silver;
}
p{
/*设置溢出内容*/
overflow: auto;
}
定位CSS代码
About The Author peace |
|---|
