【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS
2024-04-15 15:10:13
目录
开始
背景+颜色
将图片当做背景background-image:url(bg-h.gif);
x方向（横向）重复显示图片：
y方向（纵向）
不重复显示图片background-repeat:no-repeat;
规定位置显示图片background-position:200px 100px;
规定百分比位置显示图片background-position:30% 60%;
附着显示图片background-attachment:fixed;
中心显示图片background-position:center;
span display：none
span display：block
开始
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体}
p{font-family: Arial, "Times New Roman"}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>背景+颜色
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;background-color:blue;color:white;}
p{font-family: Arial, "Times New Roman"}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>将图片当做背景background-image:url(bg-h.gif);
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(bg.gif);
}
h1{font-family:黑体;background-image:url(bg-h.gif);color:black;}
p{font-family: Arial, "Times New Roman";background-color:white}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>x方向（横向）重复显示图片：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(bg-g.jpg);background-repeat:repeat-x;background-color:#D2D2D2
}
h1{font-family:黑体;color:white;}
p{font-family: Arial, "Times New Roman";}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>y方向（纵向）
background-repeat:repeat-y;不重复显示图片background-repeat:no-repeat;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:right bottom;}h1{font-family:黑体;color:black;}
p{font-family: Arial, "Times New Roman";}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>规定位置显示图片background-position:200px 100px;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:200px 100px;}h1{font-family:黑体;color:black;}
p{font-family: Arial, "Times New Roman";}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>规定百分比位置显示图片background-position:30% 60%;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:30% 60%;}h1{font-family:黑体;color:black;}
p{font-family: Arial, "Times New Roman";}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>附着显示图片background-attachment:fixed;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:30% 60%;background-attachment:fixed;}h1{font-family:黑体;color:black;}
p{font-family: Arial, "Times New Roman";}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>中心显示图片background-position:center;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(bg-g.jpg);background-repeat:repeat-x;background-color:#D2D2D2
}
h1{ height:40px;background-image:url(h1.jpg);background-repeat:no-repeat;background-position:center;
}p{font-family: Arial, "Times New Roman";}
-->
</style>
</head><body>
<h1><span>互联网发展的起源</span></h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>span display：none
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
body{background-image:url(bg-g.jpg);background-repeat:repeat-x;background-color:#D2D2D2
}
h1{ height:40px;background-image:url(h1.jpg);background-repeat:no-repeat;background-position:center;
}p{font-family: Arial, "Times New Roman";}span{display:none;
}-->
</style>
</head><body>
<h1><span>互联网发展的起源</span></h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>span display：block
<!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"><head>
<title>滑动门演示</title>
<style type="text/css">
h3{font-size:13px;line-height:21px;text-align:center;background-image:url(bg-slide.gif);background-repeat:no-repeat;padding-left:40px;color:white;
}span{display:block;padding-right:40px;background-image:url(bg-slide.gif);background-repeat:no-repeat;background-position:right;
}.wide{width:300px; /*修改这个数值，即可改变宽度，可以保持两端的花纹*/
}.narrow{width:200px; /*修改这个数值，即可改变宽度，可以保持两端的花纹*/
}</style>
</head><body><h3 class="wide"><span>h3标题文字（宽）</span></h3><h3 class="narrow"><span>h3标题文字（窄）</span></h3><p>说明：只需要修改h3标记CSS中的width属性即可，只要宽度不超过背景图像的总宽度即可。</p></body></html>
【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS相关推荐
- 【HTML＋CSS网页设计与布局 从入门到精通】第4章
目录 超链接 h1,h2,h3... 图片超链接 邮件超链接 图像热区超链接 图像热区超链接-自己作图 图像热区超链接-多热区 插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第7章-class、ID选择器，CSS格式
目录 class选择器 class选择器-例外 class选择器-同时使用两种class ID选择器不支持两种同时使用 正文字体格式 正文字体格式-另一种"宏"的使用方式 使用CS ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
目录 块元素背景,边框,颜色等布局 块元素ID选择器 另一个例子 块元素中的图片 盒子模型的演示 块级元素中的文本格式 块级元素div与内联元素span的对比 两个行内元素的margin 两个块级元素 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第10章-CSS
目录 开始 新增设置 英文字母全部小写 字号设置 首字母"大"写-大一点显示 上划线,下划线text-decoration:underline overline; 缩进text-i ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第9章-选择器
目录 标记选择器+类别选择器 并集选择器+集体声明 后代(嵌套)选择器 继承关系演示 前沿Web开发教室 继承关系演示-选择器1 继承关系演示-选择器2 还可以写成这样批量的整 或者 再或者 or 层 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录 初始表格 边距.居中.边框 单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第11章-CSS
目录 图像class选择器 设置图片每个边框的格式:颜色,线型 另一个例子 图文混排 图片左对齐,居中,右对齐 竖直对齐 竖直对齐:具体数值-负数 八大行星:图文混排 图像class选择器 <h ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第8章-CSS
目录 无格式 图文并茂 标题h1格式 图片img格式 正文p格式 body格式 ID选择器的优先级低于标记选择器 无格式 <html> <head> <title> ...
最新文章
- android binder机制之——（创建binder服务）
- Flex 序列化自定义类 解决 sharedObject 保存自定义对象
- ASP.NET 文件上传于下载
- MRI图像右心室分割
- PHP使用http_build_query()构造URL字符串的方法(可将POST参数组转换拼接成GET请求链接)...
- SpringCloud工作笔记074---Idea2018 1.6发现不支持@Slf4j，@Getter ,@Setter注解
- 模拟PspTerminateProcess结束进程-学习笔记
- CAD卸载重新安装方法，使用清理卸载工具完全彻底删除干净CAD各种残留注册表和文件。
- Matlab绘制折线图详细方法
- Java之XML转Json
- 互动拍照 — AR拍照
- Python学习历程-1-20180630
- 超级产品：“用户需求”之“了解用户需求”
- MVC搭建webAPI服务
- 曝大S汪小菲婚宴初定汪小菲三亚顶级酒店
- Java字符串反转常用的2种方式
- 批处理文件中的 %~d0
- 设计数据密集型应用(一)，DDIA
- web前端期末大作业 html+css家乡旅游主题网页设计---湖南 登录或注册表单
- 根据银行卡获取发卡行信息