17-18日作业
2017-01-21 本文已影响0人
IT颖儿
1.什么是css语法？
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
2.列举常见的css选择器？
(1)标签选择器：直接将HTML标签作为选择器
(2)id选择器
(3)类(class)选择器【注意：加样式时用.】
(4)包含选择器
(5)群组选择器: ,
(6)通配符:*{}
3.background属性如何简写？
.class{background: }
:后可包括background-color;background-image;background-repeat;background-position;background-attachment等
4.文本的属性有哪些？请写出font的复合式写法？
属性：
font-size 文字大小 ； font-weight 文字是否加粗(bold 加粗；normal 正常) ； font-style 文字是否倾斜(italic 倾斜； normal 正常) ； line-height 行高 ； font-family 字体
复合写法：
font:font-weight font-style font-size/line-height font-family
(其中font-size font-family 必写)
5.text-indent有什么作用？
首行缩进(1em=1个字符大小)
6.超链接a标签的作用有哪些？
herf="页面地址"----------跳转页面；
herf="压缩包"-----------下载；
herf="id"=-----------锚点(跳到id所在的位置)
7.a标签默然样式是什么？
a:link、a:visited、a:hover、a:active。
8.什么是盒模型？盒模型包括什么？
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性
9.padding和margin的区别？
marign:外边距（边框外，不显示元素背景）
padding:内填充（边框外，内容外，显示元素的背景）
10.什么是margin叠加？什么是margin传递？
margin叠加：相邻两元素的上下叠加在一起（谁大用谁）
margin传递：子元素的上下的margin会传递给父级
11.列举几种常见的语义化标签？
div——块级通用容器；span——短语内容无语义容器。
标题写法 <h1></h1>......
一个段落 <p></p>
强调（加粗） <strong></strong>
强调（倾斜） <em></em>
无序列表 <ul>
<li></li>
</ul>
有序列表 <ol>
<li></li>
</ol>
定义列表 <dl>
<dt></dt>
<dd></dd>
</dl>
时间 <time></time>
图片 
页面主要内容 <main></main>
包含像报纸一样的内容 <article></article>
具有相似主题的一组内容 <section></section>
指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等 <aside></aside>
页脚 <footer></footer>
12.常见的块元素和内嵌元素有哪些？简要说一下它们的区别？
内联元素（行内元素）内联元素(inline element)
* a - 锚点
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* em - 强调
* img - 图片
* input - 输入框
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
块元素(block element)
* address - 地址
* center - 举中对齐块
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* ol - 排序表单
* p - 段落
* table - 表格
* ul - 非排序列表
编程1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>17-18日作业</title>
<style>
#div1{
width:0px;height:0px;border:200px solid #ff0000;border-bottom-color:#fff;.
}
</style>
</head>
<body>
<div>
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
编程2：(求指导)
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>第二次作业</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.box{
width:557px;height:343px;border:1px solid #000 ;padding-left:22px;
color:#404646;font:14px/26px "宋体";
}
.box1{
width:511px;height:170px;border-bottom:1px dashed #000;
}
h3{
font-size:25px;
line-height:54px;
font-weight:bolder;
}
h4{
font-size:20px;
line-height:44px;
font-weight:bolder;
}
p{
text-indent:2em;
color:#9b9b9b;
}
.box2{margin-top:0px;}
li{
list-style:none;
font-size:18px;
line-height:38px;
font-weight:bolder;
background:url(text_3_03.png) no-reapeat ;/*背景图片为什么不好使呢？？*/
padding-left:17px;
}
a{
text-decoration：none;/*不起作用。。。*/
color:#404646;
}
</style>
<body>
<div class="box">
<div class="box1">
<h3>动态新闻</h3>
<h4>掌握一门技术的重要性</h4>
<p>掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖</p>
</div>
<ul class="box2">
<li><a href="#">走进民企观摩学习与民企面对面</a></li>
<li><a href="#">走进民企观摩学习与民企面对面</a></li>
<li><a href="#">走进民企观摩学习与民企面对面</a></li>
<li><a href="#">走进民企观摩学习与民企面对面</a></li>
</ul >
</div>
</body>
</html>
