Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础与iframe练习
Blogger Information
Blog 4
fans 0
comment 0
visits 2547
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基础与iframe练习
思闻_Sven
Original
650 people have browsed it

css基础与iframe练习

思闻_Sven

一、CSS基础

CSS样式来源

1.浏览器默认样式

2.元素的内联样式

3.通过选择器设置样式

4.继承自祖先元素的样式

CSS样式的优先级

CSS中样式的优先级有以下几个特点
1.继承样式没有优先级。
2.内联样式的优先级高于任何选择器样式的优先级。
3.通过选择器设置的样式的优先级可以同过计算选择器的权重来得到，权重越高优先级越高。在不涉及复合选择器时，选择器优先级由高到低为：id选择器、类选择器、元素选择器、统配选择器。交集选择器相加计算权重，并集选择器分开各自的权重。
4.选择器设置的样式的优先级相同时，（代码）写在下面的样式会优先使用。

iframe实现简易后台

html代码

  1. <body>
  2.     <div id="title">    
  3.         <h1>iframe 简易后台</h1>
  4.     </div>
  6.     <div id="header">
  7.       <ul class="nav">
  8.         <li>搜索引擎</li>
  9.         <li>教程</li>
  10.         <li>练习</li>
  11.         <li>联系我们</li>
  12.       </ul>
  13.     </div>
  14.     <div id="aside">
  15.       <div><a href="https://www.so.com/?src=none&ls=" target="main">360</a></div>
  16.       <div><a href="https://www.baidu.com/" target="main">百度</a></div>
  17.       <div><a href="https://cn.bing.com/" target="main">必应</a></div>
  18.     </div>
  19.     <div id="main">
  20.       <iframe src="https://www.baidu.com/" frameborder="0" name="main"></iframe>
  21.     </div>
  22.     </div>
  23.   </body>

样式表

  1. <style>
  2.   * { 
  3.     margin: 0;
  4.     padding: 0;
  5.   }
  6.   ul {
  7.     list-style: none;
  8.   }
  9.   /*以上为清除浏览器默认样式*/
  10.   body {
  11.     margin: 0 auto;
  12.     width: 90%;
  13.   }
  14.   #title{
  15.     height: 60px;
  16.     background-color: darkslategray;
  17.     margin: 20px auto;
  18.     text-align: center;
  19.   }
  20.   #header {
  21.     overflow: auto; /* 通过overflow打开BFC属性防止高度塌陷 */
  22.     background-color: darkkhaki;
  23.     margin: 0 auto 10px;
  24.     padding: 5px 0;
  25.   }
  26.   .nav > li {
  27.     text-align: center;
  28.     width: 20%;
  29.     margin: 0 auto;
  30.     float: left;
  31.   }
  32.   #aside {
  33.     height: 800px;
  34.     width: 10%;
  35.     float: left;
  36.     background-color: rgb(231, 243, 208);
  37.     text-align: center;
  38.   }
  39.   #aside > div {
  40.       margin-top: 20px;
  41.   }
  42.   #main {
  43.     width: 90%;
  44.     float: left;
  45.     background-color: cornsilk;
  46.   }
  47.   #main > iframe {
  48.     width: 100%;
  49.     height: 800px;
  50.   }
  51. </style>

截图

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