imgCook设计稿智能生成代码

HTML, CSS学习笔记（完整版）

第一章 div布局

前几课内容

.htm是早期的后缀，因为那时只能支持长度为3的后缀，因此html与htm是一样的。

shtml是服务器先处理然后再交给浏览器处理

#HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV

#HTML小知识#之#声明#位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。更详细的介绍http://t.cn/h59taG

做网页先布局。

先大处布局，在细节点缀。

container的高度可以不用设定height，子元素有高度会把父元素撑开的

1.ID命名可根据C语言变量命名规则

2.HTML文件本身charset采用的编码必须与文件保存时的编码方式一样，否则出现乱码显现

DOCTYPE html>

<html>

<head>

<title>页面布局title>

head>

<body>

div>

div>

body>

html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#bottom{

height:120px;

background-color: blue;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

第二章盒模型

margin 外边框

border 边框

padding 内边框

第12课首页布局实战之margin设置

外边距

DOCTYPE html>

<html>

<head>

<title>页面布局title>

head>

<body>

div>

div>

div>

body>

html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 330px;

height: 280px;

background: black;

margin:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第13课盒模型之border设置

border的3要素：宽，形状（实现虚线），颜色

DOCTYPE html>

<html>

<head>

<title>study13.htmltitle>

div {

width: 300px;

height:300px;

background: blue;

border: 50px outset green;

}

style>

head>

<body>

<div>

div>

body>

html>

第14课用css控制border画三角形

边框透明

画一棵圣诞树

DOCTYPE html>

<html>

<head>

<title>study14.htmltitle>

#parent_div{

width: 600px;

height: 500px;

background: silver;

}

#tri1 {

width:0px;

height: 0px;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid green;

}

#tri2 {

width:0px;

height: 0px;

border-right: 120px solid transparent;

border-left: 120px solid transparent;

border-bottom: 120px solid green;

}

#tri3 {

width:0px;

height: 0px;

border-right: 150px solid transparent;

border-left: 150px solid transparent;

border-bottom: 150px solid green;

}

#tri4 {

width: 50px;

height: 130px;

background-color: saddlebrown;

}

style>

head>

<body>

div>

body>

html>

改进版：

DOCTYPE html>

<html>

<head>

<title>study14.htmltitle>

#parent_div{

width: 400px;

height: 360px;

background: silver;

margin: 0px auto;

}

#tri1 {

width:0px;

height: 0px;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid green;

margin-bottom: -50px;

}

#tri2 {

width:0px;

height: 0px;

border-right: 120px solid transparent;

border-left: 120px solid transparent;

border-bottom: 120px solid green;

margin-bottom: -60px;

}

#tri3 {

width:0px;

height: 0px;

border-right: 150px solid transparent;

border-left: 150px solid transparent;

border-bottom: 150px solid green;

}

#tri4 {

width: 50px;

height: 100px;

background-color: saddlebrown;

}

style>

head>

<body>

div>

body>

html>

第15课 padding详解

内边距

2.盒子的宽高各是100px，同时padding: 30px,背景为灰色，请问灰色面积是多少？160px*160px，所以padding也是铺的背景色，即背景色铺到border，但文字输入面积只有100px*100px。

DOCTYPE html>

<html>

<head>

<title>study15.htmltitle>

#a{

width: 100px;

height:100px;

padding: 30px;

background-color: gray;

}

style>

head>

<body>

打一些乱七八糟的字测试一下

div>

body>

html>

第16课 padding与背景

第17课 padding美化首页

增加padding后要减少原来width和height的值

DOCTYPE html>

<html>

<head>

<title>页面布局title>

head>

<body>

2014.09.09(星期二)

腾讯2015校园招聘就业中心一楼信息发布厅 19:00- 21:00

2014.09.10(星期三)

中国舰船研究设计中心（武汉）就业中心一楼信息发布厅 10:00- 12:00

陕西海泰电子有限责任公司教2-100（德育基地） 10:00- 12:00

核工业西南物理研究院主楼A-403 16:30- 18:30

div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息发布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息发布厅 16:30- 18:30

百度就业中心一楼信息发布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息发布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息发布厅 16:30- 18:30

百度就业中心一楼信息发布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息发布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息发布厅 16:30- 18:30

百度就业中心一楼信息发布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

div>

div>

div>

body>

html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 310px;

height: 260px;

background: white;

margin:10px;

padding:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第18课盒子模型的总结

一个盒子，有margin，border，padding，实占多少空间？

DOCTYPE html>

<html>

<head>

<title>study15.htmltitle>

#a{

width: 300px;

height:300px;

border: 50px solid blue;

padding:50px;

margin:50px;

background-color: silver;

}

style>

head>

<body>

一个盒子，有margin，border，padding，实占多少空间？

竖直方向：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

水平方向：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

</div>

body>

html>

第19课利用margin实现水平居中

DOCTYPE html>

<html>

<head>

<title>study19.htmltitle>

#a{

width: 300px;

height:200px;

background-color: silver;

margin: 0px auto;

}

style>

head>

<body>

body>

html>

DOCTYPE html>

<html>

<head>

<title>页面布局title>

head>

<body>

2014.09.09(星期二)

腾讯2015校园招聘就业中心一楼信息发布厅 19:00- 21:00

2014.09.10(星期三)

中国舰船研究设计中心（武汉）就业中心一楼信息发布厅 10:00- 12:00

陕西海泰电子有限责任公司教2-100（德育基地） 10:00- 12:00

核工业西南物理研究院主楼A-403 16:30- 18:30

div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息发布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息发布厅 16:30- 18:30

百度就业中心一楼信息发布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息发布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息发布厅 16:30- 18:30

百度就业中心一楼信息发布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息发布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息发布厅 16:30- 18:30

百度就业中心一楼信息发布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

div>

div>

div>

body>

html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

margin: 0px auto;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 310px;

height: 260px;

background: white;

margin:10px;

padding:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第20课 margin重叠现象

上下相邻普通元素margin重叠取大的值

float不同

DOCTYPE html>

<html>

<head>

<title>study20.htmltitle>

#test1 {

height: 200px;

background: silver;

margin-bottom: 100px;

}

#test2 {

height: 200px;

background: red;

margin-top: 100px;

}

style>

head>

<body>

相邻的普通元素，上下边距，并非简单地的相加

而是取其中较大的边距值

这种现象叫做margin重叠

div>

body>

html>

学过这课后重新修改了圣诞树。

第21课 inline内联（行内元素）

DOCTYPE html>

<html>

<head>

<title>study21.htmltitle>

<style>

#kurong {

color: red;

}

style>

head>

<body>

<div>

离离原上草，一岁一<div id="kurong">枯荣div>。

野火烧不尽，春风吹又生。

远芳侵古道，晴翠接荒城。

又送王孙去，萋萋满别情。

div>

body>

html>

DOCTYPE html>

<html>

<head>

<title>study21.htmltitle>

<style>

#kurong {

color: red;

}

style>

head>

<body>

<div>

离离原上草，一岁一枯荣span>。

野火烧不尽，春风吹又生。

远芳侵古道，晴翠接荒城。

又送王孙去，萋萋满别情。

div>

body>

html>

块状元素：独占一行

内联元素：不能设置宽高，内外边距，可以水平方向设置边距

* 块状元素和内联元素相互转化

块状元素转化为内联元素：css设置display:inline ;

内联元素转化为块状元素：css设置display:block ;

块状元素

内联元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

第22课内联与块状的转化

DOCTYPE html>

<html>

<head>

<title>study22.htmltitle>

div {

width:200px;

height:200px;

display:inline;

background: orange;

}

span {

width:200px;

height:200px;

display:none;

/* display:block; */

background: silver;

}

style>

head>

<body>

<div>块状div>

行内span>

body>

html>

display可能的值

值描述

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS中有值 compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。

marker CSS中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显示（类似

），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似

），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-row 此元素会作为一个表格行显示（类似

）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似

）。

table-column 此元素会作为一个单元格列显示（类似

）

table-cell 此元素会作为一个表格单元格显示（类似

标签

定义框架的一个窗口的：标签

定义文档与外部资源的关系的：链接标签

第35课图片是内联还是块状

图片不能设置margin值

可以转化为块状再取消margin值

和

）

table-caption 此元素会作为一个表格标题显示（类似

）

inherit 规定应该从父元素继承 display 属性的值。

第三章 CSS

第23课 CSS控制段落文本

DOCTYPE html>

<html>

<head>

<title>study23.htmltitle>

#p1 {

background-color: silver;

text-align: center;

letter-spacing: 15px;

}

#p2 {

background-color: orange;

text-indent: 20px;

text-decoration: line-through;

}

style>

head>

<body>

据有关数据显示。p>

不过，正当国内电商巨头们有条不紊的布局海淘之时，亚马逊，这家在中国早已被边缘化的国际电商巨鳄也在窥视着这块市场。近日，亚马逊中国方面放出风声，最快在今年第四季度开通海外产品直邮服务，届时，国内用户就能通过亚马逊中国买到从国外来的商品。p>

body>

html>

text-decoration none 默认。定义标准的文本。的一条线。

text-decoration overline 定义文本上的一条线。

text-decoration line-through 定义穿过文本下的一条线。

text-decoration blink 定义闪烁的文本。 //IE不支持火狐下可以使用

text-decoration inherit 规定应该从父元素继承text-decoration 属性的值。

text-decoration underline 定义文本下的一条线。

background-color 文本背景颜色

color 文本字体的颜色

text-indent 首行文本的缩进

text-align 文本对齐方式 left centerright

letter-spacing 字体间的距离

text-transform none默认值不变

text-transform uppercase 文本全大写

text-transform lowercase 文本全小写

text-transform 每个单词首字母大写

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

white-space 值为normal时去除空白字符

white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符，与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用

将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

当 white-space 属性设置为pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行。

----------------------------------

Properties

属性 CSS Version

版本 Inherit From Parent

继承性 Description

简介

text-indent CSS1 有检索或设置对象中的文本的缩进

text-overflow CSS3 无设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-align CSS1/CSS3有设置或检索对象中文本的对齐方式

text-transform CSS1/CSS3 有检索或设置对象中的文本的大小写

text-decoration CSS1/CSS3 无复合属性。检索或设置对象中的文本的装饰，如下划线、闪烁等

text-decoration-line CSS3 无检索或设置对象中的文本装饰线条的位置。

text-decoration-color CSS3 无检索或设置对象中的文本装饰线条的颜色。

text-decoration-style CSS3 无检索或设置对象中的文本装饰线条的形状。

text-shadow CSS3 有设置或检索对象中文本的文字是否有阴影及模糊效果

text-fill-color CSS3 有设置或检索对象中的文字填充颜色

text-stroke CSS3 有复合属性。设置或检索对象中的文字的描边

text-stroke-width CSS3 有设置或检索对象中的文字的描边厚度

text-stroke-color CSS3 有设置或检索对象中的文字的描边颜色

letter-spacing CSS1 有检索或设置对象中的文字之间的间隔

word-spacing CSS1 有检索或设置对象中的单词之间插入的空格数。

vertical-align CSS1/CSS2 无设置或检索对象内容的垂直对其方式

word-wrap CSS3有设置或检索当当前行超过指定容器的边界时是否断开转行

white-space CSS1 有设置或检索对象内空格的处理方式

direction CSS2有检索或设置文本流的方向

unicode-bidi CSS2 无用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

line-height CSS1 有检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

tab-size CSS3有检索或设置对象中的制表符的长度

第24课文字控制

DOCTYPE html>

<html>

<head>

<title>study24.htmltitle>

#text1 {

color: blue;

font-style: italic;

font-weight: bold;

font-size: x-large;

line-height: 50px;

}

#text2 {

font: 23px/46px Microsoft YaHei;

}

style>

head>

<body>

离离原上草，一岁一枯荣。

野火烧不尽，春风吹又生。

div>

远芳侵古道，晴翠接荒城。

又送王孙去，萋萋满别情。

div>

body>

html>

字体的英文名

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

宋体：SimSuncss中中文字体（font-family）的英文名称

Mac OS的一些：

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti

华文楷体：STKaiti

华文宋体：STSong

华文仿宋：STFangsong

儷黑 Pro：LiHei Pro Medium

儷宋 Pro：LiSong Pro Light

標楷體：BiauKai

蘋果儷中黑：Apple LiGothic Medium

蘋果儷細宋：Apple LiSung Light

Windows的一些：

新細明體：PMingLiU

細明體：MingLiU

標楷體：DFKai-SB

黑体：SimHei

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

微軟正黑體：Microsoft JhengHei

微软雅黑体：Microsoft YaHei

装Office会生出来的一些：

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinwei

Windows 中的中文字体。

在默认情况下，也就是未自行安装新字体或者 Office 等文字处理软件的情况下，Windows 默认提供下列字体：

Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312

Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)

Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB

那么每种字体能显示那些汉字呢？

Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集，

楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。

（注：Windows 3.X 只能支持 GB2312-80 字符集）

Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集，

SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。

下面对字符集进行简单的介绍：

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005

GB2312-80 中的字符数量最少，GB18030-2005 字符数量最多。

GB2312-80 是最早的版本，字符数比较少；

GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同；

GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同，主要增加了扩展 A 部分；

GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同，主要增加了扩展 B 部分；

由于 Unicode 5.2 的发布，估计 GB18030 会在近期发布新版本，增加扩展 C 部分。

需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。

如果想查看 GB18030 的标准文本，请访问 http://www.gb168.cn 中的强标阅读。

如果想了解 Unicode 的内容，请访问 http://www.unicode.org。

现在纠正网上普遍的一个错误：

GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号

与简体中文有关的代吗页如下：

936 gb2312 简体中文(GB2312)————其实是GBK

10008 x-mac-chinesesimp 简体中文(Mac)

20936 x-cp20936 简体中文(GB2312-80)

50227 x-cp50227 简体中文(ISO-2022)

51936 EUC-CN 简体中文(EUC)

52936 hz-gb-2312 简体中文(HZ)

54936 GB18030 简体中文(GB18030)

补充：

使用楷体_GB2312、仿宋_GB2312后，在 Windows 7/Vista/2008 中可能不再显示为对应的字体。

这是因为 Windows 7/Vista/2008 中有楷体、仿宋，默认情况下没有楷体_GB2312、仿宋_GB2312，字体名称相差“_GB2312”。

第25课字体控制精讲

新闻标题：用黑体或无衬线（sans-serif）

新闻正文：宋体或有衬线（serif）

注意，你设置的字体，你客户机器上未必有。要没有，这是显示的就是默认字体。

所以，要注意，你选的一些好看的字体，别人没有。

所以，用设置字体，可以将选用字体，和备选字体依次在后面排列。eg：

font-family：‘xx1’,'xx2','xd3',sans-serif;

上面这句的意思就是，客户的浏览器先去调用’xx1'字体，如果客户没有，便调用'xx2'，还没有，再调用'xx3',如果还是没有，就让浏览器随便调用一个sans-serif的字体就行。

第26课背景图片

background-attachment : scroll默认值滚动 fiixed背景固定

background-color : transparent 默认值背景透明

background-color：颜色背景颜色

background-image： none默认值无背景url（背景路径）背景图片

background-position： left top center right 可以选择背景所在的位置

background-repeat： repeat-x X轴平铺 repeat-y Y轴平铺 no-repeat 背景图片不重复

1.背景图与背景色，都设置，显示背景图。

2.为什么有的网站既设背景图又设背景色？

1）由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来即可先显示背景色。

2）还有一种情况，考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。

DOCTYPE html>

<html>

<head>

<title>study26.htmltitle>

body {

background-color:black;

background-repeat: repeat-x;

background-attachment: fixed;

}

style>

head>

<body>

body>

html>

第27课大图片背景

DOCTYPE html>

<html>

<head>

<title>study27.htmltitle>

#text1 {

border: 1px solid orange;

width: 500px;

height: 500px;

background-repeat: no-repeat;

background-position: center center;

}

#text2 {

width: 80px;

height: 20px;

border: 1px solid blue;

background-position: -5px -120px;

}

#text3 {

width: 30px;

height: 30px;

border: 1px solid black;

background-position: -160px -523px;

}

style>

head>

<body>

body>

html>

1.CSS控制页面时，页面以左上角为原点，向下为正Y轴，向右为正X轴

第28课 CSS选择器

DOCTYPE html>

<html>

<head>

<title>study28.htmltitle>

#test1 {

width: 100px;

height: 50px;

border: 1px solid blue;

}

.test2 {

width: 100px;

height: 50px;

border: 1px solid red;

}

div {

width: 200px;

height: 200px;

background-color: orange;

margin-bottom: 10px;

}

div p {

color: red;

}

style>

head>

<body>

<div>

普通div

div中的p

div>

独立的p

<div>

css选择器：id选择器(#)，class选择器(.),标签选择器（div{}），派生选择器(div p{})

div>

body>

html>

1.css选择器：id选择器(#)，class选择器(.),标签选择器（div{}），派生选择器(div p{})

2.还有没有其他选择器及其用法？

第一 id #xxx

第二 class .xxx

第三标签 div p body 等

第四后代 div p{} .a .b{} 等表示所有空格后面的选择器生效

第五子代 div > p 只有大于号后面的选择器生效不继承下去了

第六群组选择 div,p,a{} 记住是逗号不是小数点，表示div p a标签都生效

第七伪选择器比如 a:link 让鼠标放上去的时候生效

第八通用选择器比如 p *{} 表示p标签后面的所有标签都生效

第九相邻选择器比如 p+div{} 表示 p后面的第一个div生效后面的都无效

第十属性选择器比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性有的话就生效

第29课 CSS优先级

控制的越精细，优先级越高

DOCTYPE html>

<html>

<head>

<title>study29.htmltitle>

p {

color: red;

}

.test2 {

color: green;

}

#test1 {

color: blue;

}

div #test1{

color: pink;

}

style>

head>

<body>

<div>

天天向上p>

div>

body>

html>

第30课 CSS引入方式

DOCTYPE html>

<html>

<head>

<title>study30.htmltitle>

body {

background-color: silver;

}

style>

head>

<body>

<div id="test1" style="color: white;">好好学习div>

body>

html>

@CHARSET "UTF-8";

@import url(study301.css);

#test1 {

width: 100px;

height: 100px;

background-color: orange;

}

@CHARSET "UTF-8";

@import url(study301.css);

#test1 {

width: 100px;

height: 100px;

background-color: orange;

}

CSS的四种引入方式

要说出CSS的引入方式，没有什么难度，但要说到为什么使用不同的引入方式，就有些学问在里面了。

CSS的引入方式最常用的有三种，

第一：在head部分加入,引入外部的CSS文件。

这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。

第二：在head部分加入

这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。　但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

第三：直接在页面的标签里加　测试信息

这种方法现在用的很少，很多公司不了解前端技术的领导还对这种写法很痛恨。认为ＨＴＭＬ里不能出现ＣＳＳ命令。其实有时候使用下也没有什么大不了。比如通用性差，效果特殊，使用ＣＳＳ命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。

除了这三种常用的ＣＳＳ引入方式，还有种很多人都没有见过的引入方式

这就是第四种引入方式。在ＩＢＭ工作的时候，只能使用一种Ajax框架，就是ＤＯＪＯ。而ＤＯＪＯ的CSS引用，就是采用了@import的方式。这种情况非常少，主要用在CSS文件数量庞大的负责的系统中。另外@important本身是一个CSS命令，是放在CSS文件里的，这个跟LINK标签有很大的区别。

第31课 CSS初始化

DOCTYPE html>

<html>

<head>

<title>study31.htmltitle>

ul {

border: 1px solid blue;

}

li {

border: qpx solid red;

}

style>

head>

<body>

<div>

相同的元素，如li，在不同的浏览器下，显示的效果稍有不同，

是因为，浏览器对各种元素的margin，border，font-size等略有不同

为了杜绝这种情况，我们通过CSS强制让所有的元素的属性值都一样

这样浏览器显示效果就一致了，减少了不兼容情况的发生

<ul>

ul>

div>

body>

html>

腾讯的初始化代码

/*update 20140616*/

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}

a{color:#172c45;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

第四章 HTML语义标签

第32课HTML学习思维导图

一、html结构：

主要包括3部分：doctype、head、body

1）doctype:文档类型,XHTML1.0提供了3中DTD供可供选择

* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：

* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如
，完整代码如下：

* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：

2）head:包括meta charser和title,也能包括css。

3）body:各种div及html标签。

二、div布局

1、布局原则：从上到下、从左到右、从大到小

2、盒模型：块状元素div看成盒子。

1）盒子有自己的宽width和高height;

2)盒子与盒子之间的距离称为外边距margin：

margin后面可以跟1~4个值，按照上、右、下、左的顺序为四个方向分配值，没有分配到的取对边的值。

普通元素及父子元素在竖直方向上存在margin重叠现象，即相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值；关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。

3）盒子的厚度称为边框border。border的3要素：宽形状颜色。

border的3要素可单独定义，也可以和4个方向按需要结合。

4）盒子与内部内容的距离称为padding：定义方式同margin。

3、普通div无论宽度是多少都独占一行，要实现2个div并排显示，就要用浮动float，如float:left/right;

浮动元素后面再来一个普通元素，那这个元素会跑到浮动元素的下面，所以要使它正常显示，要清除浮动clear，如clear:left/right/both;

三、css效果

1、选择器

常用的有id选择器、类选择器、标签选择器、派生选择器

第一 id选择器 #xxx

第二 class选择器 .xxx

第三标签选择器 div p body 等

第四派生选择器 div p{} .a .b{} 等表示所有空格后面的选择器生效

第五子代选择器 div > p 只有大于号后面的选择器生效不继承下去了

第六群组选择 div,p,a{} 记住是逗号不是小数点，表示div p a标签都生效

第七伪类选择器比如 a:link 让鼠标放上去的时候生效

第八通用选择器比如 p *{} 表示p标签后面的所有标签都生效

第九相邻选择器比如 p+div{} 表示 p后面的第一个div生效后面的都无效

第十属性选择器比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性有的话就生效

2、控制效果

1）段落控制：text-indent:首行缩进

text-align:水平文字方向

text-decoration:文本装饰线

letter-spacing:字符间距

text-transform:字母大小写转换

2）文本控制：color:颜色

font-style:字体样式

font-weight:字体粗细

font-size:字体大小

line-height:行高

font-family:字体

3）背景控制：background-color:背景色

background-image:背景图片

background-repeat:背景图重复

background-attachment:背景图粘贴方式

background-position:背景图位置

背景色和背景图同时设置时，优先显示背景图，同时设置为了当背景图被删除或缓冲慢时，设置一个与背景图色调相近的背景色，使网站的视觉效果不会反差太大。

当背景图比元素还大时，就需要调background-positin来实现。

4）css引入方式

①页内style标签即在head部分加入style标签：

②外部css文件,在head部分加入link：

③行内style标签,直接在页面的标签里加style属性：

测试信息

④import导入即在head部分加入@import：

5）初始化

因为各浏览器对于元素有默认css参数，而且可能不一致，那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。

四、html标签

分为2大类：无语义标签和有语义标签。

之前学过的div和span都是无语义标签，div是布局分块的块状元素，span是选择文字用的内联元素。

有语义标签，每个标签的名字就能看出它的作用，有标题h1~h6，段落p,图片img，视频embed，超链接和锚点a，无序列表ul,有序列表ol，表格table。

http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg

第33课 h标签与p标签

第34课 img标签

src 这里是路径问题。

./ 是相同目录下

../ 是返回上一级目录

DOCTYPE html>

<html>

<head>

<title>study34.htmltitle>

head>

<body>

body>

html>

单闭合标签

注释标签：

严格来讲不算HTML标签的：文档声明标签

设置页面元信息的：标签

设置网页所有链接的相对目录(如根目录)的：标签

换行：

水平线：

图像：

表单元素

在表格table中定义一个或多个列的属性的：

DOCTYPE html>

<html>

<head>

<title>study35.htmltitle>

img {

width: 300px;

height: 180px;

border: 1px solid blue;

display: block;

}

#test1 {

width: 500px;

height: 300px;

border: 1px solid blue;

}

style>

head>

<body>

<div id="test1">图片是内联元素，同时是内联替换元素，替换元素是能设置宽高的div>

body>

html>

搜索除了img还有那些替换元素 w3creplaced element

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如： type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的、、、<select>、<object>都是替换元素，这些元素都没有实际的内容。 <h2>第36课有序列表和无序列表</h2> 为了最大程度的兼容不同浏览器，通常把 li 标签设置为list-syle-type：none ，然后通过加载自定义图片来实现。 <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study36.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> ul li { list-style-type: square; } ol li { list-style-type: upper-roman; } </style> </head> <body> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> <ol> <li>aaasda</li> <li>aadfa</li> <li>aaadsfa</li> <li>aafda</li> </ol> </body> </html> </td> </tr> </tbody> </table> ----- 小熊列表 <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study36.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> ul li { /* list-style-type: square; */ list-style-type: none; background-image: url("./pic/20140917040521823_easyicon_net_32.png"); background-repeat: no-repeat; background-size:20px; background-position: left center; padding-left: 20px; } ol li { list-style-type: upper-roman; } </style> </head> <body> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> <ol> <li>aaasda</li> <li>aadfa</li> <li>aaadsfa</li> <li>aafda</li> </ol> </body> </html> </td> </tr> </tbody> </table> <h2>第37课整齐的表格</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study37.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> table { border-collapse: collapse;/* 表格边框融合 */ } td { border: 1px solid blue; } </style> </head> <body> <table> <tr> <td colspan="3">sdfsdf</td> </tr> <tr> <td>sdfsdf</td> <td>sdfsdf</td> <td>sdfsdf</td> </tr> <tr> <td>sdfsdf</td> <td>sdfsdf</td> <td>sdfsdf</td> </tr> </table> </body> </html> </td> </tr> </tbody> </table> <h2>第38课超链接</h2> a标签，内联元素 <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study38.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body> <a href="webTest.html" target="_blank" title="鼠标放上来">点击(在空白新窗口显示)</a> </body> </html> </td> </tr> </tbody> </table> 使用# 来实现标签，转到特定内容下 <h2>第39课锚点</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study39.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body> <a href="./study39.html#p1">p1锚点</a> <a href="./study39.html#p2">p2锚点</a> <a href="./study39.html#p3">p3锚点</a> <a name="p1"></a> <p>1asdfasdf</p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a name="p2"></a> <p>2asdfasdf</p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a name="p3"></a> <p>3asdfasdf</p> </body> </html> </td> </tr> </tbody> </table> <h2>第40课 css伪类</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study40.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> a:LINK {/* 默认颜色 */ color: gray; } a:VISITED { /* 访问过的颜色 */ color: purple; } a:HOVER { /* 鼠标放上去的颜色 */ color: orange; } a:ACTIVE { /* 鼠标按住不放的颜色 */ color: black; } </style> </head> <body> <div> css允许我们针对a标签的4中状态设置各自的css特性，叫做css的伪类<br> 1：active一般不写 2: 一定要注意，顺序是LVHA 3: a:link可以简写为a </div> <div> <a href="#">空链接</a> <a href="#">空链接</a> <a href="#">空链接</a> <a href="#">空链接</a> <a href="#">空链接</a> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第41课字符实体</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study41.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body> <div> 在html开发中，有一些字符，不适于直接写出，如><<br> 一般的格式：& + 实体名 + ;<br> 实体有很多，记住常用的<br> ><"¥©<br> </div> </body> </html> </td> </tr> </tbody> </table> <h1>第五章公司网页开发实战</h1> <h2>第42课公司网站开发之首页布局</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body> <div id="container"> <div id="header"> <ul id="navi"> <li>导航1</li> <li>导航2</li> <li>导航3</li> <li>导航4</li> <li>导航5</li> <li>导航6</li> <li>导航7</li> </ul> </div> <div id="main"> <div id="lside"> <div class="subtitle"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> </div> <div id="rside"> <div class="subtitle"></div> <ul id="article"> <li>文章1</li> <li>文章2</li> <li>文章3</li> <li>文章4</li> <li>文章5</li> <li>文章6</li> <li>文章7</li> </ul> </div> </div> <div id="footer"></div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第43课首页实战导航制作</h2> css初始化： <table border="1"> <tbody> <tr> <td valign="top"> @CHARSET "UTF-8"; /*css reset code */ /**** 文字大小初始化,使1em=10px *****/ body { font-size:62.5%; } /* for IE/Win */ html>body { font-size:10px; } /* for everything else */ /*字体边框等初始化*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } img { display:block; } address,caption,cite,code,dfn,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:''; } abbr,acronym { border: 0; } a { text-decoration:none; } </td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <style type="text/css"> #container { width: 1002px; } #header { height:128px; background: gray url("./indexPics/top_bg.jpg"); } #navi li { width:90px; margin-right:1px; float: left; } #navi a { font-size:16px; font-family:Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("./indexPics/nav_on.gif"); } </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <div id="main"> <div id="lside"> <div class="subtitle"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> </div> <div id="rside"> <div class="subtitle"></div> <ul id="article"> <li>文章1</li> <li>文章2</li> <li>文章3</li> <li>文章4</li> <li>文章5</li> <li>文章6</li> <li>文章7</li> </ul> </div> </div> <div id="footer"></div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第44课首页实战之main区开发</h2> css <table border="1"> <tbody> <tr> <td valign="top"> @CHARSET "UTF-8"; .clr { clear: both; width: 0px; height: 0px; } #container { width: 1002px; } #header { height: 128px; background: gray url("../indexPics/top_bg.jpg"); } #navi li { width: 90px; margin-right: 1px; float: left; } #navi a { font-size: 16px; font-family: Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("../indexPics/nav_on.gif"); } #main { } #lside { height: 480px; width: 694px; border: 1px solid gray; background-color: white; float: left; } .subtitle { height: 37px; background-image: url("../indexPics/index_main_top_bg.gif"); } .subtitle img { margin:5px 0 0 10px; float: left; } .subtitle h1 { float: left; margin-left:10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .subtitle a { font-size:12px; color: gray; float: right; } .four { width: 326px; height: 200px; background-color: #eee; float: left; margin: 10px; } .four h2 { margin:6px 0 6px 10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .four img { background-color:white; float: left; margin-left: 10px; padding: 6px; } .four ul { float: left; margin-left: 10px; } .four li { background-image: url("../indexPics/service_intro_bg.gif"); background-repeat: no-repeat; padding-left:10px; height: 20px; } .four a { color: gray; } .four a:VISITED{ color: gray; } .four a:HOVER { text-decoration: underline; } #rside { height: 600px; width: 294px; background-color: green; float: right; } #footer { height: 120px; background-color: black; } </td> </tr> </tbody> </table> index.html <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <div id="main"> <div id="lside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>核心业务</h1> <a href="#">MORE>></a> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> </div> <ul id="article"> <li>文章1</li> <li>文章2</li> <li>文章3</li> <li>文章4</li> <li>文章5</li> <li>文章6</li> <li>文章7</li> </ul> </div> </div> <div class="clr"></div> <div id="footer"></div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第45课首页实战之main区(2)</h2> css <table border="1"> <tbody> <tr> <td valign="top"> @CHARSET "UTF-8"; .clr { clear: both; width: 0px; height: 0px; } #container { width: 1002px; } #header { height: 128px; background: gray url("../indexPics/top_bg.jpg"); } #navi li { width: 90px; margin-right: 1px; float: left; } #navi a { font-size: 16px; font-family: Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("../indexPics/nav_on.gif"); } #main { } #lside { height: 480px; width: 694px; border: 1px solid gray; background-color: white; float: left; } .subtitle { height: 37px; background-image: url("../indexPics/index_main_top_bg.gif"); } .subtitle img { margin:5px 0 0 10px; float: left; } .subtitle h1 { float: left; margin-left:10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .subtitle a { font-size:12px; color: gray; float: right; } .four { width: 326px; height: 200px; background-color: #eee; float: left; margin: 10px; } .four h2 { margin:6px 0 6px 10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .four img { background-color:white; float: left; margin-left: 10px; padding: 6px; } .four ul { float: left; margin-left: 10px; } .four li { background-image: url("../indexPics/service_intro_bg.gif"); background-repeat: no-repeat; padding-left:10px; height: 20px; } .four a { color: gray; } .four a:VISITED{ color: gray; } .four a:HOVER { text-decoration: underline; } #rside { width: 294px; float: right; } #article { background: #eee; margin-top: 1px; padding-top: 10px; } #article a { display: block; height: 29px; padding-left:30px; background-image: url("../indexPics/article_head.gif"); background-repeat: no-repeat; } #article a:HOVER { background-image: url("../indexPics/article_on_bg.gif"); } #contact { margin-top:1px; height: 240px; background-color: #eee; } #footer { height: 120px; background-color: black; } </td> </tr> </tbody> </table> html <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <div id="main"> <div id="lside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>核心业务</h1> <a href="#">MORE>></a> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>文章观点</h1> <a href="#">MORE>></a> </div> <ul id="article"> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> </ul> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>联系我们</h1> <a href="#">MORE>></a> </div> <div id="contact"> </div> </div> </div> <div class="clr"></div> <div id="footer"></div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第46课首页实战之footer区域开发</h2> css <table border="1"> <tbody> <tr> <td valign="top"> @CHARSET "UTF-8"; .clr { clear: both; width: 0px; height: 0px; } #container { width: 1002px; margin: 0 auto; } #header { height: 128px; background: gray url("../indexPics/top_bg.jpg"); } #navi li { width: 90px; margin-right: 1px; float: left; } #navi a { font-size: 16px; font-family: Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("../indexPics/nav_on.gif"); } #banner{ margin: 5px 0; } #main { } #lside { height: 480px; width: 694px; border: 1px solid #eee; border-top:none; background-color: white; float: left; } .subtitle { height: 37px; background-image: url("../indexPics/index_main_top_bg.gif"); } .subtitle img { margin:5px 0 0 10px; float: left; } .subtitle h1 { float: left; margin-left:10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .subtitle a { font-size:12px; color: gray; float: right; } .four { width: 326px; height: 200px; background-color: #eee; float: left; margin: 10px; } .four h2 { margin:6px 0 6px 10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .four img { background-color:white; float: left; margin-left: 10px; padding: 6px; } .four ul { float: left; margin-left: 10px; } .four li { background-image: url("../indexPics/service_intro_bg.gif"); background-repeat: no-repeat; padding-left:10px; height: 20px; } .four a { color: gray; } .four a:VISITED{ color: gray; } .four a:HOVER { text-decoration: underline; } #rside { width: 294px; float: right; } #article { background: #eee; margin-top: 1px; padding-top: 10px; } #article a { display: block; height: 29px; padding-left:30px; background-image: url("../indexPics/article_head.gif"); background-repeat: no-repeat; } #article a:HOVER { background-image: url("../indexPics/article_on_bg.gif"); } #contact { margin-top:1px; height: 240px; background-color: #eee; } #footer { margin-top:15px; height: 120px; } #footer ul { height: 40px; background-color: #eee; } #footer li { float: left; margin-top: 15px; margin-right: 10px; } #footer address { font-family: Microsoft Yahei, SimHei, sans-serif; font-size: 12px; margin-top: 12px; } </td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <img alt="" src="./indexPics/about_banner.jpg" id="banner"> <div id="main"> <div id="lside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>核心业务</h1> <a href="#">MORE>></a> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>文章观点</h1> <a href="#">MORE>></a> </div> <ul id="article"> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> </ul> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>联系我们</h1> <a href="#">MORE>></a> </div> <div id="contact"> </div> </div> </div> <div class="clr"></div> <div id="footer"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> </ul> <address>© 2009-2016 西安豪氧公司版权所有 http://www.gigigig.com 京ICP备123456789号</address> </div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第47课首页实战之色彩微调</h2> <table border="1"> <tbody> <tr> <td valign="top"> @CHARSET "UTF-8"; .clr { clear: both; width: 0px; height: 0px; } #container { width: 1002px; margin: 0 auto; } #header { height: 128px; background: gray url("../indexPics/top_bg.jpg"); } #navi li { width: 90px; margin-right: 1px; float: left; } #navi a { font-size: 16px; font-family: Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("../indexPics/nav_on.gif"); } #banner{ margin: 5px 0; } #main { } #lside { height: 480px; width: 694px; border: 1px solid #eee; border-top:none; background-color: white; float: left; } .subtitle { height: 37px; background-image: url("../indexPics/index_main_top_bg.gif"); } .subtitle img { margin:5px 0 0 10px; float: left; } .subtitle h1 { float: left; margin-left:10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .subtitle a { font-size:12px; color: #888; float: right; } .four { width: 326px; height: 200px; background-color: #eee; float: left; margin: 10px; } .four h2 { color:#a0a0a0; margin:6px 0 6px 10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .four img { background-color:white; float: left; margin-left: 10px; padding: 6px; } .four ul { float: left; margin-left: 10px; } .four li { background-image: url("../indexPics/service_intro_bg.gif"); background-repeat: no-repeat; padding-left:10px; height: 20px; } .four a { color: #888; } .four a:VISITED{ color: #808080; } .four a:HOVER { color:#ff832c; text-decoration: underline; } #rside { width: 294px; float: right; } #article { background: #eee; margin-top: 1px; padding-top: 10px; } #article a { color:#888; display: block; height: 29px; padding-left:30px; background-image: url("../indexPics/article_head.gif"); background-repeat: no-repeat; } #article a:HOVER { color:#ff832c; background-image: url("../indexPics/article_on_bg.gif"); } #contact { margin-top:1px; height: 240px; background-color: #eee; } #footer { margin-top:15px; height: 120px; } #footer ul { height: 40px; background-color: #eee; } #footer li { float: left; margin-top: 15px; margin-right: 10px; } #footer a { color: #888; } #footer a:HOVER { color:#ff832c; } #footer address { font-family: Microsoft Yahei, SimHei, sans-serif; font-size: 12px; margin-top: 12px; } </td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <img alt="" src="./indexPics/about_banner.jpg" id="banner"> <div id="main"> <div id="lside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>核心业务</h1> <a href="#">MORE>></a> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>文章观点</h1> <a href="#">MORE>></a> </div> <ul id="article"> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> </ul> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>联系我们</h1> <a href="#">MORE>></a> </div> <div id="contact"> </div> </div> </div> <div class="clr"></div> <div id="footer"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> </ul> <address>© 2009-2016 西安豪氧公司版权所有 http://www.gigigig.com 京ICP备123456789号</address> </div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第48课利用行高实现文字居中</h2> <table border="1"> <tbody> <tr> <td valign="top"> @CHARSET "UTF-8"; .clr { clear: both; width: 0px; height: 0px; } #container { width: 1002px; margin: 0 auto; } #header { height: 128px; background: gray url("../indexPics/top_bg.jpg"); } #navi li { width: 90px; margin-right: 1px; float: left; } #navi a { font-size: 16px; line-height:37px; font-family: Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("../indexPics/nav_on.gif"); } #banner{ margin: 5px 0; } #main { } #lside { height: 480px; width: 694px; border: 1px solid #eee; border-top:none; background-color: white; float: left; } .subtitle { height: 37px; background-image: url("../indexPics/index_main_top_bg.gif"); } .subtitle img { margin:5px 0 0 10px; float: left; } .subtitle h1 { line-height:37px; float: left; margin-left:10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .subtitle a { display:block; line-height:37px; font-family:SimSun, serif; font-size:12px; color: #888; float: right; } .four { width: 326px; height: 200px; background-color: #eee; float: left; margin: 10px; } .four h2 { color:#a0a0a0; margin:6px 0 6px 10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .four img { background-color:white; float: left; margin-left: 10px; padding: 6px; } .four ul { float: left; margin-left: 10px; } .four li { background-image: url("../indexPics/service_intro_bg.gif"); background-repeat: no-repeat; padding-left:10px; height: 20px; } .four a { color: #888; } .four a:VISITED{ color: #808080; } .four a:HOVER { color:#ff832c; text-decoration: underline; } #rside { width: 294px; float: right; } #article { background: #eee; margin-top: 1px; padding-top: 10px; } #article a { color:#888; display: block; height: 29px; line-height:29px; padding-left:30px; background-image: url("../indexPics/article_head.gif"); background-repeat: no-repeat; } #article a:HOVER { color:#ff832c; background-image: url("../indexPics/article_on_bg.gif"); } #contact { margin-top:1px; height: 240px; background-color: #eee; } #footer { margin-top:15px; height: 120px; } #footer ul { height: 40px; background-color: #eee; } #footer li { float: left; margin-top: 15px; margin-right: 10px; } #footer a { color: #888; } #footer a:HOVER { color:#ff832c; } #footer address { font-family: Microsoft Yahei, SimHei, sans-serif; font-size: 12px; margin-top: 12px; } </td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <img alt="" src="./indexPics/about_banner.jpg" id="banner"> <div id="main"> <div id="lside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>核心业务</h1> <a href="#">MORE>></a> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>文章观点</h1> <a href="#">MORE>></a> </div> <ul id="article"> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> </ul> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>联系我们</h1> <a href="#">MORE>></a> </div> <div id="contact"> </div> </div> </div> <div class="clr"></div> <div id="footer"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> </ul> <address>© 2009-2016 西安豪氧公司版权所有 http://www.gigigig.com 京ICP备123456789号</address> </div> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第49课 IE浏览器兼容</h2> 主要是字体大小的问题 bug的几种常见原因： 1 没有正确使用doctype，解决方案正确声明即可 2 个浏览器对不同标签的初始值不同，解决方案 css初始化 3 自身书写不规范，写规范即可 4 浏览器bug IE下真正的bug 1 盒模型bug，解决方案使用严格doctype声明 2 双倍margin bug，解决方案： _display:inline此时只影响IE浏览器，左浮元素，左margin是定义的2倍 3 不认识a:link，解决方案只定义a 4 3像素margin bug，解决方案规范浮动与清楚浮动 最终代码： <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>首页实战</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img id="logo" src="./indexPics/logo.jpg" alt=""> <ul id="navi"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> </ul> </div> <img alt="" src="./indexPics/about_banner.jpg" id="banner"> <div id="main"> <div id="lside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>核心业务</h1> <a href="#">MORE>></a> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> <div class="four"> <h2>电子商务类网站建设</h2> <img alt="" src="./indexPics/eshop_service.jpg"> <ul> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> <li><a href="#">方便的订单管理</a></li> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>文章观点</h1> <a href="#">MORE>></a> </div> <ul id="article"> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> </ul> <div class="subtitle"> <img alt="" src="./indexPics/circle.gif"> <h1>联系我们</h1> <a href="#">MORE>></a> </div> <div id="contact"> </div> </div> </div> <div class="clr"></div> <div id="footer"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">联系我们</a></li> </ul> <address>© 2009-2016 西安豪氧公司版权所有 http://www.gigigig.com 京ICP备123456789号</address> </div> </div> </body> </html> </td> </tr> <tr> <td valign="top"> @CHARSET "UTF-8"; .clr { clear: both; width: 0px; height: 0px; } #container { width: 1002px; margin: 0 auto; } #header { height: 128px; background: gray url("../indexPics/top_bg.jpg"); } #navi li { width: 90px; margin-right: 1px; float: left; } #navi a { font-size: 16px; line-height:37px; font-family: Microsoft YaHei; color: #363636; display: block; width: 90px; height: 37px; text-align: center; } #navi a:HOVER { color: white; background-image: url("../indexPics/nav_on.gif"); } #banner{ margin: 5px 0; } #main { } #lside { height: 480px; width: 694px; border: 1px solid #eee; border-top:none; background-color: white; float: left; } .subtitle { height: 37px; background-image: url("../indexPics/index_main_top_bg.gif"); } .subtitle img { margin:5px 0 0 10px; float: left; } .subtitle h1 { color:#151515; line-height:37px; float: left; margin-left:10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .subtitle a { display:block; line-height:37px; font-family:SimSun, serif; font-size:12px; color: #888; float: right; } .four { width: 326px; height: 200px; background-color: #eee; float: left; margin: 10px; } .four h2 { color:#a0a0a0; margin:6px 0 6px 10px; font-size: 16px; font-family: Microsoft Yahei, SimHei, sans-serif; } .four img { background-color:white; float: left; margin-left: 10px; padding: 6px; } .four ul { float: left; margin-left: 10px; } .four li { background-image: url("../indexPics/service_intro_bg.gif"); background-repeat: no-repeat; padding-left:10px; height: 20px; } .four a { font-size:12px; color: #888; } .four a:VISITED{ color: #808080; } .four a:HOVER { color:#ff832c; text-decoration: underline; } #rside { width: 294px; float: right; } #article { background: #eee; margin-top: 1px; padding-top: 10px; } #article a { color:#888; display: block; height: 29px; line-height:29px; font-size:12px; padding-left:30px; background-image: url("../indexPics/article_head.gif"); background-repeat: no-repeat; } #article a:HOVER { color:#ff832c; background-image: url("../indexPics/article_on_bg.gif"); } #contact { margin-top:1px; height: 240px; background-color: #eee; } #footer { margin-top:15px; height: 120px; } #footer ul { height: 40px; background-color: #eee; } #footer li { font-size:12px; float: left; margin-top: 15px; margin-right: 10px; } #footer a { color: #888; } #footer a:HOVER { color:#ff832c; } #footer address { font-family: Microsoft Yahei, SimHei, sans-serif; font-size: 12px; margin-top: 12px; } </td> </tr> </tbody> </table> <h1>第六章附录</h1> <h2>第50课色彩的表示</h2> <h2>第51课尺寸的表示</h2> 像素表示 百分比表示：占父元素的百分比 <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study51.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> #parent { font-size: 10px; } #p1 { font-size: 20px; } #p2 { font-size: 1.5em; } </style> </head> <body> <div id="parent"> 父div <p id="p1">我用px表示文字大小</p> <p id="p2">我用em表示文字大小，em是相对大小，是指其父元素中的1个"M"的大小，简单理解为父元素的font-size就是一个emd单位</p> </div> </body> </html> </td> </tr> </tbody> </table> ex (x-height，字母 "x" 的高度) cm (厘米，1厘米=10毫米) mm (米) pt (点，1点=1/72英寸) pc(12点活字，1pc=12点) CSS中的单位有9种，他们是百分比（%）、英寸（in）、厘米（cm）、毫米（mm）、磅数（pt）、12点活字（pc）、字母高度一半（ex）、字体高度（em）和像素（px）。网页制作时最常用的四个尺寸单位是：px、%、em、pt，但在使用时也需要根据不同的情况进行选择。比如字体的大小经常使用px、em和pt，元素的宽度经常使用%、px、em。 <h2>第52课 CSS画圆角</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study52.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> #test1 { width:300px; height:300px; border:1px solid blue; border-radius:15px; } #test2 { width:300px; height:300px; border:1px solid red; border-radius:150px; } </style> </head> <body> <div id="test1">CSS画圆角，目前的主流浏览器都已经支持</div> <div id="test2">CSS画一个圆</div> </body> </html> </td> </tr> </tbody> </table> <h2>第53课相对定位与绝对定位</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study53.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> #test1 { width: 300px; height: 300px; background-color: green; } p { margin: 0; padding: 0; } #p1 { width: 100px; height: 100px; background-color: gray; position: relative; /* top: 20px; left: 20px; */ right: 20px; bottom: 20px; } #p2 { width: 100px; height: 100px; background-color: orange; } #test2 { width: 300px; height: 300px; background-color: pink; position: relative; } #p3 { width: 100px; height: 100px; background-color: yellow; position: absolute; right:20px; bottom: 30px; z-index: 1000; } #p4 { width: 100px; height: 100px; background-color: gray; position: absolute; right:30px; bottom: 40px; } </style> </head> <body> <div id="test1"> <p id="p1">我是p1，相对定位是指元素在其正常的位置，偏移某些像素</p> <p id="p2">我是p2，相对定位是指元素在其正常的位置，偏移某些像素</p> </div> <div id="test2"> 用绝对定位时，父元素要求有position属性才行，否则将依据父的父，父的父的父……body,<br> 哪个祖先有position就相对哪个，否则相对body <p id="p3">我是p3，绝对定位是指相对于父元素的top,right,bottom,left来定位</p> <p id="p4">我是p4</p> </div> </body> </html> </td> </tr> </tbody> </table> <h2>第54课 overflow溢出处理</h2> overflow 属性规定当内容溢出元素框时发生的事情。 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承overflow 属性的值。 清楚浮动的方法：1. 使用空div，这只其div css{clear:both;}。 2.通过:after伪类来清理浮动，淘宝、腾讯使用的清除浮动的代码： .allCon {}.allCon:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;} <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study54.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css"> div { width: 200px; height: 200px; border: 1px solid blue; overflow: auto; } p { border: 1px solid red; } </style> </head> <body> <div id=""> <p>内容很多，会不会溢出越过山和大海前端是近几年发展起来的职业，很多人对前端的认识比较模糊，因此开篇我有必要介绍一番，前端（这里的前端是大众口中的前端）偏美工是视觉设计，前端偏用户是用户体验，前端偏目标导向是交互设计，前端偏技术才是大家口中的前端。和前端有关系的几样技术：PS，DW，FL，HTML+CSS+JS，看过很多人给前端的建议也差不多是学习这几种软件和HTML+CSS+JS等等了，不过我却觉得大家在把前端往一个误区引导。为什么呢？听我慢慢解释。 先来说说和前端有联系的几个职位：前端工程师、视觉设计师、用户研究工程师、交互设计师。我用一个简单的例子来分析：我们都经常在一些社区评论留言，留言的表面过程：打开留言页面——输入留言内容——点击提交按钮——留言显示在留言列表上。我这里不解释这个过程的实现原理。 ---2012年10月12日修改--- 前端工程师：留言框代码怎么写？留言框的显示、一些JS动态效果的显示（可能涉及异步请求）。 视觉设计师：什么样的留言框最漂亮？怎么布局？用什么色彩还是需要做一些纹理？ 用户研究工程师：用户怎么留言最舒服？很多人可能会和用户体验师混淆在一起，其实这两种人有着本质的区别，用户研究更侧重的是方法论，注重问卷调查访谈等等行为来了解用户的潜在行为习惯，而用户体验是一种行为，更侧重的是体验之后的实际感受。 交互设计师：留言过程中的反馈？输入错误后的提示，留言成功后的反馈等等。交互设计可以理解为人机对话，交互设计侧重和用户交流之后，引导用户有效操作，比如鼠标放在超链接上字体变颜色，有title提示，用户点击超链接，我们就可以称这次交互是成功的，因此交互设计的重点在于目标向导。 ---修改结束--- 这些分工十分细微，如果留言本是一个项目的话，需要从几个不同的角度来分析留言框，一个大型的项目比如社交网站、门户网站、行业网站这些职位都必须明确分工才能把整个项目做好，但是实际上即使条理清晰在项目开展过程中还会出现诸多意想不到的问题，什么问题呢？不在本文讨论范畴。回到话题，现在你还认为你理解意义上的前端是前端吗？我以前以为前端是美工，但是后来我发现很多前端博客都在研究一个技术JS的各大框架，我更加确定前端并不是我理解意义上的前端，我更喜欢视觉设计，但是我依旧也是一个前端，所以前端是模糊的，甚至包括了一切。 前端没什么不好 如果你觉得前端没有前（钱）途，那我劝你干别的行业吧，如果你确定你喜欢前端，那就听听我的一些看法，当然也纯属主观臆断，你可以拍砖。逛过一些前端博客，大部分文章都是在分享JS的几大框架技术，Jquery占很多数，那其他框架呢？所以我也有个疑问，前端难道就是JS吗？最后我的答案：是的，如果你想成为纯粹意义上的前端，JS很大部分上代表了前端。 程序员眼中的前端（后端程序员和前端工程师的不同） 真正意义上学习编程是在大学的时候，那时候我的一个师长，他现在是Java工程师，他给我的建议是HTML+CSS随便玩玩就好了，我不太认同他的观点还是玩了很久，我并没有停留在HTML上，而是了解了更多技术，HTML是很多技术人都不耻的语言，甚至在一些人看来HTML连编程语言都不是，这个我在大学招新时候很有感触，他们觉得HTML不值钱又是小儿科的东西，连PHP他们都觉得2个小时就能上手，那HTML他们不用看就懂了，甚至在一些无知的人看来网站开发不算真正意义上的程序，因此也就不是程序员了，因为他们的眼中只有C/C++，很多前人的建议也是学编程从C开始学起，我现在再来看这种回答，真好笑，无知的人在骗无知的人罢了。尤其再看看那些人在做着二级、三级试卷，我当时就想说哥们儿你醒醒吧，但是我还是忍住了，因为他跟我无关。所以不要以程序员的思维来看待前端，前端是快乐的，不是挑战各种技术。前端的出发点也是用户（体验等等），程序员是以电脑为核心（算法等等）。千万要记住前端是以用户为出发点的，而在很多公司面试前端工程师时，只考察了前端工程师的编程技巧。 如果你确定你想做一个优秀的前端，我的个人建议：首先，了解HTTP协议（HTTP 1.1），玩弄各大浏览器于鼓掌之中，你是前端工程师不要跟我说你只知道IE核心的浏览器。IE系列，Firefox，Chrome，Opera，Safari都应该是你平时常用的浏览器，我经常使用chrome，其中elements，Resources，Network，Script，....这些你了解多少？还是你从来都不知道？那赶紧去了解吧。 其次，非常熟悉HTML+CSS+JS。我把学习技术放到了第二位，因为你必须首先了解整个网络，你才会更快捷和全面的了解前端技术。 之前说过很多技术人都不耻学HTML，那我来解释为什么要先学HTML？ 先和大家一起梳理各类编程语言，大致分为了六大类：网页语言、解析型语言、混合型语言、编译型语言、汇编语言和机器语言，依次越来越苦逼，无论从用户还是开发者角度看待，越深入越不能让人理解，用户体验越差，当然开发者也是用户，所以也就能理解为什么会有PHP、Python，Ruby之类的解释型语言了。 如果你只想学习好前端技术的话，只需要了解前两层的东西，也就是网页语言和解析型语言，网页语言HTML，解析型语言PHP，Python，Ruby至少要学会一种。如果你有更多的精力，你可以跳到更高层次，学习混合型语言C#或者Java，对于编译型语言C和C++如果你想做好前端工作，你可以不用懂得的。 为什么前端工程师需要了解这些编程语言呢？ 一个WEB项目需要三种人：项目经理、前端工程师和后端程序员，他们之间需要沟通，不懂得如何沟通？如何说服？懂得能让项目进展的更顺利一些。我们回到刚才的例子——留言本，过程可以参照PHP的CGI（请求和响应等等），如果你不懂或者还是很模糊的话，我认为你还不是一个合格的前端工程师，当然你可以说你更偏向于视觉设计、用户体验之类的了。我的这种说法并不绝对，甚至如果你觉得你需要鼓励才能进步？那不好意思了，我只知道这是残酷的招聘法则，你可以去看看各公司对招聘前端的要求。 最后HTML5很重要，就犹如空气，看似不存在，好似不重要，但是缺少了空气，人类就无法生存，所以HTML是根本。 再次，艺术品的欣赏能力。PS、切图等等这些只是工具，工具只要经常用就会的，但是欣赏能力，或者只能说是天生的了，但是也要多培养自己的艺术欣赏能力，或者说让自己时髦起来。学会欣赏学会鉴别，其他的不多说了。 最后，关注前端们都在做什么？国外的我不推荐，我觉得国外的天空没那么蔚蓝。腾讯、新浪、淘宝、网易、百度……很多公司都有前端体验中心，他们的前端博客你知道不？他们在干什么？这些你了解吗，去了解他们在干什么吧，慢慢你就能培养出你的前端嗅觉了。 学会思考，自己去辨别真伪，每个人都有自己的体验，本篇文章纯属一家之言，主观臆断的说法，你可以参考并自己去验证，这也是前端工程师需要学会的东西。</p> </div> <div></div> </body> </html> </td> </tr> </tbody> </table> <h2>第55课表单</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study55.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body> <div> 在用户注册，在线报名等场合时<br> 需要把用户的信息，填写并提交，这时要用到表单来收集用户的信息 </div> <form action="http://baidu.com" method="post"> <p> 用户名：<input type="text" name="username" value="lisi"> </p> <p> 密码：<input type="password" name="password"> </p> <p> 性别：男<input type="radio" name="gender" value="male" checked="checked"> 女<input type="radio" name="gender" value="female"> </p> <p> 爱好：篮球<input type="checkbox" name="hobby" value="basketball"> 足球<input type="checkbox" name="hobby" value="football"> 乒乓球<input type="checkbox" name="hobby" value="pingpang"> 游泳<input type="checkbox" name="hobby" value="swimming" checked="checked"> </p> <p> <select name="xueli"> <option value="university">大学</option> <option value="shighSchool" selected="selected">高中</option> <option value="jhighSchool">初中</option> </select> </p> <p> <textarea rows="" cols="" name="intro">nimanaoiabkjgslfdghfdlskjghsld</textarea> </p> <p> 上传头像：<input type="file" name="pic"> </p> <p> 隐藏域：<input type="hidden" name="IP" value="192.168.1.100"> </p> <p> <input type="submit" value="提交"> </p> </form> </body> </html> </td> </tr> </tbody> </table> <h2>第56课框架集</h2> Element (frameset) is obsolete. Its use isdiscouraged in HTML5 documents. <h2>第57课结课作业</h2> <table border="1"> <tbody> <tr> <td valign="top"> <!DOCTYPE html> <html> <head> <title>study57.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body> <pre> 作业提交：论坛 有疑问：论坛 结课实习作业--做一个仿照京东商城主页。 做出首页，栏目页，商品页 </pre> </body> </html> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1280679456360382464"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(css,html,web)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1899439542939742208.htm" title="Django框架的全面指南：从入门到高级" target="_blank">Django框架的全面指南：从入门到高级</a> 步入烟尘 <a class="tag" taget="_blank" href="/search/Python%E8%B6%85%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97%E5%85%A8%E5%86%8C/1.htm">Python超入门指南全册</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以</div> </li> <li><a href="/article/1899439290841100288.htm" title="Spring+SpringMVC项目中的容器初始化过程" target="_blank">Spring+SpringMVC项目中的容器初始化过程</a> m0_74824044 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>文章目录容器初始化过程初始化过程简单概括初始化过程初始化流程图Filter、Servlet等无法自动注入Bean容器初始化过程web.xml配置文件ssmdemocontextConfigLocation/WEB-INF/spring/spring-context.xml启动spring容器org.springframework.web.context.ContextLoaderListenero</div> </li> <li><a href="/article/1899438534327070720.htm" title="Web前端发展史" target="_blank">Web前端发展史</a> 王珍岩 <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1、静态页面阶段那是1990年的12月25日，恰是西方的圣诞节，TimBerners-Lee在他的NeXT电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。1993年4月Mosaic浏览器作为第一款正式的浏览器发布。1994年11月，鼎鼎大名的Navigator浏览器发布发布了，到年底W3C在Berners-Lee的主持下成立，标志着</div> </li> <li><a href="/article/1899437652256550912.htm" title="Canvas资源宝典：全面探索HTML5 Canvas技术" target="_blank">Canvas资源宝典：全面探索HTML5 Canvas技术</a> 支然苹 <div>Canvas资源宝典：全面探索HTML5Canvas技术awesome-canvasAcuratedlistofawesomeHTML5Canvaswithexamples,relatedarticlesandposts.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-canvas一、项目介绍项目概述awesome-canvas是由RaphaëlMor</div> </li> <li><a href="/article/1899437526028972032.htm" title="探索创新：CanvasParticles - 点燃你的网页动态效果" target="_blank">探索创新：CanvasParticles - 点燃你的网页动态效果</a> 柏赢安Simona <div>探索创新：CanvasParticles-点燃你的网页动态效果去发现同类优质开源项目:https://gitcode.com/是一个开源的JavaScript库，专注于在HTML5Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。项目简介CanvasParticles提供了一套简洁而强大的API，让你能够</div> </li> <li><a href="/article/1899437273754169344.htm" title="探索Coco-Web：一款强大的H5创作工具" target="_blank">探索Coco-Web：一款强大的H5创作工具</a> 岑晔含Dora <div>探索Coco-Web：一款强大的H5创作工具去发现同类优质开源项目:https://gitcode.com/是一个开源的、基于Web的H5（HTML5）创作平台，旨在让开发者和设计师能够轻松地创建互动式的内容和应用。通过其直观的界面和丰富的功能，无论你是编程高手还是初学者，都能够利用Coco-Web制作出富有吸引力的数字内容。技术分析Coco-Web基于现代Web技术构建，包括：React.js:</div> </li> <li><a href="/article/1899437021672304640.htm" title="探索CoreHTML5Canvas：创作动态Web图形的新工具" target="_blank">探索CoreHTML5Canvas：创作动态Web图形的新工具</a> 郁英忆 <div>探索CoreHTML5Canvas：创作动态Web图形的新工具去发现同类优质开源项目:https://gitcode.com/是一个强大的JavaScript库，专为开发者设计，旨在简化和增强在Web上创建交互式和动画图形的能力。这个项目利用HTML5Canvas元素，提供了一个简洁且高效的API，让开发人员可以轻松地构建出丰富的2D渲染效果。技术分析HTML5Canvas是HTML5的一个重要特</div> </li> <li><a href="/article/1899436894224183296.htm" title="websocket wss_使用wss和HTTPS / TLS保护WebSocket的安全" target="_blank">websocket wss_使用wss和HTTPS / TLS保护WebSocket的安全</a> dnc8371 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>websocketwss这个博客的第50条提示，是的！技术提示＃49说明了如何使用用户名/密码和Servlet安全机制保护WebSocket的安全。本技术提示将说明如何在WildFly上使用HTTPS/TLS保护WebSockets。让我们开始吧！创建一个新的密钥库：keytool-genkey-aliaswebsocket-keyalgRSA-keystorewebsocket.keystore</div> </li> <li><a href="/article/1899435759656562688.htm" title="实现openAI流式打印效果 (包含markdown代码高亮及复制功能)" target="_blank">实现openAI流式打印效果 (包含markdown代码高亮及复制功能)</a> Todo_MrWu <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>准备工作//插件npminstallmarkdown-ithighlight.js//引入文件importMarkdownItfrom'markdown-it'importhljsfrom'highlight.js'import'highlight.js/styles/atom-one-dark.css'初始化数据data(){return{vHtml:'',//最终填充展示的htmlstring</div> </li> <li><a href="/article/1899435759174217728.htm" title="使用Nginx进行反向代理HTTPS服务" target="_blank">使用Nginx进行反向代理HTTPS服务</a> TechABC <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>Nginx是一款高性能的Web服务器和反向代理服务器，它能够处理大量并发连接并提供快速的服务。在本文中，我们将学习如何使用Nginx来配置反向代理HTTPS服务。下面是一个详细的配置示例，以帮助您实现此目标。首先，您需要确保已经安装了Nginx。您可以通过以下命令来安装Nginx：sudoaptupdatesudoaptinstallnginx安装完成后，您可以编辑Nginx的配置文件。该文件通常</div> </li> <li><a href="/article/1899435379816198144.htm" title="前端框架的发展史" target="_blank">前端框架的发展史</a> Qpeterqiufengyi <a class="tag" taget="_blank" href="/search/%E4%B8%93%E6%9C%89%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A/1.htm">专有名词解释</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>1、htmlcss+div从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994</div> </li> <li><a href="/article/1899432228199395328.htm" title="在 UniApp 中实现stream流式输出 AI 聊天功能，AI输出内容用Markdown格式展示" target="_blank">在 UniApp 中实现stream流式输出 AI 聊天功能，AI输出内容用Markdown格式展示</a> Echo-潔 <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/stream/1.htm">stream</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E5%BC%8F%E8%BE%93%E5%87%BA/1.htm">流式输出</a> <div>在UniApp中实现流式AI聊天功能介绍在现代Web开发中，流式API响应能够显著提升用户体验，尤其是在与AI聊天接口进行交互时。本文将介绍如何在UniApp中使用FetchAPI实现一个流式响应的AI聊天功能，包括实时更新聊天内容和滚动到底部的功能。实现用Markdown格式展示AI输出的内容//用Markdown格式展示//使用showdown插件importshowdownfrom'show</div> </li> <li><a href="/article/1899430966187847680.htm" title="Flask框架中局部刷新页面" target="_blank">Flask框架中局部刷新页面</a> oliver.chau <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>在Flask中使用AJAX仅刷新leftMenue.html你的项目使用Flask，想要在添加网站后，仅刷新leftMenue.html而不刷新整个页面，可以使用AJAX（推荐）。✅1.在app.py里创建一个返回leftMenue.html的路由在Flask里，我们需要一个专门的API来返回最新的leftMenue.html。fromflaskimportFlask,render_templat</div> </li> <li><a href="/article/1899430966909267968.htm" title="Webpack 打包详细教程" target="_blank">Webpack 打包详细教程</a> oliver.chau <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>Webpack是一个现代JavaScript应用的静态模块打包工具，它可以处理JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是Webpack从基础到进阶的详细教程。1.Webpack基础概念Webpack的核心概念包括：Entry（入口）：Webpack开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非JavaScript资源（如CS</div> </li> <li><a href="/article/1899427309929164800.htm" title="我的投资组合网站：打造个性化的在线投资展示平台" target="_blank">我的投资组合网站：打造个性化的在线投资展示平台</a> Tranyn.X <div>本文还有配套的精品资源，点击获取简介：本文介绍如何创建和设计一个在线平台，用于展示个人或专业投资者的投资策略、历史表现和投资理念。网站的构建涉及网页布局、响应式设计、CSS样式控制、内容管理、数据分析、SEO优化、安全性、用户体验、个性化和社交媒体整合等多个方面，确保网站既具有吸引力又能够有效地传达投资者的专业形象和投资成就。1.投资组合网站构建与网页布局设计网站构建的初步规划在当今数字化时代，构</div> </li> <li><a href="/article/1899417981776097280.htm" title="C#实现高性能异步文件下载器（支持进度显示/断点续传）" target="_blank">C#实现高性能异步文件下载器（支持进度显示/断点续传）</a> WangMing_X <a class="tag" taget="_blank" href="/search/C%23%E5%AE%9E%E7%8E%B0%E5%90%84%E7%A7%8D%E5%8A%9F%E8%83%BD%E5%B7%A5%E5%85%B7%E9%9B%86/1.htm">C#实现各种功能工具集</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%AD%A5%E4%B8%8B%E8%BD%BD/1.htm">异步下载</a> <div>一、应用场景分析异步文件下载器用处很大，当我们需要实现以下功能时可以用的上：大文件下载（如4K视频/安装包）避免UI线程阻塞，保证界面流畅响应多任务并行下载支持同时下载多个文件，提升带宽利用率后台静默下载结合Windows服务实现应用自动更新断点续传系统网络中断后可恢复下载（扩展实现）二、技术实现方案核心组件选择方案优点缺点WebClient代码简洁无法精细控制下载过程HttpWebRequest</div> </li> <li><a href="/article/1899416342138777600.htm" title="如何在PHP中实现API版本管理：保持向后兼容性" target="_blank">如何在PHP中实现API版本管理：保持向后兼容性</a> 奥顺互联V <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>如何在PHP中实现API版本管理：保持向后兼容性在现代Web开发中，API（应用程序编程接口）是连接前端和后端的关键桥梁。随着业务需求的不断变化，API的版本管理变得尤为重要。良好的版本管理策略不仅能够确保新功能的顺利引入，还能保持向后兼容性，避免对现有客户端造成破坏性影响。本文将探讨如何在PHP中实现API版本管理，并保持向后兼容性。1.为什么需要API版本管理？API版本管理的主要目的是在不破</div> </li> <li><a href="/article/1899414954348441600.htm" title="AI应用基于DJL开发WEB应用对鞋分类进行预测和推理------AI" target="_blank">AI应用基于DJL开发WEB应用对鞋分类进行预测和推理------AI</a> 旧约Alatus <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Spring-Boot%E6%A1%86%E6%9E%B6/1.htm">Spring-Boot框架</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/stable/1.htm">stable</a><a class="tag" taget="_blank" href="/search/diffusion/1.htm">diffusion</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a> <div>packagecom.alatus.djl.app;importai.djl.MalformedModelException;importai.djl.translate.TranslateException;importcom.alatus.djl.service.InterferenceService;importcom.alatus.djl.service.TrainService;impo</div> </li> <li><a href="/article/1899412180600680448.htm" title="Web端测试时，接口返回200，页面有没显示，可能时什么原因？" target="_blank">Web端测试时，接口返回200，页面有没显示，可能时什么原因？</a> 海姐软件测试 <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>需从系统架构、前后端交互、测试方法三个维度展开分析，结合具体场景给出可落地的排查方案：一、核心原因分析（按优先级排序）前端渲染异常JS脚本执行错误（如语法错误导致页面渲染中断）DOM元素未正确加载（XHR异步请求未完成时触发渲染）CSS样式冲突（display:none/visibility:hidden导致元素不可见）数据解析错误接口返回字段缺失（如缺少关键展示字段id）数据格式不符合预期（如字</div> </li> <li><a href="/article/1899411172239667200.htm" title="【JavaScript 】垃圾回收机制进阶解析：提高性能的终极指南" target="_blank">【JavaScript 】垃圾回收机制进阶解析：提高性能的终极指南</a> 名之以父 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>“垃圾回收机制不仅是内存管理的基石，更是高效Web开发的保障。在JavaScript中，理解其工作原理至关重要。”在JavaScript中，垃圾回收（GarbageCollection，GC）是一个自动化的内存管理过程，能够有效防止内存泄漏虽然这看似是一个简单的机制，但背后却包含着丰富的理论与实现细节。理解这些原理，不仅能够帮助我们写出更高效的代码，还能避免一些性能问题和内存泄漏。本文将带你深入探</div> </li> <li><a href="/article/1899405119406010368.htm" title="JavaScript面试宝典" target="_blank">JavaScript面试宝典</a> 傻小胖 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.JS由哪三部分组成？JavaScript由以下三部分组成：ECMAScript（ES）：JavaScript的核心语法，如变量、作用域、数据类型、函数、对象等。DOM（文档对象模型）：用于操作HTML和XML文档的API，可以动态修改网页内容、结构和样式。BOM（浏览器对象模型）：用于操作浏览器窗口和页面，例如window、navigator、location、history、screen等对</div> </li> <li><a href="/article/1899404110487154688.htm" title="【算法】BFS(最短路径问题、拓扑排序)" target="_blank">【算法】BFS(最短路径问题、拓扑排序)</a> 秦jh_ <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>个人主页：秦jh_-CSDN博客系列专栏：https://blog.csdn.net/qinjh_/category_12862161.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12862161&sharerefer=PC&sharesource=qinjh_&sharefrom=from_link目录边权为1的最短路径问题多源</div> </li> <li><a href="/article/1899403353994096640.htm" title="Spring WebFlux：响应式编程" target="_blank">Spring WebFlux：响应式编程</a> m0_74825223 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>在软件开发领域，随着互联网应用的规模和复杂性不断增加，传统的编程模型逐渐暴露出一些局限性，尤其是在面对高并发、大规模数据流处理等场景时。为了应对这些挑战，响应式编程（ReactiveProgramming）应运而生，它提供了一种更为高效、灵活的编程范式，以适应不断变化的系统需求。1.SpringWebFlux简介WebFlux提供了一个非阻塞、异步的Web框架，允许开发者构建高性能、可伸缩的Web</div> </li> <li><a href="/article/1899400197226688512.htm" title="我与DeepSeek读《大型网站技术架构》（3）" target="_blank">我与DeepSeek读《大型网站技术架构》（3）</a> 诺亚凹凸曼 <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>大型网站架构的核心要素《大型网站技术架构：核心原理与案例分析》第三章聚焦于大型网站架构的核心要素，从技术维度剖析了构建高可用、高性能、可扩展系统的关键设计方向。1.五大核心架构要素(1)性能（Performance）目标：快速响应用户请求，优化用户体验。关键策略：前端优化：CDN加速静态资源、合并压缩JS/CSS、浏览器缓存。服务端优化：缓存（Redis/Memcached）、异步处理（消息队列）</div> </li> <li><a href="/article/1899399566386589696.htm" title="WordPress建站给外贸人带来的负担" target="_blank">WordPress建站给外贸人带来的负担</a> 小机出海 <a class="tag" taget="_blank" href="/search/%E5%BB%BA%E7%AB%99%E5%B8%B8%E8%B0%88/1.htm">建站常谈</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a> <div>WordPress是全球最大的开源建站平台，有着丰富的主题与插件，尽管功能非常强大，但也给想要建站的外贸人带来了一些负担。一、技术门槛与学习成本1、由于WordPress发展了几十年，里面的功能应有尽有，但往往这些复杂的功能导致建站新手对它的学习成本变得很高，需要理解各个模块与功能点，增加了上手的复杂度。2、WordPress的建站服务商他不会告诉你，你可能需要知道一些代码知识（HTML、CSS、</div> </li> <li><a href="/article/1899398809839005696.htm" title="Shodan的概述与安装" target="_blank">Shodan的概述与安装</a> 耶耶Norsea <a class="tag" taget="_blank" href="/search/Shodan/1.htm">Shodan</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、Shodan简述Shodan是一个独特的网络搜索引擎，它专门针对互联网上的设备进行不间断扫描，并将扫描结果存储起来，供用户检索。这使得Shodan能够快速搜索到网络中的各种设备和服务，例如Web服务器、路由器、摄像头、物联网设备等，甚至包括某些已知漏洞的暴露设备。Shodan的主要用途：设备搜索：通过Shodan，你可以搜索到全球范围内连接到互联网的各种设备，如企业服务器、摄像头、智能家居设备</div> </li> <li><a href="/article/1899398305947906048.htm" title="【Servlet】深入解析 Servlet 启动过程 —— 原理分析、代码实战及在 JDK 和 Spring 中的应用" target="_blank">【Servlet】深入解析 Servlet 启动过程 —— 原理分析、代码实战及在 JDK 和 Spring 中的应用</a> 工一木子 <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90/1.htm">原理分析</a><a class="tag" taget="_blank" href="/search/Servlet/1.htm">Servlet</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>深入解析Servlet启动过程——原理分析、代码实战及在JDK和Spring中的应用在JavaWeb开发中，Servlet是一种用于创建动态Web应用程序的核心技术。作为JavaEE（现在是JakartaEE）的基础，Servlet在处理客户端请求、生成响应等方面发挥着重要作用。理解Servlet的启动过程，不仅能帮助我们调试和优化应用，还能为深入掌握JavaWeb开发的核心原理打下坚实基础。本文</div> </li> <li><a href="/article/1899397170772111360.htm" title="JavaScript模块化开发的演进历程" target="_blank">JavaScript模块化开发的演进历程</a> IronKee <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>写在前面的话js模块化历程记录了js模块化思想的诞生与变迁历史不是过去，历史正在上演，一切终究都会成为历史拥抱变化，面向未来延伸阅读-JavaScript诞生（这也解释了JS为何一开始没有模块化）JavaScript因为互联网而生，紧随着浏览器的出现而问世1990年底，欧洲核能研究组织（CERN）科学家Tim，发明了万维网（WorldWideWeb），最早的网页只能在操作系统的终端里浏览，非常不方</div> </li> <li><a href="/article/1899388724085583872.htm" title="Python从0到100（七十六）：计算机视觉-直方图和自适应直方图均衡化" target="_blank">Python从0到100（七十六）：计算机视觉-直方图和自适应直方图均衡化</a> 是Dream呀 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言：零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识，成为学习学习和学业的先行者！欢迎大家订阅专栏：零基础学Python：Python从0到100最新</div> </li> <li><a href="/article/1899386201182367744.htm" title="固定表头、首列 —— uniapp、vue 项目" target="_blank">固定表头、首列 —— uniapp、vue 项目</a> 菲力蒲LY <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>项目实地：也可以在【微信小程序】搜索体验：xny.handbook另一个体验项目：官网一、效果展示二、代码展示（1）html部分股票代码建议投金额实际投金额建议股数实际股数◎原单价涨出-单价↑跌出+单价↓+○预赚+●实赚-○预赔-●实赔操作{{item.stockCode}}{{item.calculAdvsIvsMoney}}{{item.calculRealIvsMoney}}{{item.t</div> </li> <li><a href="/article/82.htm" title="java类加载顺序" target="_blank">java类加载顺序</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.demo; /** * @Description 类加载顺序 * @author FuJianyong * 2015-2-6上午11:21:37 */ public class ClassLoaderSequence { String s1 = "成员属性"; static String s2 = "</div> </li> <li><a href="/article/209.htm" title="Hibernate与mybitas的比较" target="_blank">Hibernate与mybitas的比较</a> BlueSkator <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/orm/1.htm">orm</a> <div>第一章 Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 MyBatis 参考资料官网：http:</div> </li> <li><a href="/article/336.htm" title="php多维数组排序以及实际工作中的应用" target="_blank">php多维数组排序以及实际工作中的应用</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/usort/1.htm">usort</a><a class="tag" taget="_blank" href="/search/uasort/1.htm">uasort</a> <div>自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 <!doctype html> <html lang="en"> <head> <meta charset="utf-8&q</div> </li> <li><a href="/article/463.htm" title="DOM改变字体大小" target="_blank">DOM改变字体大小</a> 周华华 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q</div> </li> <li><a href="/article/590.htm" title="c3p0的配置" target="_blank">c3p0的配置</a> g21121 <a class="tag" taget="_blank" href="/search/c3p0/1.htm">c3p0</a> <div>c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。以在spring中配置dataSource为例：  <bean name="prope</div> </li> <li><a href="/article/717.htm" title="Java获取工程路径的几种方法" target="_blank">Java获取工程路径的几种方法</a> 510888780 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>第一种： File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); 结果: C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 获取当前类的所在工程路径; 如果不加“</div> </li> <li><a href="/article/844.htm" title="在类Unix系统下实现SSH免密码登录服务器" target="_blank">在类Unix系统下实现SSH免密码登录服务器</a> Harry642 <a class="tag" taget="_blank" href="/search/%E5%85%8D%E5%AF%86/1.htm">免密</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>1.客户机 (1)执行ssh-keygen -t rsa -C "xxxxx@xxxxx.com"生成公钥，xxx为自定义大email地址 (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址 (3)执行cat</div> </li> <li><a href="/article/971.htm" title="Java新手入门的30个基本概念一" target="_blank">Java新手入门的30个基本概念一</a> aijuans <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java+%E5%85%A5%E9%97%A8/1.htm">java 入门</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B/1.htm">新手</a> <div>在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合</div> </li> <li><a href="/article/1098.htm" title="Memcached for windows 简单介绍" target="_blank">Memcached for windows 简单介绍</a> antlove <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>1. 安装memcached server a. 下载memcached-1.2.6-win32-bin.zip b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo</div> </li> <li><a href="/article/1225.htm" title="数据库对象的视图和索引" target="_blank">数据库对象的视图和索引</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/oeacle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oeacle数据库</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E5%9B%BE/1.htm">视图</a> <div> 视图视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图为什么oracle需要视图; &</div> </li> <li><a href="/article/1352.htm" title="Mockito(一) --入门篇" target="_blank">Mockito(一) --入门篇</a> bijian1013 <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div> Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。 &nb</div> </li> <li><a href="/article/1479.htm" title="精通Oracle10编程SQL(5)SQL函数" target="_blank">精通Oracle10编程SQL(5)SQL函数</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* * SQL函数 */ --数字函数 --ABS(n):返回数字n的绝对值 declare v_abs number(6,2); begin v_abs:=abs(&no); dbms_output.put_line('绝对值：'||v_abs); end; --ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度</div> </li> <li><a href="/article/1606.htm" title="【Log4j一】Log4j总体介绍" target="_blank">【Log4j一】Log4j总体介绍</a> bit1129 <a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div>Log4j组件：Logger、Appender、Layout Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能：日志的输出目标日志的输出格式日志的输出级别(是否抑制日志的输出) logger继承特性 A logger is said to be an ancestor of anothe</div> </li> <li><a href="/article/1733.htm" title="Java IO笔记" target="_blank">Java IO笔记</a> 白糖_ <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public static void main(String[] args) throws IOException { //输入流 InputStream in = Test.class.getResourceAsStream("/test"); InputStreamReader isr = new InputStreamReader(in); Bu</div> </li> <li><a href="/article/1860.htm" title="Docker 监控" target="_blank">Docker 监控</a> ronin47 <a class="tag" taget="_blank" href="/search/docker%E7%9B%91%E6%8E%A7/1.htm">docker监控</a> <div> 目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容监控宿主机本身监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。额外的，因为是docker的</div> </li> <li><a href="/article/1987.htm" title="java-顺时针打印图形" target="_blank">java-顺时针打印图形</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一个画图程序要求打印出： 1.int i=5; 2.1 2 3 4 5 3.16 17 18 19 6 4.15 24 25 20 7 5.14 23 22 21 8 6.13 12 11 10 9 7. 8.int i=6 9.1 2 3 4 5 6 10.20 21 22 23 24 7 11.19</div> </li> <li><a href="/article/2114.htm" title="关于iReport汉化版强制使用英文的配置方法" target="_blank">关于iReport汉化版强制使用英文的配置方法</a> Kai_Ge <a class="tag" taget="_blank" href="/search/iReport%E6%B1%89%E5%8C%96/1.htm">iReport汉化</a><a class="tag" taget="_blank" href="/search/%E8%8B%B1%E6%96%87%E7%89%88/1.htm">英文版</a> <div>对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下：在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。 # ${HOME} will be replaced by user home directory accordin</div> </li> <li><a href="/article/2241.htm" title="[并行计算]论宇宙的可计算性" target="_blank">[并行计算]论宇宙的可计算性</a> comsci <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E8%A1%8C%E8%AE%A1%E7%AE%97/1.htm">并行计算</a> <div> 现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识...... 那么,这种概念让我们推论出一个结论 &nb</div> </li> <li><a href="/article/2368.htm" title="用OpenGL实现无限循环的coverflow" target="_blank">用OpenGL实现无限循环的coverflow</a> dai_lm <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/coverflow/1.htm">coverflow</a> <div>网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能源码地址： https://github.com/jackfengji/glcoverflow public class CoverFlowOpenGL extends GLSurfaceView implements GLSurfaceV</div> </li> <li><a href="/article/2495.htm" title="JAVA数据计算的几个解决方案1" target="_blank">JAVA数据计算的几个解决方案1</a> datamachine <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a> <div>老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 -----------------------------华丽的分割线------------------------------------- 数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J &nbs</div> </li> <li><a href="/article/2622.htm" title="简单的用户授权系统,利用给user表添加一个字段标识管理员的方式" target="_blank">简单的用户授权系统,利用给user表添加一个字段标识管理员的方式</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>怎么创建一个简单的(非 RBAC)用户授权系统通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。数据库首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限扩展 CWebUser 类在配置文件(一般为 protecte</div> </li> <li><a href="/article/2749.htm" title="未选之路" target="_blank">未选之路</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E8%AF%97/1.htm">诗</a> <div>作者:罗伯特*费罗斯特黄色的树林里分出两条路, 可惜我不能同时去涉足, 我在那路口久久伫立, 我向着一条路极目望去, 直到它消失在丛林深处. 但我却选了另外一条路, 它荒草萋萋,十分幽寂; 显得更诱人,更美丽, 虽然在这两条小路上, 都很少留下旅人的足迹. 那天清晨落叶满地, 两条路都未见脚印痕迹. 呵,留下一条路等改日再</div> </li> <li><a href="/article/2876.htm" title="Java处理15位身份证变18位" target="_blank">Java处理15位身份证变18位</a> 蕃薯耀 <a class="tag" taget="_blank" href="/search/18%E4%BD%8D%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%9815%E4%BD%8D/1.htm">18位身份证变15位</a><a class="tag" taget="_blank" href="/search/15%E4%BD%8D%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%9818%E4%BD%8D/1.htm">15位身份证变18位</a><a class="tag" taget="_blank" href="/search/%E8%BA%AB%E4%BB%BD%E8%AF%81%E8%BD%AC%E6%8D%A2/1.htm">身份证转换</a> <div> 15位身份证变18位，18位身份证变15位 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201</div> </li> <li><a href="/article/3003.htm" title="SpringMVC4零配置--应用上下文配置【AppConfig】" target="_blank">SpringMVC4零配置--应用上下文配置【AppConfig】</a> hanqunfeng <a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a> <div>从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。 Xml配置和Java类配置对比如下： applicationContext-AppConfig.xml  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

HTML, CSS学习笔记（完整版）

第一章 div布局

前几课内容

第二章 盒模型

第12课 首页布局实战之margin设置

第13课 盒模型之border设置

第14课 用css控制border画三角形

第15课 padding详解

第16课 padding与背景

第17课 padding美化首页

第18课 盒子模型的总结

第19课 利用margin实现水平居中

第20课 margin重叠现象

第21课 inline内联（行内元素）

第22课 内联与块状的转化

第三章 CSS

第23课 CSS控制段落文本

第24课 文字控制

第25课 字体控制精讲

第26课 背景图片

第27课 大图片背景

第28课 CSS选择器

第29课 CSS优先级

第30课 CSS引入方式

第31课 CSS初始化

第四章 HTML语义标签

第32课HTML学习思维导图

第33课 h标签与p标签

第34课 img标签

第35课 图片是内联还是块状

第二章盒模型

第12课首页布局实战之margin设置

第13课盒模型之border设置

第14课用css控制border画三角形

第18课盒子模型的总结

第19课利用margin实现水平居中

第22课内联与块状的转化

第24课文字控制

第25课字体控制精讲

第26课背景图片

第27课大图片背景

第35课图片是内联还是块状