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
  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;}

使用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 点赞

Day9:html和css的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. Django基础，Day9 - 静态文件目录与路径设置说明(eg. images, JavaScript, CSS)

    静态文件路径设置官方说明 1. Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS. 2. In ...

  3. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  5. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  6. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  7. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  8. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

随机推荐

  1. CentOS7 Failed to start LSB: Bring up/down解决方法

    刚刚装好的虚拟机突然不能上网了,报错很诡异,具体报错如下: /etc/init.d/network restart Restarting network (via systemctl):  Job f ...

  2. Oracle 数据库中对记录进行分页处理

    学习到 oracle 的视图的时候,了解到对 Oracle 中数据的记录进行分页处理和 Mysql 提供的 limit 来进行分页处理大有不同,limit 是 mysql 中特有的关键字. 那么在 o ...

  3. js 14位字符串 转日期

    const pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/; const newDate = new Date(timeEnd.repla ...

  4. dskinlite(uieasy mfc界面库)使用记录1: schema验证xml

    市场上的MFC第三方库很多,最终选定dskinlite企业版,成熟度比较高,当然价格也略贵. 在2017年仍然使用MFC是有些另类,但特定场景很适用,也适合不愿转型的老程序员. 目前处于学习阶段,欢迎 ...

  5. linux 7安装telnet，设置telnet自启动，使用root telnet登录

    1.安装启动服务 # yum install telnet-server # yum install xinetd # systemctl enable xinetd.service # system ...

  6. Play中JSON序列化

    总的来说在scala体系下,对于习惯了java和c#这些常规开发的人来说,无论是akka-http还是play,就处理个json序列化与反序列化真他娘够费劲的. 根据经验,Json处理是比较简单的,但 ...

  7. Finance财务软件（引入业务系统凭证专题）

    我们通过自定义存储过程从业务系统引入凭证 我们需要以下适配 1.设置业务系统数据库链接 2.在自定义模板中设置存储过程名称及入参,这里的功能键值必须为_InterfaceExec,保留字段作为存储过程 ...

  8. Python 验证码识别-- tesserocr

    Python 验证码识别-- tesserocr tesserocr 是 Python 的一个 OCR 识别库 ,但其实是对 tesseract 做的一 层 Python API 封装,所以它的核心是 ...

  9. delphi fastreport 动态加载图片

    (frxReport1.FindObject('picture1') as TfrxPictureView).Picture.LoadFromFile('d:\c.jpg'); frxReport1. ...

  10. 关于python，完善我计算机知识的一步。

    因为身为理科男,所以特别喜欢涉及其他领域的知识.而对我来说,计算机是很有诱惑力的--尤其是程序语言设计,懂得一门“外语”是多么的重要.大一时候接触过包括有计算机的基本知识,c语言,这个新的学期也开始接 ...