zoukankan      html  css  js  c++  java
  • Day9:html和css

    标题图

    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;
    	 	 300px;
    	 	height: 100px;
    	 }
    	 img {
    	 	 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.jianshu.com/u/c785ece603d1

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
  • 相关阅读:
    Matlab 绘制三维立体图(以地质异常体为例)
    Azure DevOps的variable group实现array和hashtable参数的传递
    Azure DevOps 利用rest api设置variable group
    Azure AADSTS7000215 其中一种问题的解决
    Power BI 实现实时更新Streaming Dataset
    AAD Service Principal获取azure user list (Microsoft Graph API)
    Matlab 沿三维任意方向切割CT图的仿真计算
    Azure Powershell script检测登陆并部署ARM Template
    Azure KeyVault设置策略和自动化添加secrets键值对
    Azure登陆的两种常见方式(user 和 service principal登陆)
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140365.html
Copyright © 2011-2022 走看看