【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS

最新推荐文章于 2023-07-04 20:08:50 发布
最新推荐文章于 2023-07-04 20:08:50 发布
阅读量836 收藏 4
点赞数 2
分类专栏： 【人机交互】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rong_Toa/article/details/86029791
版权

目录

开始

背景+颜色

将图片当做背景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>

 

rtoax
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS网页设计与布局从入门到精通 PDF
03-26
HTML+CSS网页设计与布局从入门到精通 PDF
使用HTML+CSS制作一个简单的网页
m0_57423785的博客
11-25 1万+
简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。
【HTML＋CSS网页设计与布局 从入门到精通】第3章
RToax
01-06 1501
目录 段落首行缩进 无序列表 段落右对齐 页面背景颜色 段落内个别字体加粗 字体字号设置 特殊字符 数学公式 显示一张图片 显示图片，并规定大小 父子div 父子+孙子div &lt;html&gt; &lt;head&gt; &lt;title&gt;段落与换行&lt;/title&gt; &lt;/head&gt; &lt;body&...
【web应用系统实践】第二章作业
ThinkStu的博客
06-21 5601
【web应用系统实践】第二章作业
以太网的8B/10B（来自网络，供参考）
love_maomao的专栏
03-05 5951
关于以太网如何工作的一些细节 历史： 早一点的不说了。 1969年美国国防部高级研究计划局（DARPA）建成的ARPAnet实验网，有4个结点，以电话线路为主干网络，两年后，建成15个节点，进入工作阶段，此后规模不断扩大，20世纪70年代后期，网络结点超过60个，主机100多台，地理范围跨越美洲大陆，连通了美国东部和西部的许多大学和研究机构，而且通过通信卫星与夏威夷和欧洲
HTML+CSS网页设计与布局从入门到精通
03-18
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》共分4个部分21章和两个附录，包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准，强调“表现”与“内容”的分离，抛弃了那些过时的HTML标记和属性，从更规范的角度全面、系统地介绍了网页设计制作方法与技巧。附录收录了网站发布与管理的知识和160个应用CSS时出现频度较高的英文单词及其中文解释。书中给出了大量详细的案例，并对案例进行分析，便于读者在理解的基础上，直接修改后使用。《HTML+CSS网页设计与布局从入门到精通》作者具备扎实的实践功底，行文细腻，对每一个技术细节以及每一个实际工作中可能遇到的难点和错误都进行了详细的说明，并给出了解决方案。 《HTML+CSS网页设计与布局从入门到精通》附带学习光盘，收录了12个小时HTML和CSS多媒体教学录像和网页制作技术多媒体教学录像，辅助读者学习，达到事半功倍的效果。光盘还附带书中所有实例的素材文件、源代码和最终效果文件，修改后可直接使用。
网页设计与制作（HTML+CSS）
T_personality的博客
12-12 2808
2.3 图像标记 1.图像的标记分为 2.相对路径和绝对路径 相对路径分为三种：图像文件和HTML文件在同一文件夹，只输入文件名字就可以。 图像文件在HTML文件下一级文件夹，输入文件夹名和文件名。 图像文件在HTML文件上一级文件夹，在文件名前面加入“…/”如果是上两级的话就要加“…/…/”。 3.1CSS核心基础 1.css的样式规则： 选择器样式：{属性1：属性1；属性2：属性2；…；} 2...
学习《HTML+css+div网页设计与布局从入门到精通》小计
10-10 1929
/*2013-10-10  炫动网页设计丛书，这本书涉及的很基础，通俗易懂。要做好网页还得多实践*/ 行内元素无法居中：使用line-height属性值和height属性值相等 块元素的对齐属性align,作用是对齐区域内的内容。 [white-space]控制元素是否进行换行。 [blockquote] 标签中的所有文本都会从常规文本中分离出来，在两边进行缩进。 添加图像两种方
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
HTML+css网页设计
2301_76192170的博客
07-04 4711
<a href="#">关于我们</a></li><li><a href="#">联系方式</a></li><li><a href="#">首页</a>版权所有 © 2023 我的网页我的网页
HTML＋CSS网页设计与布局 从入门到精通(源码)
10-25
HTML＋CSS网页设计与布局 从入门到精通(源码)，前沿科技 温谦编著 ，人民邮电出版社
html+css网页设计（静态网页）
06-20
期末网页设计 作业 大学生 网页设计作业成品下载dreamweaver/phpstudy网页设计制作大作业
HTML+CSS从入门到精通
01-25
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
《精通CSS+DIV网页样式与布局》光盘源码
02-08
　第12章　CSS+div美化与布局实战　 　12.1　框架搭建　 　12.2　实例一：蓝色经典　 　12.3　实例二：清明上河图　 　12.4　实例三：交河故城　 　12.5　自动选择CSS样式　 第3部分　CSS混合应用技术篇 　第13章　...
精通CSS+DIV网页样式与布局视频教材
12-25
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分　CSS基础知识篇 第1章　CSS的初步体验 1.1　CSS的概念 1.1.1　标记的概念 1.1.2　传统HTML的缺点 1.1.3　CSS的引入 1.1.4...
资源包 html5+css3+javascript 从入门到精通
最新发布
10-11
资源包 "HTML5 CSS3 JavaScript 从入门到精通" 是一个全面的学习资料，旨在帮助人们从零开始学习并掌握这些前端技术。 首先，资源包提供了详细的入门指南，介绍基本的HTML5、CSS3和JavaScript的概念和语法。这些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值