Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的样式与内联框
Blogger Information
Blog 3
fans 0
comment 0
visits 1480
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS的样式与内联框
手机用户1609353911
Original
528 people have browsed it

这一章写到了很多
比如CSS CSS样式的优先级
以及一些布局元素
内联框

/ 术语: 规则 , 选择器 ,声明块 , 属性和值 /
/ 选择器 H1 /
/ 声明块: 由一对{} 大括号包住的内容 /
/ 规则: 选择器 + 声明块 /
/ 属性和值: 写在声明块中的名值对型 /

  1.                     /* 标签选择器 */
  2.         h1{
  3.             color: #90EE90;
  6.         }
  8.         /* 属性选择器 */
  10.         /* *:表示所有元素/标签*/ 
  12.     /*     h2[class="title"]{
  13.             color: #FF0000;
  15.         } */
  16.     /*     h1[id="page-title"]{
  17.             color: red;
  19.         } */
  21.         /* id:浏览器并不检查他的唯一性,由程序员自己控制 */
  23.         /* 3:类选择器 */
  24. /*         h1.title{
  25.             color: #87CEFA;
  27.         } */
  29.         /* 4:id选择器 */
  31. /*         #page-title{
  32.             color: #EEEEEE;
  34.         } */

迷你小后台

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="style/iframe.css"/>
  7.     </head>
  8.     <body>
  9.         <div class="header">网站管理后台</div>
  10.         <div class="aside"> <!-- aside 侧边栏 -->
  11.             <a href="../第二章/列表与表格.html" target="content">列表与表格</a>
  12.                 <a href="../第二章/表单 文本框.html" target="content">表单 文本框</a>
  13.                 <a href="../第二章/表格.html" target="content">表格</a>
  15.         </div>
  17.         <div class="main">
  18.             <iframe srcdoc="右击左侧按钮" name="content"></iframe>
  22.         </div>
  23.     </body>
  24. </html>

CSS优先级
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
/ 标签选择器 /
h1{
color: #90EE90;


}

/ 属性选择器 /

/ :表示所有元素/标签/

/ h2[class=”title”]{
color: #FF0000;

} /
/ h1[id=”page-title”]{
color: red;

} /

/ id:浏览器并不检查他的唯一性,由程序员自己控制 /

/ 3:类选择器 /
/ h1.title{
color: #87CEFA;

} /

/ 4:id选择器 /

/ #page-title{
color: #EEEEEE;

} /
</style>

</head>
<body>
<!-- <header class="page-header"> <h1 id="page-title" class="title">web全栈开发课程</h1> <h2 id="page-title" class="title">慢慢学web开发</h2> </header> -->
<style>
h1{
color: red;

}

.active{
color: #333333;
}

#bt{
color: #87CEFA;


}

/ 标签< 类 <id */ </style>

<h1 class="active" id="bt">hello world</h1>

</body>
</html>

CSS的语法与属性

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

<!-- 如果CSS就控制本页面的话就用style标签写到当前页面 -->
<style type="text/css">
/ 术语: 规则 , 选择器 ,声明块 , 属性和值 /
/ 选择器 H1 /
/ 声明块: 由一对{} 大括号包住的内容 /
/ 规则: 选择器 + 声明块 /
/ 属性和值: 写在声明块中的名值对型 /
h1{

color: red;
font-weight: 200;
}

</style>

</head>
<body>
<header class="page-header">
<h1 id="page-title" class="title">web全栈开发课程</h1>
<h2 id="page-title">慢慢学web开发</h2>
</header>
</body>
</html>

内联框的原理和应用
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: grid;

}


iframe{
width: 30em;
height: 16em;

}



</style>
</head>
<body>
<div>
<a href="https://j.map.baidu.com/4f/gHY" target="gd">广东</a>
<iframe srcdoc="广东地图" name="gd"></iframe>
</div>

<div>
<a href="https://j.map.baidu.com/d4/-jY" target="yn">越南</a>
<iframe srcdoc="越南地图" name="yn"></iframe>
</div>

</body>
</html>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post