<html>
<head>
<meta charset="UTF-8">
<title>知识点预考</title>
//外链样式
<link type="text/css" rel="stylesheet" href="css/index.css" />
<style>
//导入样式
@import url(css/daoru.css);
//内嵌样式
font-style: italic;
color: red;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}1
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*公共样式*/
h1,h2,h3,h4,h5,h6{
font-size: 36px;
margin: 30px 0;
}
dl{
margin-bottom: 30px;
}
p{
margin: 30px 0;
}
dl dt,dl dd,p{
font-size: 20px;
font-family: "微软雅黑","宋体";
line-height: 24px;
}
.center{
margin:0 20px;
}
/*第一章：css的引入方式*/
.wailian{
font-style: italic;
color: red;
}
/*第二章:选择器的练习*/
#div1{
width:206px;
height: 56px;
border: 2px dashed red;
text-align: center;
line-height: 56px;
margin: 20px 0;
}
.div2{
width:206px;
height: 56px;
border: 2px dashed red;
text-align: center;
line-height: 56px;
margin: 20px 0;
}
.div3 div{
width:206px;
height: 56px;
border: 2px dashed red;
text-align: center;
line-height: 56px;
margin: 20px 0;
}
.div4 div,.div4 p{
width:206px;
height: 56px;
border: 2px dashed red;
text-align: center;
line-height: 56px;
margin: 20px 0;
}
.nav{
width: 100%;
height: 60px;
border: 1px solid #FF0000;
background-color: #3366CC;
}
.nav li{
width:122px;
height:52px;
float:left;
text-align: center;
line-height: 52px;
margin: 4px 0 0 30px;
background-color: #3300FF;
}
.nav li a{
color: #FFF;
text-decoration: none;
}
input[type="text"]{
background-color: #FFFF00;
margin-bottom: 20px;
display: inherit;
}
/*第三章css基本样式学习*/
.show1{
font-family: "微软雅黑";
font-style:italic;
font-weight: 800;
font-size: 40px;
color: #FF0000;
}
.show2{
width: 200px;
height:200px;
border: 2px solid #FF0000;
text-align: center;
line-height: 200px;
font-size: 35px;
color: #FF0000;
background: url(../image/smile.png);
margin-bottom: 10px;
}
.show3{
width: 200px;
height:200px;
border: 2px solid #FF0000;
text-align: center;
line-height: 200px;
font-size: 35px;
color: #FF0000;
background: url(../image/smile.png) repeat-x center;
margin-bottom: 10px;
}
.show4{
width: 200px;
height:200px;
border: 2px solid #FF0000;
text-align: center;
line-height: 200px;
font-size: 35px;
color: #FF0000;
background: url(../image/smile.png) repeat-y center;
margin-bottom: 10px;
}
.ask li{
height: 40px;
line-height: 40px;
font-size: 20px;
}
/*第四章：内边距和外边距*/
.wai{
width: 200px;
height: 200px;
background-color: #FF0000;
}
.nei{
width: 100px;
height: 100px;
background-color:#00FF00;
margin: 30px;
float: left;
}
/*第五章：元素类型及定位、浮动*/
.position{
width: 400px;
height: 400px;
background-color: #FF0000;
position: relative;
}
.position1{
width:100px;
height:100px;
background-color: #00FF00;
position: absolute;
top:0;
left: 0;
}
.position2{
width:100px;
height:100px;
background-color: #00FF00;
position: absolute;
top:0;
right: 0;
}
.position3{
width:100px;
height:100px;
background-color: #00FF00;
position: absolute;
top:150px;
left: 150px;
}
.position4{
width:100px;
height:100px;
background-color: #00FF00;
position: absolute;
bottom:0;
left: 0;
}
.position5{
width:100px;
height:100px;
background-color: #00FF00;
position: absolute;
bottom:0;
right: 0;
}
.float{
width:500px;
height:400px;
border: 1px solid blue;
text-indent: 2em;
padding: 5px;
line-height: 24px;
}
.float img{
float: right;
}
.scroll{
width:200px;
height: 200px;
border: 2px solid #FF0000;
overflow: scroll;
text-indent: 2em;
margin: 5px;
line-height: 30px;
}
.cengdie{
width: 200px;
height: 200px;
position: relative;
}
.red{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
left: 0;
}
.yellow{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
top:10px;
left: 10px;
}
.blue{
width: 100px;
height: 100px;
background: blue;
position: absolute;
top:20px;
left: 20px;
}
</head>
<body>
<div class="center">
<!--第一章：css的引入方式-->
<div class="one">
<h1>第一章：css的引入方式</h1>
<dl>
<dt>1. 将下面的文字使用行内样式将表示为下列字体</dt>
//行内样式
</dl>
<dl>
<dt>2. 将下面的文字使用嵌入样式将表示为下列字体</dt>
<dd class="qianru">css样式的行inline样式练习</dd>
</dl>
<dl>
<dt>3. 将下面的文字使用外连接样式将表示为下列字体</dt>
<dd class="wailian">css样式的行inline样式练习</dd>
</dl>
<dl>
<dt>4. 将下面的文字使用导入样式将表示为下列字体</dt>
<dd class="daoru">css样式的行inline样式练习</dd>
</dl>
<hr />
</div>
<!--第二章:选择器的练习-->
<div class="two">
<h2>第二章:选择器的练习</h2>
<dl>
<dt>1.使用id选择器将下面设置下面的div的标签</dt>
<dd>
<div id="div1">我在div的里面</div>
</dd>
</dl>
<dl>
<dt>2.使用类别选择器将下面设置下面的div的标签</dt>
<dd>
<div class="div2">我在div的里面</div>
</dd>
</dl>
<dl>
<dt>3.使用标签选择器将下面设置下面的div的标签</dt>
<dd class="div3">
<div>我在div的里面</div>
</dd>
</dl>
<dl>
<dt>4.使用群组选择器将下面的div和p同时设置下面的样式</dt>
<dd class="div4">
<div>我在div的里面</div>
<p>我在p的里面</p>
</dd>
</dl>
<p>5.使用后代选择器将url中的所有的li横向排版</p>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">公司产品</a></li>
</ul>
<p>6.使用属性选择器将下面的3个控件中的文本框的背景颜色变成黄色</p>
<input type="text" />
<input type="text" />
<input type="button" value="我是按钮" />
<hr />
</div>
<!-- 第三章css基本样式学习-->
<div class="three">
<h2>css基本样式学习</h2>
<p>1.文字样式，请将下面的文字显示成微软雅黑、倾斜、加粗800、40像素的红色字体。</p>
<p class="show1">我来显示字体样式效果</p>
<p>2.使用所给的图片smile.png实现下面所展示的结果</p>
<div class="show2">快乐家园</div>
<div class="show3">快乐家园</div>
<div class="show4">快乐家园</div>
<p>3.使用文本属性，理解下面这些标签的使用环境</p>
<ul class="ask">
<li>text-indent:5em：实现文本缩进</li>
<li>答：文章段落首行缩进的时候使用</li>
<li>text-align:center：左右对齐方式</li>
<li>答：文本需要左右居中的时候使用</li>
<li>text-transform:capitalize：实现英文下的大小写转换</li>
<li>答：英文需要大小写的时候使用</li>
<li>text-decoration:underline：设置文本的上下划线</li>
<li>答：有需要文本上下划线修饰的时候使用</li>
<li>direction:rtl：设置文字的方向</li>
<li>答：文本需要改变文字的阅读方向的时候使用</li>
<li>line-height：这是行高</li>
<li>答：文本需要设置垂直居中或者设置行高的时候使用</li>
</ul>
<hr />
</div>
<!-- 第四章：内边距和外边距-->
<div class="four">
<h2>第四章：内边距和外边距</h2>
<p>1.问题：如果想让一个div在网页中所占的空间为100X100像素。那么给此div设置了margin为10像素，border为5像素，padding为5像素，那么应该怎么给div设置宽和高呢</p>
<p>答：宽=100-10*2-5*2-5*2=60，高=100-10*2-5*2-5*2=60</p>
<p>2.将两个div嵌套实现下图效果</p>
<div class="wai">
<div class="nei"></div>
</div>
<hr />
</div>
<!-- 第五章：元素类型及定位、浮动-->
<div class="five">
<h2>第五章：元素类型及定位、浮动</h2>
<p>1.问答题：列举你知道的块级元素和行内元素，并根据你的理解说说他们的区别</p>
<p>答：块级元素：div ul ol dl p。行内元素：span a b i lable。1、块级元素独占一行，行内元素可以在同一行。2、块级元素可以设置宽高，行内元素不可以设置宽高。3、块级元素可以包含行内元素，行内元素不可以包含块级元素</p>
<p>2.超链接a可以设置宽高吗？如果不能，有什么方式可以设置吗？</p>
<p>答：不可以，想设置宽高就必须转换成块级元素（display:block）</p>
<p>3.inline-block有什么特性</p>
<p>答：对象呈现为行内元素，但是对象的内容作为块级元素呈现。</p>
<p>4.使用定位实现下图</p>
<div class="position">
<div class="position1"></div>
<div class="position2"></div>
<div class="position3"></div>
<div class="position4"></div>
<div class="position5"></div>
</div>
<p>5.使用浮动实现下图</p>
<div class="float"><img src="image/girl.png" width="190" height="210">现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。</div>
<p>6.使用div写出下面的效果</p>
<div class="scroll">现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。现在的世界在能力方面是公平的，不是付出了多少就会有多少的收获。</div>
<p>7.使用div实现下面的效果</p>
<div class="cengdie">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
