WEB课堂作业练习 2
1.添加样式：
行内样式
在这里插入代码片<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 设置行内样式，使段落的字体红色，18号，首行缩进2字符 -->
<p style="color:red; font-size:18px; text-indent:2em;">天使投资
天使投资指早期投资，尤其指个人早期投资。
</p>
</body>
</html>
内嵌
在这里插入代码片<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- 设置内嵌样式，使段落的字体红色，18号，首行缩进2字符 -->
<style>
p {
color: red;
font-size: 18px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>
效果图
2.选择器
1.标签选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 标签body的样式：背景颜色#ccc；文本对齐方式居中；字体大小12px -->
<!-- 标签p的样式：字体黑体；字号16px；字体颜色红色 -->
<!-- 标签h1样式：字体黑体；字号20px -->
<!-- 标签hr样式：背景颜色red；宽度200px；高度1px；边框0px -->
<style>
body{
background-color:#ccc ;
text-align: center;
font-size: 12px;
}
p{
font-family: 黑体;
font-size: 16px;
color: red;
}
h1{
font-family: 黑体;
font-size: 20px;
}
hr{
background-color: red;
font-weight: 200px;
height:1px;
margin:0px;
}
</style>
</head>
<body>
<h1>标题</h1>
<hr />
<p>正文的段落</p>
版权所有
</body>
</html>
2.类别class选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{font-size:12px;
}
/*类样式one字体大小18px；类样式two字体大小24px*/
.one{
font-size: 18px;
}
.two{
font-size: 24px;
}
</style>
标签
</head>
<body>
<!-- 第一、二段落应用样式one；第三、四段落应用样式two -->
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p>
</body>
</html>
3.ID选择器
<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ����IDѡ������ʹҳ��IDΪone�������СΪ24px��IDΪtwo�������СΪ18 -->
<style>
#one{
font-size: 24px;
}
#two{
font-size: 18px;
}
</style>
</head>
<body>
<p id="one">����1</p>
<p id="two">����2</p>
</body>
</html>
```这里未转化utf-8文本识别，知识点是id应用
4.多个择器的集体声明
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- 利用群组选择器声明h1、p标签的文本对齐方式居中对齐 -->
<style>
h1,p{
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>
</html>
5.选择器的嵌套声明
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 定义样式，使得p标签下的span字体大小为24像素，颜色为红色
定义样式，使得div标签下的span字体大小为18像素，颜色为蓝色 -->
<style>
p span{
font-size: 24px;
color: red ;
}
div span{
font-size: 18px;
color:blue;
}
</style>
</head>
<body>
<p><span>天使投资</span>是投资方式的一种</p>
<div><span>天使投资</span>是投资方式的一种</div>
<ul>
<ol>
天使投资<span>天使投资</span>
</ol>
<ol>
天使投资<span>天使投资</span>
</ol>
</ul>
</body>
</html>
6.全局选择器的声明
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- 设置全局选择器，文本对齐方式为居中对齐 -->
<style>
*{
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
<h2>欢迎访问论坛</h2>
</body>
</html>
7 class id选择器混用
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- one样式定义字体大小18像素；two样式定义字体大小24像素 -->
<!-- red样式定义字体颜色红色；yellow样式定义字体颜色黄色 -->
<!-- right样式定义文本对齐方式右对齐；left样式定义文本对齐方式左对齐-->
<!-- my样式定义背景颜色为#ccc -->
<style>
.one{
font-size: 18px;
}
.two{
font-size: 24px;
}
.red{
color: red;
}
.yellow{
color:yellow ;
}
.right{
text-align: right;
}
.left{
text-align: left;
}
#my{
background-color: #ccc;
}
</style>
</head>
<body>
<!-- 多个class选择器混用，用空格分开 -->
<p class="one red right">这里的文字，18px，红色，右对齐</p>
<!-- 设置div的样式 -->
<div class="two yellow left">这里的文字，24px黄色，左对齐</div>
<!-- id和class混用 -->
<!-- 设置div的样式 -->
<div class="one yellow left" id="my">这里的文字，18px黄色，左对齐，有背景色</div>
</body>
</html>
4.背景与超链接
超链接
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#othernews {
text-align:left;
font-size:14px;
line-height:1.5em;
}
a{
text-decoration: none;
}
a:link {
color:#09f;
/*设置样式，其中字体颜色：#09f（浅蓝）*/
}
a:visited {
/*设置样式，其中字体颜色：#930（红）*/
color:#930;
}
a:active {
/*设置样式，其中字体颜色黄色*/
color:yellow;
}
a:hover {
/*设置样式，其中字体颜色：#03c（深蓝）*/
color:#03c;
}
</style>
</head>
<body>
<div id = "othernews">
相关阅读:
<p><a href="https://www.baidu.com/" >迪拜华商财富缩水 瞻望前景信心犹豫</a></p>
<p><a href="https://www.baidu.com/" >全球华商总资产恢复增至3.9万亿美元</a></p>
<p><a href="https://www.baidu.com/" >华商基金胡宇权：行业不平衡将带来投资机会</a>
</div>
</body>
</html>
背景1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻页面</title>
<style type="text/css">
.newstitle1 {
/*设置高度60px，宽度400px，背景图像（沿x轴重复），边框*/
height: 60px;
width: 400px;
background-image:url(images/bg1.gif);
background-repeat: repeat-x;
background-color: aliceblue;
border: 1px solid white;
border-top-color: black;
}
h1{
font: bold 16px "幼圆";
text-align: center;
line-height: 30px;/*垂直居中对齐*/
}
</style>
</head>
<body>
<div class="newstitle1"><!----在div中分别使用样式newstitle---->
<h1>金融危机下欧洲华商陷窘境 变思维逆境突破</h1>
</div>
</body>
</html>
背景2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.one {
width: 226px;
height: 209px;
float: left;
margin-left: 10px;
background-image: url("images/1.png");
}
.two {
width: 226px;
height: 209px;
float: left;
margin-left: 10px;
background-image: url("images/2.png");
}
.three {
width: 226px;
height: 209px;
float: left;
margin-left: 10px;
background-image: url("images/3.png");
}
.four {
width: 226px;
height: 209px;
float: left;
margin-left: 10px;
background-image: url("images/4.png");
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
背景3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
width:33px;
background-image: url("images/map.png");
background-position: -55px -10px;
background-repeat:no-repeat;
color:yellow;
height:14px;
padding-left:20px;
line-height:18px;
}
a:hover {
background-position: -10px -15px;
color:red;
}
</style>
</head>
<body>
<div >
<a href="#">北京</a>
</div>
</body>
</html>
.
背景鼠标小手
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
float: left;
background-color:deeppink;
cursor:pointer;
}
</style>
</head>
<body>
<div>
鼠标默认样式
</div>
</body>
</html>
5.图片练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*添加相应的样式，达到效果*/
.d1 {
width: 500px;
height: 241px;
margin: 0 auto;
}
.d1 img {
vertical-align:middle;
}
.d2 {
padding-left: 350px;
vertical-align: text-top;
float: left;
}
</style>
</head>
<body>
<!--vertical-align属性只对行内元素有效，对块内元素无效！-->
<div class="d1"><span><img src="images/qq.jpg" ><span>qq币</span></span></div>
<img src="images/qq.jpg">qq币
<div style="text-align:center;"><span><img class="d2" src="images/qq.jpg"><span>qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币qq币</span></span></div>
</body>
</html>
6.表格练习
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
/*宽300像素，高100像素，合并边框(border-collapse)
居中，表格标题顶部（底部)(caption-side)*/
height: 100px;
width:300px;
border-collapse:collapse;
text-align:center;
caption-side:top;
}
table,tr,td,th{
/*边框宽1像素，实线，颜色对应的RGB为(188,218,134)*/
border: 1px solid rgb(188,218,134);
}
tr:nth-child(odd){
/* ：nth-child() 选择器表示元素的第n个孩子
这里是指tr的奇数行
背景颜色的RGB值为(234,242,208)
行的字体颜色为黑色*/
background-color:rgb(234,242,208);
color :black;
}
tr:nth-child(even){
/*偶数行的字体颜色为黑色*/
color: black;
}
th{
/*表头背景颜色为RGB值为(159,203,72)
文本对齐方式为居中对齐*/
background-color: rgb(159, 203,72);
text-align: center;
}
</style>
<body>
<div id="container">
<table>
<caption>名单</caption>
<tr>
<th>号码</th>
<th>姓名</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
</tr>
<tr>
<td>004</td>
<td>赵六</td>
</tr>
<tr>
<td>005</td>
<td>钱七</td>
</tr>
<tr>
<td>006</td>
<td>孙八</td>
</tr>
</table>
</div>
</body>
</html>
7字体样式
1 letter-spacing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*字符间距样式分别设置为2px、-3px，看看相应的效果*/
h1{
letter-spacing:2px;
}
h2{
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>标题内容</h1>
<h2>文本段落主要内容</h2>
</body>
</html>
2. line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
font-size: 14px;
/*设置行高为2em，理解em与px单位的区别*/
line-height: 2em;
}
</style>
</head>
<body>
<!-- 将浏览器窗口拖动得窄一些，可以看到下面文字分多行显示时的行间距效果 -->
<p>
这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。
</p>
</body>
</html>
3. line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*理解行高的作用*/
#p1{
/*字体大小14px，高度40像素，背景颜色#ccc*/
font-size: 14px;
line-height: 40px;
background-color: #ccc;
}
#p2{
/*字体大小14px，行高40像素，背景颜色#ccc*/
font-size: 14px;
line-height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<p id="p1">
web前端开发课程
</p>
<p id="p2">
web前端开发课程
</p>
</body>
</html>
4 text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*h1的文本居中显示*/
/*类样式date右对齐*/
/*类样式main左对齐，首行缩进两个字符*/
h1{
text-align: center;
}
.date{text-align: right;
}
.main{
text-align: left;
text-indent:2em;
}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date"> 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”</p>
</body>
</html>
5 text-decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*试一试文本装饰样式*/
h1{
text-decoration:overline;
}
</style>
</head>
<body>
<h1>标题1文字</h1>
<h2><u>标题2文字</u></h2>
<h3><s>标题3文字<s></h3>
</body>
</html>
8 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="border:1px solid #00ff90; width:15%; height:400px;border-radius:20px 20px 20px 20px;">
<div style="background-color:#00ff21; width:100%; height:50px; border-radius:20px 20px 0px 0px;">
<h2 style="color:white; text-align:center; margin: auto;">账号登录密码</h2>
</div>
<div>
<form>
<br /><br />
<input type="text" style="height:30px"/><br /><br />
<input type="text" style="height:30px"/><br /><br />
<input type="radio" name="Name" />下次自动登录<br /><br />
<input type="submit" name="Submit" value="登录" style="background-color:#00ff21; width:60%; height:50px; border:1px solid #00ff21" /><br /><br />
<input type="submit" name="Submit" value="重置" style="background-color:#00ff21; width:60%; height:50px; border:1px solid #00ff21" /><br /><br />
</form>
</div>
</div>
</body>
</html>
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
