HTML布局
div 元素是用于分组 HTML 元素的块级元素。
也可以用 < table > 标签创建布局(较简单)
应用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="350" border="0">
<tr>
<td colspan="2" style="background-color:#c0bbff;">
<h1>人物简介</h1>
</td>
</tr>
<tr>
<td style="background-color:#ffc49d;width:150px;">
<b>主要信息</b><br>
姓名:哪吒<br>
性别:男<br>
登场作品:《哪吒之魔童降世》<br>
</td>
<td style="background-color:#eeeeee;height:200px;">
<p>我的照片<br>
<img src="../image/nezha.jpg"width="150"></td>
</tr>
</table>
</body>
</html>
浏览器运行结果
CSS基础
1.CSS语法
CSS规则由选择器和声明构成,声明有一条或多条
选择器为要改变样式的 HTML 元素。
声明由一个属性和一个值组成。
属性是要设置的样式属性,每个属性有一个值。
{属性:值;}
主要:声明要以;结束,要用{}括起来
CSS语法实例与注释实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p/*这里是选择器,选择段落为要改变样式的*/
{
color:deeppink;/*这里声明颜色为深粉色*/
text-align:left;/*这里声明位置为左边*/
}
</style>
</head>
<body>
<p>CSS注释</p>
<p>注释是用来解释代码的,可以随意编辑,浏览器会忽略。 </p>
<p>CSS注释以 /* 开始, 以 */ 结束</p>
</body>
</html>
浏览器运行结果
CSS id和class选择器
如果要在HTML元素中设置CSS样式,需要在元素中设置"id" 和 "class"选择器。
1.id 选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
注意: ID属性不要以数字开头
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#id1/*这里定义id选择器*/
{
color:green;/*这里声明颜色为绿色*/
text-align:center;/*这里声明位置为中间*/
}
</style>
</head>
<body>
<p id="id1">在段落< p >后加定义的id,以应用id属性</p>
<p>没有更改段落< p >,不受id选择器影响 </p>
</body>
</html>
浏览器运行结果
2.class选择器
class 选择器用于描述一组元素的样式。
注:class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示
注意:类名的第一个字符不能使用数字
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.center/*这里定义class选择器*/
{
color:blue;/*这里声明颜色为蓝色*/
text-align:center;/*这里声明位置为中间*/
}
</style>
</head>
<body>
<h1 class="center">可以指定特定的HTML元素使用class</h1>
<p class="center">如果定义class选择器为p.class</p>
<p>则只有p class="center"受影响,h1等不受影响</p>
</body>
</html>
浏览器运行结果