简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 内联框架和CSS
Blogger Information
Blog 13
fans 0
comment 2
visits 14297
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
华宥为
Original
770 people have browsed it

内联框架

iframe

  1. <a href="" target="hefei">合肥市地图</a>
  2. <iframe src="https://" name="hefei"></iframe>
  3. <iframe srcdoc="合肥市" name="hefei"></iframe>

网站后台制作（mini）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>迷你小后台</title>
  7.   </head>
  8.   <body>
  9.     <div class="header">网络管理后台</div>
  10.     <div class="aside">
  11.         <a href="domo1.html" target="countent">链接与锚点</a>
  12.         <a href="domo1.html" target="countent">链接与锚点</a>
  13.         <a href="domo1.html" target="countent">链接与锚点</a>
  14.         <a href="domo1.html" target="countent">链接与锚点</a>
  15.     </div>
  16.     <div class="main">
  17.         <iframe srcdoc="请...."  name="countent"></iframe>
  18.     </div>

布局元素

  • 页眉 <header></header>
    <div class="container">

  • 侧边栏 <aside></aside>

  • 主体

  1. <main>
  2.  <div>
  3.     <section>
  4.         <h1>lalala</h1>
  5.     </section>
  6.     <section>
  7.         <h1>lalala</h1>
  8.     </section>
  9.  </div>
  10. </main>
  • 页脚 <footer></footer>

&lt &gt 实体字符 页面中原样显示不会被浏览器解析

<div></div>: 标签:通用容器标签，内部可以放置任何类型元素，当 一个容器类型不定时可以用它
<span></span>：通用容器，内部是行内元素/文本/图片/链接/input

css 的学习

语法和基本术语

<header class="page-header">
<h1 id="page-tetle" class="title" style="color:blue"></h1>
如果您的 css 样式仅仅用来控制当前页面元素，就用 style 标签写入

  1. <style>
  3.     术语：规则 选择器，声明块，属性和值
  4.     选择器：h1
  5.     声明块：由一对{...}包住的内容
  6.     规则：选择器+声明块
  7.     属性和值：写在声明块中的名值对
  9.     h1{
  10.         <!-- 样式声明 -->
  11.         color：green;
  12.         font-weight:200;
  13.     }
  15. </style>

一个元素的样式来源受四个级别影响：
1.inherited from html 继承于 html，根据元素在文档的结构和层级
2.user agent stylesheet 用户代理样式表 ，代理发出用户的网络请求，默认浏览器
3.demo1.html 用户自定义样式写到<style></style>标签中
4.elenent.style 行内样式，仅适用于当前元素，对其他元素无影响。写到 style 属性

层叠与优先级

1.标签选择器

  1. h1{
  2.     colot:green;
  3. }

2.属性选择器
*:表示所有元素/标签

  1. *[class="title"]{
  2.     color:red;
  3. }
  4. h2[class="title"]{
  5.     color:red;
  6. }

不建议用 ID 选择器

3.类选择器
class 简写 .

  1. .title{
  2.    color:red;
  3. }

4.id 选择器
ID 简写#

  1. #page-title{
  2.   color:red;
  3. }

优先级 id->类->标签选择器
！important;(提高优先级)

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！