韩顺平网页第十二讲

来源：互联网发布：不是uc矩阵的作用之一编辑：程序博客网时间：2024/04/28 20:16

行内元素又叫内联元素：只能容纳文本或者其他内联元素，常见的内联元素<span><a><input>

块元素：从新行开始，可以容纳文本，内联元素和其他块元素。即使内容不满一行，块元素也占满整行。<div><p>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>HTMLPage3.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  <link rel="stylesheet" href="my3.css" type="text/css"></link>  </head>    <body>  <!-- 下面是在行内元素里面容纳块元素的实验 -->    <span class="s1">span1 he<div class="s2">aaa</div>llo word</span>    <div class="s2"> div1</div>    <div class="s2"> div2<div class="s4">div3</div></div>    <span class="s1">okok</span>    <p class="s3">p1</p>      </body></html>

.s1{background-color: pink;display:block;/*所有引用了s1的元素都已快元素显示*/}/*div这个快元素不管宽度是多少，他总是占满一行*/.s2{background-color: gray;width:100px;}.s3{background-color: pink;display:inline;/*所有引用了s3的元素都已行内元素显示*/}.s4{background-color: green;}/*块元素和行列元素可以互相转换,如s1里面*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>exam1.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  <link rel="stylesheet" href="exam1.css" type="text/css"></link></head>    <body>    <font class="s1">梁山排行榜</font><br>    <span class="s2">宋江</span><br>    <span class="s3">卢员外</span><br>    <span class="s4">吴用</span><br>        <span class="s3">豹子头</span><br>    <span class="s3">大刀关胜</span><br>        <a href="#">goto sohu1成都</a><br/>     <a href="#">goto sohu2昆明</a><br/>      <a href="#">goto sohu3西安</a><br/>       <a href="#">goto sohu4北京</a><br/>  </body></html>

.s1{font-size: 50px;color:blue;}.s2{background-color: gray;font-style: italic;color:red;font-weight: bold;}.s3{background-color: gray;font-weight: bold;}.s4{background-color: gray;font-style: italic;font-weight: bold;text-decoration: underline;}/*优先使用类选择器，以防止后面有其他要求可以通过id选择器来实现*//*使用html元素选择器来编辑超链接*//*超链接默认的样式*/a:link{color:red;font-size: 24px;font-family:华文新魏;text-decoration: none;}/*当鼠标移动到超链接的时候，自动出现下划线*/a:hover{color:green;font-size: 40px;font-family:"宋体";text-decoration: underline;}/*当鼠标点击超链接以后*/a:visited{color:gray;}