第二次作业
1.简答作业
1什么是CSS语法？
<div> style=" "></div>写在标签的style属性 行间样式表
井号id名{样式} 写在页面内部，专门的style标签间 内部样式表<link bref="index .css"rel="stylesheet"/>写在单独的css里面通过link引入当前页面 外部样式表
2列举常见的CSS选择器
*(通用符选择器)#(id选择器).(内选择器)(包含选择器)(群组选择器)(类型选择器)
3background属性如何简写？
{width： height： border： solid：}
4文本的属性有哪些？请写出font的复合式写法？
像素字体大小字体名称字体样式是否正常显示font-weight font-style font-size font-family
5text-indent有什么作用？
首行缩进
6超链接a标签的作用有哪些？
链接的话：可以直接跳转到被链接的另一个资源上 压缩包的话：直接下载 新窗口打开 当前窗口打开
7a标签默然样式是什么？
a{text-decoration:none;}
8什么是盒模型？盒模型包括什么？
把一个元素看成盒子的横切面 包括 border padding counter等
9padding和margin的区别？
padding为内填充 margin为外边距
10什么是margin叠加？什么是margin传递？
margin叠加相邻两个元素的上下margin叠加在一起。margin传递子元素的上下margin会传递给父级
11列举几种常见的语义化标签？
section板块部分 header页面头部或者板块头部 header页面底部或者section底部 nav导航 article用来在页面中表示一套结构完整的且独立的内容部分 aside元素标签可以包含与当前页面或主要内容相关的引用，侧边栏，广告，nav元素组及其他的类似的有别与主要内容的部分 h1-h6标题 p段落 ul 无序列表 ol有序列表 dl定义列表 li ul或ol的列表项 dt定义列表的项目 dd对dt扩展的描述扩展 time时间 img图片 em强调一个词或者一个段落 strong强调一个词或者一个段落
12常见的块元素和内嵌元素有哪些？简要说一下他们的区别？
块元素section header header nav article aside h1-h6 p ul ol dl dt dd 内嵌元素em strong a="herf"块元素：1独占一行2支持所有的样式3不设置宽度的时候宽度撑满整行 内嵌元素：1可以在一行显示2不支持宽高队上下的maegin和padding等样式支持也有问题3宽度内容由撑开4代码换行会被解析
2.编程作业
1利用border写一个图形效果
<!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>无标题文档</title>
<style>
.box{width:0px;
height:0px;
border:100px solid #f00;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Paste_Image.png
2写一个新闻小列表，要求用背景图自定义列表符号样式
<!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>无标题文档</title>
<style>
box{width: 511px; margin:22px auto;border:1px solid #000000;}
div1{width:511px;height:117;}
div3{padding-top :10px; padding-left:23px; line-height:51px; fout:24px "宋体";color:#404646}
div4{padding-top :61px;padding-left:23px;line-height:43px;fout:20px "宋体";color:#404646}
div5{padding-top :104px; ;padding-left:23px;line-height:26px;fout:14px "宋体";color:#9b9b9b; text-indent:2em;}
div2{padding: 29px 250px 5px 22px;line-height:37px;fout:18px "宋体";color:#404646;border-top: #000 1px dashed;}
</style>
</head>
<body>
<div id="box">
<div id="div1">
<div id=div3>动态新闻</div>
<div id=div4>掌握一门技术的重要性</div>
<div id=div5>掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖</div>
<div>
<div id="div2">走进民企观摩学习与民企面对面走进民企观摩学习与民企面对面走进民企观摩学习与民企面对面走进民企观摩学习与民企面对面</div>
</div>
</body>
</html>
[作业]
Paste_Image.png
\
[改过的作业]
<!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>无标题文档</title>
<style>{margin:0px;
padding:0px;}
#div1{width:557px;
height:343px;
border:1px solid #000;
padding-left:23px;
}
#div2{width:513px;
height:170px;
border-bottom:dashed #000;}
h3{font-size:25px #404646;line-height:52px;font-weight:bolder;}
h4{font-size:20px #404646;line-height:22px;font-weight:bolder;}
p{font-size:15px #9b9b9b;line-height:18px;text-indent:2em;}
#div3{width:513px;
height:160px;}
li{list-style:none;font-size:18px #404646;line-height:34px;font-weight:bolder;}
a{text-decoration:none;color:#404646;background: url(jmp5/1.jpg.gif) no-repeat left center;padding:17px;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<h3>动态新闻</h3>
<h4>掌握一门技术的重要性</h4>
<p>掌握一门技术是未来生存的一块敲门，砖掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖</p>
</div>
<ul id="div3">
<li><a href="###">走进民企观摩学习与民企面对</a></li>
<li><a href="###">走进民企观摩学习与民企面对</a></li>
<li><a href="###">走进民企观摩学习与民企面对</a></li>
<li><a href="###">走进民企观摩学习与民企面对</a></li>
</ul>
</div>
</body>
</html>
Paste_Image.png
网友评论