HTML&CSS实验(5)
2017-11-14 09:08
369 查看
【实验目的】
学习颜色、字体、文本格式化和盒模型的样式定义。【实验工具】
浏览器和编辑器。三种可选编辑方式：（1）本地调试：记事本
（2）在线调试：http://172.18.187.11:8080/lab/html5/
（3）也可以采用Visual Studio或Dreamweaver等具有网页编辑功能的软件打开页面（在教学网站的软件下载处可以下载）。
【实验内容】
1、HSL颜色实验。利用http://172.18.187.11:8080/lab/html5/colorHSL.html滑动hue得到颜色相似的圆形，然后调整saturation、lightness、alpha后，截取圆形并填上hsla值和RGB值：
说明hue的取值特点：hue是色调，取值范围为0~360，颜色依次为红橙黄绿青蓝紫，其中0-红色；50-橙色；100-黄色；150-绿（每51一级，0和360都表示红色）。
2、(circle.html)分别采用径向渐变、线性渐变、半透明双重阴影实现下面三个类似的圆形：
截屏浏览器(ctrl+alt+PrintScreen)：
样式表如下：
<style>
div {
border: solid 1px black;
width: 80px;
height: 80px;
float: left;
margin: 20px;
border-radius:40px;
}
#test1 {
background-image :radial-gradient(100px 80px at 20px 40px,white,blue 70%) ;
}
#test2 {
background-image :linear-gradient(to right,white 0%,blue 60%) ;
}
#test3 {
background-color: hsla(340,100%,50%,1);
box-shadow: 6px 8px 30px #837f7f, inset -6px -8px 50px #494040;
}
</style>3、通过设置样式实现类似下图的网页（paragraph.html）：
完成后保存网页（paragraph.html）并截屏：
样式表如下：
<style>
html {
font-size: 20px;
}
div{
padding:0 100px 0 100px;
margin: auto;
}
h1,h2 {
text-align :center;
}
p{
text-indent:3em;
}
</style>4、用white-space实现类似下图的页面（white-space.html）：
完成后保存网页（white-space.html）并截屏：
样式表如下：
<style>
h1,p{
text-align :center;
}
p{
white-space :pre;
}
</style>5、用盒模型实现类似下图的页面（box.html）：
完成后保存网页（box.html）并截屏：
样式表如下：
<style>
html {
font-size: 18px;
}
div{
border:solid black;
padding:20px;
margin:20px 50px 20px 50px;
}
h1{
text-align :center;
}
h1+p{
border :solid blue;
}
h1+p~p{
border:dashed red
}
p {
padding: 10px;
}
</style>6、通过设置样式类似下图的网页（font.html）。可以采用ms-word的字体（下拉字体项后可以看到字体的样子）对比选出类似的字体，没有相应字体，可用其它字体代替。获取颜色分量的方法：
方法1 、用QQ剪贴可以取到屏幕某一点的颜色。
方法2、用微软画图(mspaint)（要把图剪贴到窗口内）的拾取笔
完成后保存网页（font.html）并截屏：
样式表如下：
<style>
html {
font-size: 32px;
}
#test1 span:nth-of-type(1) {
font-size :120%;
color :red;
font-family:'Microsoft YaHei';
}
#test1 span:nth-of-type(2) {
font-size: 1.2em;
color: green;
font-family: KaiTi ;
}
#test1 span:nth-of-type(3) {
font-size: 1.2rem;
color: blue;
font-family: KaiTi;
}
#test1 span:nth-of-type(4) {
font-size: xx-large ;
color: gray;
font-family:'Microsoft Tai Le';
}
#test2 span:nth-of-type(1) {
color: green;
font-style : italic;
text-decoration :line-through;
}
#test2 span:nth-of-type(2) {
color: rebeccapurple ;
font-weight:bolder;
text-decoration:overline;
}
#test2 span:nth-of-type(3) {
color: brown ;
font-weight: 700;
text-decoration: underline ;
}
#test3 span:nth-of-type(1) {
color: green;
text-shadow :3px 3px 2px green;
}
#test3 span:nth-of-type(2) {
color: red;
font-size :2em;
text-shadow: -4px -4px 3px red,4px 4px 3px gray;
}
#test3 span:nth-of-type(3) {
color:brown;
letter-spacing :1.5em;
}
</style>7、为网页overflow.html的前6个p元素设置样式得到类似下图的网页：
完成后保存网页（overflow.html）并截屏：
增加的前6个p元素的styles属性值分别是：
<style>
html {font-size: 20px; }
p {text-indent: 3em;line-height: 1.4em;text-align: justify; margin: 1.2em;float: left; }
div {
margin: 20px auto;
width: 800px;
}
h1, h2 {text-align: center;}
p:nth-child(-n+6) {
display: inline-block;
width: 300px;
border: 2px solid blue;
}
p:nth-child(-n+4) { height: 160px;}
p:nth-child(-n+2) { height: 310px; }
p:nth-child(5) {height: 150px; }
p:nth-child(6) { height: 100px;}
p:nth-child(odd):not(:nth-child(7)) {float: left; }
p:nth-child(even) { float: right; }
div { margin: 20px auto;width: 760px;}
p:last-of-type {float: none;}
</style>8、把hide.html中的p元素(id=test)分别加上display:none、visibility:hidden后，用浏览器运行并分别保存网页（hide1.html，hide2.html）和截屏。
（hide1.html）截屏：
（hide2.html）截屏：
说明上面两个属性的区别：
display:none：元素不显示，完全不占用空间；
visibility:hidden：hidden的元素在文档流依然占据原来的空间。
9、设置p和div的样式得到类似下图的两个网页（参考网页：background.html; 图像:bk1.jpg，bk2.jpg）：
完成后保存网页（background1.html和background2.html）并截屏：
background1.html截屏如下：
Background2.html截屏如下：
样式（background1.html）：
<!DOCTYPE HTML>
<html>
<head>
<title>background</title>
<style>
html {font-size: 18px;}
div {margin: auto;
}
h1{text-align :center;
text-shadow:3px 3px 2px gray;
}
p{text-indent :2em; }
</style>
</head>
<body>
<div>
<h1>王国维</h1>
<p>
语言大师王力曾这样描述王国维：“留着辫子，戴着白色棉布瓜皮小帽，穿长袍，勒一条粗布腰带，一个典型的冬烘先生的模样。”
鲁迅先生亦曰：“要谈国学，王国维才算一个研究国学的人物。”同时他又恨铁不成钢地说：“老实得像火腿一样。”
</p>
<p id="test" style="background-image :url(images/bk1.jpg) ;padding:30px;border:dashed 5px blue;border-radius:20px;margin:20px;">
然而，就是这样的一位“冬烘先生”，却在短短的二十余年时间里，先后在哲学、史学、美学、文学、伦理学、文字学、考古学、心理学、词学
、曲学、红学、金石学等多个学科领域取得一流的成就，一举奠定了中国现代学术的基石，成为中国乃至东亚的顶级学术大师。王国维生来就是
做学问的料。他天性忧郁，羸弱多病，少时即沉湎书海。早年留学日本时，一天到晚都在看书、写东西，最要命的是随地吐痰。他的屋子里除了
书，什么也没有。一次，朋友要借便所一用，他大方地指着园子说：“请便。”</p>
<p>清朝灭亡后，全中国仅剩下两根著名辫子，一根在北大，一根在清华。北大的是辜鸿铭，清华的是王国维。清廷在的时候，王国维曾将辫子剪去，
但清廷亡后，王国维却将辫子留了起来，而且是永远地留着。一次，夫人替他梳辫子时问他：“都这时候了，你还留这东西做什么？”王国维
一本正经地作答：“正是到了这时候了，我还剪它做什么？”</p>
</div>
</body>
</html>样式（background2.html）：
<!DOCTYPE HTML>
<html>
<head>
<title>background</title>
<style>
html {font-size: 18px; }
div {margin: auto; }
h1 {
text-align: center;
text-shadow: 3px 3px 2px gray;
}
p { text-indent: 2em;}
</style>
</head>
<body>
<div>
<h1>王国维</h1>
<p>
语言大师王力曾这样描述王国维：“留着辫子，戴着白色棉布瓜皮小帽，穿长袍，勒一条粗布腰带，一个典型的冬烘先生的模样。”
鲁迅先生亦曰：“要谈国学，王国维才算一个研究国学的人物。”同时他又恨铁不成钢地说：“老实得像火腿一样。”
</p>
<p id="test" style="background-image :url(images/bk2.jpg);background-clip:content-box;padding:30px;
border:solid 0.5px blue;border-radius:20px;margin:20px;">
然而，就是这样的一位“冬烘先生”，却在短短的二十余年时间里，先后在哲学、史学、美学、文学、伦理学、文字学、考古学、心理学、词学
、曲学、红学、金石学等多个学科领域取得一流的成就，一举奠定了中国现代学术的基石，成为中国乃至东亚的顶级学术大师。王国维生来就是
做学问的料。他天性忧郁，羸弱多病，少时即沉湎书海。早年留学日本时，一天到晚都在看书、写东西，最要命的是随地吐痰。他的屋子里除了
书，什么也没有。一次，朋友要借便所一用，他大方地指着园子说：“请便。”
</p>
<p>
清朝灭亡后，全中国仅剩下两根著名辫子，一根在北大，一根在清华。北大的是辜鸿铭，清华的是王国维。清廷在的时候，王国维曾将辫子剪去，
但清廷亡后，王国维却将辫子留了起来，而且是永远地留着。一次，夫人替他梳辫子时问他：“都这时候了，你还留这东西做什么？”王国维
一本正经地作答：“正是到了这时候了，我还剪它做什么？”
</p>
</div>
</body>
</html>10、自己设计一个网页 (可以利用box-sizing.html进行修改)，通过设置样式观察box-sizing的两个取值(content-box， border-box)的不同。
运行截屏：
整个网页源码（box-sizing.html）：
<!DOCTYPE HTML>
<html>
<head>
<title>box-sizing</title>
<style>
html {font-size: 18px;}
div {margin: auto; }
h1 {text-align: center;text-shadow: 3px 3px 2px gray; }
p {text-indent: 2em; }
#test1 {
background-color :darkgray;
border:solid 1px #0026ff;
width:500px;
box-sizing :border-box ;
}
#test2 {
background-color: darkgray;
border: solid 1px #0026ff;
width: 500px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<h1>王国维</h1>
<p id="test1" >
语言大师王力曾这样描述王国维：“留着辫子，戴着白色棉布瓜皮小帽，穿长袍，勒一条粗布腰带，一个典型的冬烘先生的模样。”
鲁迅先生亦曰：“要谈国学，王国维才算一个研究国学的人物。”同时他又恨铁不成钢地说：“老实得像火腿一样。”
</p>
<p id="test2" >
然而，就是这样的一位“冬烘先生”，却在短短的二十余年时间里，先后在哲学、史学、美学、文学、伦理学、文字学、考古学、心理学、词学
、曲学、红学、金石学等多个学科领域取得一流的成就，一举奠定了中国现代学术的基石，成为中国乃至东亚的顶级学术大师。王国维生来就是
做学问的料。他天性忧郁，羸弱多病，少时即沉湎书海。早年留学日本时，一天到晚都在看书、写东西，最要命的是随地吐痰。他的屋子里除了
书，什么也没有。一次，朋友要借便所一用，他大方地指着园子说：“请便。”
</p>
<p>
清朝灭亡后，全中国仅剩下两根著名辫子，一根在北大，一根在清华。北大的是辜鸿铭，清华的是王国维。清廷在的时候，王国维曾将辫子剪去，
但清廷亡后，王国维却将辫子留了起来，而且是永远地留着。一次，夫人替他梳辫子时问他：“都这时候了，你还留这东西做什么？”王国维
一本正经地作答：“正是到了这时候了，我还剪它做什么？”
</p>
</div>
</body>
</html>说明不同点：设置为content-box时，盒模型的宽度会略宽于border-box；
11、(awe1.html，awe2.html)实现Twitter图标。
说明：
（a）awesome字体库( http://172.18.187.11:8080/lab/html5/fonts )可以通过外部css文件http://172.18.187.11:8080/lab/html5/css/font-awesome.css引入。
（b）需要的图标在http://fontawesome.io/icons/中查找（包含字体库地址）。
（c）例子参考：http://fontawesome.io/examples/
要求：
（1）显示6级苹果图标：
完成后保存为文件awe1.html并截图：
awe1.html的完整内容：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>Twitter Icons</title> <link rel="stylesheet" type="text/css" href="css/font-awesome.css" /> <style> </style> </head> <body> <i class="fa fa-apple fa-5x"></i> <i class="fa fa-apple fa-4x"></i> <i class="fa fa-apple fa-3x"></i> <i class="fa fa-apple fa-2x"></i> <i class="fa fa-apple fa-lg"></i> </body> </html>
问题：上面的图标如何可以任意调试大小？
可以通过给相应的类添加样式font-size进行大小变换，例如：px,rem.em,%等。具体操作为：在需要引用的类里面添加类名（比如上面的fa-5x），再重新给刚才定义的类中使用font-size进行普通的大小变换处理。例如： .fa-apple {font-size:2em;}
（2） 实现类似下面的设计（要求绿色块级元素在浏览器窗口变宽变窄时保持水平对中）：
实现后保存为文件awe2.html并截图：
awe2.html的完整内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Twitter Icons</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<style>
main {
border: 1px solid #504c4c;
border-radius: 5px;
box-shadow: 3px 3px 3px gray;
background-color: #76f5b2;
width: 200px;height: 60px;
margin: 50px auto;
padding: 15px;
}
.form-control {
border: 0.5px solid #7a6f6f;
border-radius: 5px;
box-shadow: 3px 3px 3px gray;
background-color: #76f5b2;
width: 160px;height: 25px;
}
.fa-key,.fa-user {color:blue;}
</style>
</head>
<body>
<main>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="用户名">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true" ></i></span>
<input class="form-control" type="password" placeholder="密码">
</div>
</main>
</body>
</html>【完成情况】
是否完成了这些步骤？(√完成 ×未做或未完成)1 [√ ] 2 [√ ] 3 [√ ] 4 [√] 5 [√] 6 [√] 7[√] 8[√] 9[√] 10[√] 11[√]
【实验体会】
（1）在进行HSL颜色实验，一开始我选择了用IE浏览器打开，但是打开后那个圆圈却不会动，且拖动滑动条颜色没有丝毫改变；当改成用360浏览器打开时，一切都变得正常了，说明同样的样式在不同的浏览器可能会有不同的效果。（2）为网页（font.html）设置样式时，有些字体无法找到，因此就用其他字体代替了，还有些字体，例如隶书，在IE浏览器中显示出来的依旧是默认字体。
（3）在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：box-sizing: content-box | border-box | inherit，取值说明如下：
（4）内联元素和块级元素都是html中的范畴，块元素和内联元素的主要差异是块元素是从新的一行开始。而内联元素一般显示在一行上。但是可以通过css的display属性将内联元素改变为块元素，（display：block） 也可以将块元素改变为内联元素（display：in-line）。
（5）aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的；aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见)，false表示元素可见。
（6）在awe2.html中，试了很多种方法都无法使图标变为蓝色，后来通过百度才知道，icon图表本身是一种文字，可以通过样式color来改变它的颜色。
（7）awe2.html在IE浏览器中无法正常显示，在360浏览器可以正常显示，依旧表明同样的样式在不同的浏览器可能会有不同的效果。其在IE中的效果如下所示：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML&CSS实验(1)
- HTML&CSS实验(4)
- HTML&CSS实验(6)
- HTML&CSS实验(8)
- 7.html&css实验7.学习一个通用的布局设计
- HTML&CSS实验(7)
- HTML&CSS实验(2)
- HTML&CSS实验(3)
- [html&css]Pass Through - 31.表单必填
- 【HTML&CSS】混合布局
- html&css实现阿里巴巴注册界面
- html & css
- Python之路_Day14_HTML&CSS
- HTML&CSS设计与构建网站(css)
- [Codecademy] HTML && CSS课程学习目录
- [Codecademy] HTML&CSS 第一课：HTML Basic
- JavaScript HTML DOM – 改变 CSS
- html&css----引言（10/31）
- HTML与CSS实验1
- <HTML & CSS设计与构建网站>书评