前端学习笔记1
来源:互联网 发布:淘宝联盟怎么看隐藏券 编辑:程序博客网 时间:2024/05/24 02:13
CSS 层叠样式表 实现内容和表现分离
CSS:
1. 实现内容和表现分离
2. CSS的样式控制比HTML的属性多
3. CSS文件可以缓存在浏览器中,节省带宽。
4. HTML和CSS内容和表现分离。SEO友好
三种使用方式:
1.内联: style:
2.嵌入:
<style> #b{ background-color: #eee; font-size: 24px; }**#div1**{ font-size: 24px;} </style>
- 外联样式:
<link rel="stylesheet" href="css/common.css" />
CSS选择器:
CSS2: id选择器
类选择器
普通选择器
后代选择器 p em
群组选择器 ,分隔
伪类选择器:超链接,按钮,div
:hover: 光标悬停
:active: 光标点下去
伪元素选择器(CSS3使用::前缀):
: first-letter
选择器的优先级:
1.内联> 嵌入 > 外联
2.定位范围越小的优先级越高 Id> 类>普通
3.优先级最高 !important
Div盒子模型:
Margin: 90px //4个外边距都是90
Margin: 90px 90px 90px 90px //上 右 下 左
Margin: 90px 90px 90px 上 左右 下
Margin: 90px 90px 上下 左右
Margin: 90px auto; 水平方向居中
Div布局:
Div: position样式:
Fixed: 相对于浏览器本身
Relative: 相对div在文档中原有的位置
Absolute: 相对父元素定位, 父元素必须是relative或者absolute, 如果所有父级元素都不是relative或者是absolute, 只能相对浏览器窗口定位
Div: 浮动
问题: 如果一个元素,其子元素都浮动了,这个元素就没有了高度。
解决方案:
1.给父元素制定高度
2.在父元素中添加额外的div, 设置样式Clear:both
3.使用CSS3的伪对象,
行级元素 VS 块级元素
行级元素:
块级元素: div p ul li
行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同,主要是盒模型属性上
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
行内元素和块级元素之间可以互转:
Display: inline(行级) 不可以设置宽高属性
Block(块级)
Inline-block: 行级元素,但是具有块级元素的宽高属性
注意: 块级元素变inline-block,vertical-align:top解决对齐问题。
颜色代码: red, rgb, rgba, #xxxxxx #eeeeee
阶段练习1 模仿QQmusic主页:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/normalize.css" /> </head> <body> <div id="header"> <img src="img/QQ音乐图标.png" /> <div id="header_menu"> <img src="img/MV.png" /> <img src="img/电台.png" /> <img src="img/歌单.png" /> <img src="img/排行.png" /> </div> </div> <div id="content"> <a href="1.html" target="_blank"> <img src="img/1.png" /> </a> <a href="2.html"> <img src="img/2.png" /> </a> <a href=""> <img src="img/3.png" /> </a> <a href=""> <img src="img/4.png" /> </a> <a href=""> <img src="img/5.png" /> </a> <a href=""> <img src="img/6.png" /> </a> <a href=""> <img src="img/7.png" /> </a> <a href=""> <img src="img/8.png" /> </a> </div> </body></html>common.csshtml,body{ /*margin: 0px; padding:0px;*/ height: 100%;}body{ min-width: 850px; background-image: url("../img/背景.png"); background-size: cover; background-position: center; }#header{ height: 70px; background-image: url(../img/导航栏.png);}#header_menu{ height: 70px; float: right;}#content{ width:850px; /*margin-top: 100px; margin-left: 100px;*/ margin: 90px auto;}#content img{ width:200px; height: 200px;}
CSS3选择器:
div>p 子元素 div+* 紧挨着div后面的元素(1个) div~* 紧挨着div后面的元素(多个)
属性选择器:
[target*=flower] target=”xxxxflower” target=”xxxx flower”
[target~=flower] target=”xxx flower”
[target^=flower] target=”flowerxxxx”
[target|=flower] target=”flower-xxxx”
[target$=flower] target=”xxxtarget”;
P:first-of-type 和P:first-child 的区别
如下案例:
P:first-of-type:
这是第二个段落。
P:first-child: 选不到元素
<div><span>这是第一个段落。</span><p>这是第二个段落。</p><p>这是第三个段落。</p><p>这是第四个段落。</p></div>
p:empty 开头和结尾标记紧挨着,重点不能有内容,空格,换行
:target
<!DOCTYPE html><html><head><style>#news1:target{border: 2px solid #D4D4D4;background-color: #e5eecc;}#news2:target{border: 2px solid #D4D4D4;background-color: #eee;}</style></head><body><h1>这是标题</h1><p><a href="#news1">跳转至内容 1</a></p><p><a href="#news2">跳转至内容 2</a></p><p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p><p id="news1"><b>内容 1...</b></p><p id="news2"><b>内容 2...</b></p><p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p></body></html>
阶段练习2 一个无序列表控制内容显示:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/normalize.css" /> <style> #mydiv { width: 420px; height: 200px; position:relative; } #mydiv>ul>li { display: inline-block; background-color: #0088CE; height: 40px; /*vertical-align: top; */ line-height: 40px; padding: 0px 5px; margin-right: -5px; } .contentdiv { width: 420px; height: 150px; position:absolute; left: 0px; bottom: 0px; background-color: white; } .contentdiv img { margin-top: 20px; } .contentdiv div { width:300px; float: right; } :target { z-index: 1; } /* #mydiv>ul>li:nth-of-type(2),#mydiv>ul>li:nth-of-type(5) { line-height: 30px; }*/ </style> </head> <body> <div id="mydiv"> <ul> <li> <a href="#div1">医疗</a> </li> <li> <a href="#div2">SaCa<sup>®</sup>云应用平台</a> </li> <li> <a href="#div3">e-HR</a> </li> <li> <a href="#div4">网络安全</a> </li> <li> <a href="#div5">UniEAP<sup>®</sup></a> </li> </ul> <div class="contentdiv" id="div2"> <img src="http://www.neusoft.com/cn/upload/images/20130514/1368513493641.jpg" /> <div> <p>SaCa®云应用平台旨在支撑从端到云的统一构建快速而安全的应用,它提供了一系列产品来应对B2B2C/G2B2C模式下移动互联网、物联网、社交网络、情景感知、大数据、云计算的需求。</p> <a href="#">更多>></a> </div> </div> <div class="contentdiv" id="div3"> <img src="http://www.neusoft.com/upload/images/20110328/1301289141063.jpg" /> <div> <p>东软慧鼎人才资本管理系统(TalentBase HCM)是东软与怡安翰威特咨询公司强强联手、共同推出的可提供最佳人才资本管理实践方法、软件和服务的人才资本管理产品。</p> <a href="#">更多>></a> </div> </div> <div class="contentdiv" id="div4"> <img src="http://www.neusoft.com/upload/images/20110328/1301289122388.jpg" /> <div> <p>东软NetEye信息安全为您提供高品质的信息安全产品和专业化的信息安全服务,及面向用户应用的网络安全整体解决方案。</p> <a href="#">更多>></a> </div> </div> <div class="contentdiv" id="div5"> <img src="http://www.neusoft.com/upload/images/20110328/1301289180176.jpg" /> <div> <p>UniEAP®包含由开发工具、技术框架、通用技术组件和软件开发方法学,提供从需求、设计、开发、调试、部署到运维的应用全生命周期一站式服务,支撑IT应用的敏捷构建。</p> <a href="#">更多>></a> </div> </div> <div class="contentdiv" id="div1"> <img src="http://www.neusoft.com/upload/images/20110411/1302490892347.jpg" /> <div> <p>东软提供从硬件到软件、从技术到服务、从医院到个人、从中心城市到偏远地区的全面医疗健康保障解决方案,涵盖医学影像设备、数字化医院解决方案、区域医疗、个人健康服务等多个领域。</p> <a href="#">更多>></a> </div> </div> </div> </body></html>
- 前端学习笔记1
- 前端学习笔记1
- web前端学习笔记1
- 网页前端学习笔记1
- 前端学习笔记(1)-HTML
- Web前端学习笔记1-1-1
- 前端学习实践笔记--JavaScript深入【1】
- web 前端学习笔记(1)
- 前端学习笔记1--md5加密中文
- FreeCodeCamp之前端开发学习笔记1
- 前端学习笔记2-1 CSS
- 前端学习笔记3-1 javascript
- 前端学习笔记20130916
- 前端学习笔记20130918
- 前端学习笔记20130922
- 前端学习笔记20130925
- 前端开发学习笔记
- 前端学习笔记
- hibernare多对多关系映射
- Java swing创建按钮和标签及处理
- 20170604_分割成回文串
- Java类和C结构体之间自动转换
- Spring配置事务的五种方式
- 前端学习笔记1
- 机器是如何学会歧视的?
- 安卓开发中实用的查看日志方法
- Python 组合实例
- usaco P2736 “破锣摇滚”乐队 Raucous Rockers(搜索或类似01的DP)
- LeetCode OJ 9 Palindrome Number [easy]
- [Leetcode] 121. Best Time to Buy and Sell Stock
- Jedis之ShardedJedis一致性哈希分析
- java深入