WEB课堂作业练习 2
WEB课堂作业练习 2
1.添加样式：
行内样式
在这里插入代码片
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<p style="color:red; font-size:18px; text-indent:2em;">天使投资
天使投资指早期投资，尤其指个人早期投资。
p>
body>
html>
内嵌
在这里插入代码片
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
font-size: 18px;
text-indent: 2em;
}
style>
head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。p>
body>
html>
效果图
2.选择器
1.标签选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
p{font-size:12px;
}
/*类样式one字体大小18px；类样式two字体大小24px*/
.one{
font-size: 18px;
}
.two{
font-size: 24px;
}
style>
标签
head>
<body>
<p class="one">类别1p>
<p class="one">类别1p>
<p class="two">类别2p>
<p class="two">类别2p>
<p>普通段落中的文字p>
body>
html>
3.ID选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#one{
font-size: 24px;
}
#two{
font-size: 18px;
}
style>
head>
<body>
<p id="one">����1p>
<p id="two">����2p>
body>
html>
```这里未转化utf-8文本识别，知识点是id应用
4.多个择器的集体声明
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<style>
h1,p{
text-align: center;
}
style>
head>
<body>
<h1>欢迎访问论坛h1>
<p>欢迎访问论坛p>
body>
html>
5.选择器的嵌套声明
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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.全局选择器的声明
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<style>
*{
text-align: center;
}
style>
head>
<body>
<h1>欢迎访问论坛h1>
<p>欢迎访问论坛p>
<h2>欢迎访问论坛h2>
body>
html>
7 class id选择器混用
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documenttitle>
<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>
<p class="one red right">这里的文字，18px，红色，右对齐p>
<div class="two yellow left">这里的文字，24px黄色，左对齐div>
<div class="one yellow left" id="my">这里的文字，18px黄色，左对齐，有背景色div>
body>
html>
4.背景与超链接
超链接
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<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>
相关阅读:
<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
<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">
<h1>金融危机下欧洲华商陷窘境 变思维逆境突破h1>
div>
body>
html>
背景2
<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
<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>
.
背景鼠标小手
<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.图片练习
<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>
<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.表格练习
<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>001td>
<td>张三td>
tr>
<tr>
<td>002td>
<td>李四td>
tr>
<tr>
<td>003td>
<td>王五td>
tr>
<tr>
<td>004td>
<td>赵六td>
tr>
<tr>
<td>005td>
<td>钱七td>
tr>
<tr>
<td>006td>
<td>孙八td>
tr>
table>
div>
body>
html>
7字体样式
1 letter-spacing
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/*字符间距样式分别设置为2px、-3px，看看相应的效果*/
h1{
letter-spacing:2px;
}
h2{
letter-spacing: -3px;
}
style>
head>
<body>
<h1>标题内容h1>
<h2>文本段落主要内容h2>
body>
html>
2. line-height
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/*试一试文本装饰样式*/
h1{
text-decoration:overline;
}
style>
head>
<body>
<h1>标题1文字h1>
<h2><u>标题2文字u>h2>
<h3><s>标题3文字<s>h3>
body>
html>
8 表单
<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>
