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.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.01.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录