分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

0908期 ?HTML Frameset框架和选择器

发布时间:2023-09-06 01:10责任编辑:蔡小小关键词:HTML选择器

frameset框架

 

frameset与body没法同时使用,frameset用来分割页面,frame在frameset用于引用其他网页

1 <frameset rows="100,*" frameborder="no">    --上下分,第一行100像素,剩余为第二行;rows换成cols,则上下分变为左右分。frameborder=“no”,去掉分割线。2 ????????<frame src="页面地址" noresize="noresize">    --noresize,禁止窗口调整大小3 ????????<frame src="" scrolling="no">    --scrolling="no",取消显示滚动条4 </frameset>

iframe在原来页面嵌入小窗口显示其他页面

1 <iframe src="其他页面的地址" width="" height="" frameborder="0" scrolling="no"></iframe>

frameborder,边线;scrolling,滚动条。如果设置高和宽为0,则不显示,但是在后台会存在这么一个页面,该页面会在后台刷取流量。

 

 

选择器

 

1、标签选择器。用标签名做选择器。

1 <style type= "text/css">2 ????p    //格式对p标签起作用3 ????{4 ????????样式;5 ????}6 ????</style>

2、class选择器。都是“.”开头。

 1 ????<head> 2 ????<style type="text/css"> 3 ????.main     /*定义样式*/ 4 ????{ 5 ????????height:42px; 6 ????????width:100%; 7 ????????text-align:center; 8 ????} 9 ????</style>10 ????</head>11 ????<body>12 ????<div class="main">       <!--调用class样式-->13 ????</div>14 ????</body>

3、ID选择器。以“#”开头

 1 <head> 2 ????<style type="text/css"> 3 ????#main     /*定义样式*/ 4 ????{ 5 ????????height:42px; 6 ????????width:100%; 7 ????????text-align:center; 8 ????} 9 ????</style>10 ????</head>11 ????<body>12 ????<div id="main">       <!--调用id样式-->13 ????</div>14 ????</body>

4、复合选择器。

1)用“,”隔开,表示并列。

1 ?<style type="text/css">2 ????p,span    /*标签p、span两者同样的样式*/3 ????{4 ????????样式;5 ????}6 ????</style>

2)用空格隔开,表示后代。

1 ?<style type="text/css">2 ????.main p    /*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/3 ????{4 ????????样式;5 ????}6 ????</style>

3)筛选“.”。

1 ????<style type="text/css">2 ????p.sp ???/*在标签p中的class="sp"的标签,执行以下样式*/3 ????{4 ????????样式;5 ????}6 ????</style>

随堂

 

 1 <html> 2 ????<head> 3 ????????<meta charset="UTF-8"> 4 ????????<title></title> 5 ????????<link rel="stylesheet" href="css/css1.css" /> 6 ????????<style> 7 ????????????/*id选择器*/ 8 ????????????#div1{ 9 ????????????????width: 100px;10 ????????????????height: 100px;11 ????????????????background-color: blue;12 ????????????}13 ????????????/*class选择器*/14 ????????????.div2{15 ????????????????width: 100px;16 ????????????????height: 100px;17 ????????????????background-color: green;18 ????????????}19 ????????????/*标签选择器*/20 ????????????div{21 ????????????????border: 5px solid #000;22 ????????????}23 ????????????/*全局选择器*/24 ????????????*{25 ????????????????margin: 0px;26 ????????????????padding: 0px;27 ????????????}28 ????????????/*复合选择器*/29 ????????????????/*子代选择器*/30 ????????????????.div3 span{31 ????????????????????color: red;32 ????????????????}33 ????????????????/*并列选择器*/34 ????????????????.div3,.div4{35 ????????????????????width: 100px;36 ????????????????}37 ????????????????38 ????????????[shuxing=abc]{39 ????????????????width: 100px;40 ????????????????height: 100px;41 ????????????}42 ????????????43 ????????????a{44 ????????????????color: black;45 ????????????????text-decoration: none;46 ????????????}47 ????????????48 ????????????.div4:hover{49 ????????????????cursor: pointer;50 ????????????????transform: rotate(45deg);51 ????????????????transition: 1s;52 ????????????}53 ????????</style>54 ????</head>55 ????<body>56 ????????<div style="width: 100px;height: 100px;background-color: red;"></div>57 ????????<div id="div1"></div>58 ????????<div class="div2"></div>59 ????????<div class="div3">60 ????????????<span>几个字</span>61 ????????</div>62 ????????<div class="div4">63 ????????????<span>几个字</span>64 ????????</div>65 ????????<div shuxing="abc"></div>66 ????????<a href="http://www.baidu.com">超级链接</a>67 ????</body>68 </html>
选择器随堂

 

 

 

 

0908期 ?HTML Frameset框架和选择器

原文地址:http://www.cnblogs.com/1711643472qq/p/7512974.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved