Day9:html和css
标题图
Day9:
html
和css
<head> <meta charset="UTF-8"> <title></title> <meta name="description" content="" /> <meta name="Keywords" content="" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 针对浏览器 --> <link rel="stylesheet" href="css/normalize.css" /> <!-- 对网页 头部和底部样式 --> <link rel="stylesheet" href="css/base.css" /> <!-- 首页的css 只写首页的 独有的--> <link rel="stylesheet" href="css/index.css"></head>
案例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Dome</title> <style> div { border: 1px solid #000; float: left; width: 300px; height: 100px; } img { width: 100%; height: 100%; } </style></head><body> <div> <img src="images/pic.jpg" height="250" width="700" alt=""> </div></body></html>
盒子模型布局
width > padding > margin
margin
会有外边距合并padding
会影响盒子大小width
圆角边框(CSS3
)
border-radius: 50%;
盒子阴影(CSS3
)
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
浮动(float
)
什么是浮动?
指设置了浮动属性的元素会脱离标准标准流的控制
选择器{float:属性值;}
属性值 | 形容 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动 |
清理浮动的方法
选择器{clear:属性值;}
属性值 | 形容 |
---|---|
left | (清理左侧浮动的影响) |
right | (清理右侧浮动的影响) |
both | 同时清理左右两侧浮动的影响 |
额外标签法
<div style=”clear:both”></div>
父级增加overflow
属性
overflow为 hidden|auto|scroll
使用after
伪元素清理浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;}
使用before
和after
双伪元素清理浮动
.clearfix:before,.clearfix:after { content:""; display:table; }.clearfix:after { clear:both;}.clearfix { *zoom:1;}
常用新标签
header:定义文档的页眉nav:定义导航链接的部分footer:定义文档或者节的页脚article:定义文章section:定义文档中的节aside:定义其所处内容之外的内容datalist 标签定义选项列表embed:标签定义嵌入的内容audio:播放音频video:播放视频
多媒体 audio
loop 循环播放autoplay 自动播放controls 能否显不默认播放控件
多媒体 video
autoplay 自动播放controls 能否显示默认播放控件loop 循环播放width 设置播放窗口宽度height 设置播放窗口的高度
假如看了觉得不错
点赞!转发!
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.songma.com/u/c785ece603d1
结语
- 下面我将继续对 其余知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Day9:html和css
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Day9:html和css