前端----CSS巢狀方式，選擇器，iframe
阿新 • • 發佈：2018-12-26
1.CSS的三種巢狀方式（其實是四種，但是有2種是一樣的效果）
下面是我寫的例子
2.CSS選擇器CSS（Cascading Style Sheet－ “層疊樣式表”或“級聯樣式單” ） 製作網頁時採用CSS技術，可以有效地對頁面佈局、字型、顏色、背景和其它效果實現更加精確的控制， 可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。 “Cascading” 即在同一個Web文件中可以有多個樣式表存在，根據所在的位置，擁有不同的優先順序。優先順序越高，就會被最後在顯示時採用。 從樣式表插入的形式來看可以分為三種： 1、內聯式樣式表： 利用現有的HTML標記把特殊的樣式加入到那些由標記控制的資訊中。 2、嵌入式樣式表： 嵌入到HTML檔案的頭部中去（<html>和<body>標記之間），使用<Style>…</Style>容器裝載，例如： <style> p {color : blue ; font-weight : bold} </style> 對頁面中所有<p>標記都起作用。 3、外部式樣式表： 一種儲存在外部的樣式表文件，外部檔案以.CSS為副檔名，例如: <link rel=stylesheet href="main- sheet.css" type="text/css">
下面是我寫的例子：
/**demo.css**/ /*頁面 分3類 固定寬度頁面 流式頁面 響應式頁面 border:1px solid black; 邊框 margin: 100px auto; 居中 4個值：順時針方向 margin:200px auto; 外邊距 padding:10px; 內邊距*/ /* 誰的規則越複雜，誰的優先順序越高*/ /*E[ID]屬性選擇器*/ /* (.) 點是class選擇器*/ /* #是id選擇器*/ *{ margin:0; padding:0; } /*html{ margin:0; padding:0; font-size:16px; color:#000; }*/ /*div{ width:600px; height:600px; border:1px solid black } */ /* .demo_box{ width:1000px; height:500px; border:1px solid black; margin: 100px auto; background:black; color :#fff; } .chlid_box{ width:100px; height:200px; border:1px dashed red; margin:200px auto; padding:10px; text-align: center; } .demo_box.chlid_box.demo_img{ width:5px; height:5px; } */ /* div[id]{ font-size : 4em; } */ /*#demo{ font-size : 4em; }*/ /* ul>div{ font-size:2em; } */ /*.item_box:before{ font-size: 4em; content: url('#'); } */ /*li:hover{ font-size: 2em; }*/ .content_left{ width: 19%; height: 500px; float: left; border: 1px solid #000; } .content_right{ width:69%; height: 500px; float: left; border: 1px solid #000; } .demo_iframe{ width:100%; }
3.iframe的使用
Html5中的新特性
| 屬性 | 值 | 描述 |
|---|---|---|
| align |
| 不贊成使用。請使用樣式代替。 規定如何根據周圍的元素來對齊此框架。 |
| 規定 iframe 的高度。 | |
| URL | 規定一個頁面，該頁面包含了有關 iframe 的較長描述。 | |
| pixels | 定義 iframe 的頂部和底部的邊距。 | |
| pixels | 定義 iframe 的左側和右側的邊距。 | |
| name | frame_name | 規定 iframe 的名稱。 |
| 啟用一系列對 <iframe> 中內容的額外限制。 | |
| 規定是否在 iframe 中顯示滾動條。 | |
| seamless | 規定 <iframe> 看上去像是包含文件的一部分。 | |
| src | URL | 規定在 iframe 中顯示的文件的 URL。 |
| HTML_code | 規定在 <iframe> 中顯示的頁面的 HTML 內容。 | |
| width |
| 定義 iframe 的寬度。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="demo.css">
</head>
<body>
<!--
<><frameset>
作者：offline
時間：2018-07-09
描述：不能放iframe 在frameset中
<frame></frame>
</frameset>
<iframe></iframe>
-->
<div class="content_left">
<ul>
<li>
<a href="http://taobao.com" target="demo_iframe">淘寶</a>
</li>
<li>
<a href="http://www.w3school.com.cn" target="demo_iframe">W3</a>
</li>
<li>
<a href ="http://www.baidu.com" target="demo_iframe">百度</a>
</li>
</ul>
</div>
<div class="content_right">
<iframe src ="http://www.baidu.com" name="demo_iframe" class='demo_iframe' height="500" frameborder=0 />
</div>
</body>
</html>效果如下：
大家舉例的時候不要以京東為例，如果以京東為例就會發生跳轉到另一個頁面，我猜測應該是京東的頁面會有一個新的GET請求，請讀者牢記