小知识点

小知识点

小知识点之引用自定义字体


<html>
	<head>
		<meta charset="utf-8">
		<meta name="keywords"  content="html+css">
		<meta name="description"  content="">
		<title>title>
		<style>
			body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
      
				margin:0; 
				padding:0;
			}
			ul,ol{
      
				list-style:none;
			}
			a{
      
				color:#000;
				text-decoration: none;
			}
			@font-face {
       /*引用自定义字体*/
				font-family:"繁体";
				src:url("font/hychf.ttf");
			}
			p{
      
				font-family:"繁体";
				font-size:25px;
				background-color: pink;
			}
        style>
    head>
    <body>
        <p>阡陌潇湘雨:你会发现新大陆p>
    body>
html>

小知识点之浅谈基线对齐问题


<html>
	<head>
		<meta charset="utf-8">
		<meta name="keywords"  content="html+css">
		<meta name="description"  content="">
		<title>title>
		<style>
			body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
      
				margin:0; 
				padding:0;
			}
			ul,ol{
      
				list-style:none;
			}
			a{
      
				color:#000;
				text-decoration: none;
			}
			@font-face {
       /*引用自定义字体*/
				font-family:"繁体";
				src:url("font/hychf.ttf");
			}
			p{
      
				font-family:"繁体";
				font-size:25px;
				background-color: pink;
			}

			span{
      
				font-size:50px;
				color:red;
			}
			img{
      
				width: 100px;
				height: 100px;
			}
			/*  
				图片(替换元素:可以更改(ppt有)) -> 行高  影响
				
			*/
			div{
      
				width: 100px;
				margin:100px;
				background-color: pink;
			}
			span{
      
				width: 100px;/*这里宽高没有设置上*/
				height: 100px;
				background-color: green;
			}
		style>
	head>
	<body>
		
		<span>白菜  -  摆财span>
		
		
		<p>小太阳:那不叫字体 那叫<span>狂草span><img src="images/1.jpg" alt=""><img src="images/1.jpg" alt="">p>
		<div><img src="images/1.jpg" alt="">div>
	body>
html>

你可能感兴趣的:(html与css学习)