1.css选择器
- 类别选择器：p , span
- class选择器：.class
- id选择器：#id
- 包含选择器:ul li {}
- 选择符分组:h1,h2,h3{}
- 伪类选择器:a:link{} , a.selected:hover{}
- 全局选择器 * {}
2.伪类及伪元素
伪类的分类及作用
| 伪类 | 作用 |
| ------------- |:-------------:| -----:|
| :active| 将样式添加到被激活元素|
| :hover | 将鼠标悬浮在元素上时，向元素添加样式 |
| :focus | 将样式添加到被选中元素 |
|:link|将特殊的样式添加到未被访问过的链接|
|:visited|将特殊的样式添加到被访问过的链接|
|:first-child|将特殊的样式添加到元素的第一个子元素|
|:lang|让创作者来定义指定的元素中使用的语言|
伪元素的分类及作用
| 伪元素 | 作用 |
| ------------- |:-------------:| -----:|
| :before| 在某元素之前插入某些内容|
| :after | 在某元素之后插入某些内容 |
| :first-letter | 将样式添加到文本的首字母 |
|:first-line|将样式添加到文本的首行|
3.任务完成
如图所示：
css-task.png
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS练习</title></head><body><div id='paper'> <p> <h1>统一建模语言理论测试</h1></p> <div class='part'> <div class='part-1 tip'>考试科目：统一建模语言</div> <div class='part-1'>考试时间：100分钟</div> <div class='part-1'>得分：</div> </div> <div class='part two'> <div class="part-2 tip">班级（必填）：<input type='text'/></div> <div class="part-2">学号（必填）：<input type='text'/></div> <div class="part-2">姓名（必填）：<input type='text'/></div> </div> <div class="part two three"> <div class="bg"><p><strong>一、填空题（每空5分,共20分）</strong></p></div> <div style="margin-left: 20px"> 1.UML的中文全称是：<br/> <input type='text'/><br/> 2.对象最突出的特征是：<br/> <input type='text'/> <input type='text'/> <input type='text'/> </div> </div> <div class="part two four"> <div class="bg"><p><strong>二、选择题（每题10分,共20分）</strong></p></div> <div style="margin-left: 20px"> 1.UML与软件工程的关系是：<br/> <input type='radio'/>(A)UML就是软件工程<br/> <input type='radio'/>(B)UML参与到软件工程开发过程中几个阶段<br/> <input type='radio'/>(C)UML与软件工程无关<br/> <input type='radio'/>(D)UML是软件工程的一部分<br/> 2.Java语言支持：<br/> <input type='radio'/>(A)单继承<br/> <input type='radio'/>(B)多继承<br/> <input type='radio'/>(C)单继承和多继承都支持<br/> <input type='radio'>(D)单继承和多继承都不支持 </div> </div> <div class="part two four"> <div class="bg"><p><strong>三、多项选择题（每题10分,共20分）</strong></p></div> <div style="margin-left: 20px"> 1.用例的粒度分为以下哪三种：<br/> <input type='checkbox'/>(A)概述级<br/> <input type='checkbox'/>(B)需求级<br/> <input type='checkbox'/>(C)用户目标级<br/> <input type='checkbox'/>(D)子功能级<br/> 2.类图由以下哪三部分组成：<br/> <input type='checkbox'/>(A)名称（Name）<br/> <input type='checkbox'/>(B)属性(Attribute)<br/> <input type='checkbox'/>(C)操作(Operation)<br/> <input type='checkbox'>(D)方法(Function) </div> </div> <div class="part two five"> <div class="bg"><p><strong>四、判断题（每题10分,共20分）</strong></p></div> <div style="margin-left: 20px"> 1.用例图只是用于客户交流和沟通的，用于确定需求。 <input type='radio'/>对 <input type='radio'/>错<br/> 2.在状态图中，终止状态在状态图中允许有任意多个。 <input type='radio'/>对 <input type='radio'/>错 </div> </div> <div class="part two six"> <div class="bg"><p><strong>五、简答题（每题10分,共20分）</strong></p></div> <div style="margin-left: 20px"> 1.简述什么是模型以及模型的表现形式？<br/> <textarea style="width: 1000px; height: 80px;"></textarea> </div> </div> <input class="btn two " type='button' value='计算分数'/></div></div></body><style> #paper { text-align: center; } .tip { margin-left: 15px; } .part { width: 1100px; height: 35px; margin: 0px auto; padding-top: 10px; text-align: left; border: 1px solid lightgray; } .two { margin-top: 20px } .three { height: 160px; } .four { height: 300px; } .five { height: 110px; } .six { height: 160px; } .part-1 { display: inline; margin-right: 200px; } .bg { height: 40px; margin-top: -26px; background-color: lightgrey; } .part-2 { display: inline; margin-right: 80px; } .btn { color: white; border-radius: 9%; width: 75px; height: 35px; background-color: dodgerblue; text-align: center; }</style></html>
网友评论