Day9:html和css

作者 : 开心源码 本文共1780个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共166人阅读

标题图

Day9:htmlcss

<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 
  1. margin 会有外边距合并
  2. padding 会影响盒子大小
  3. 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;}

使用beforeafter双伪元素清理浮动

.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

发表回复