首页 > > 网页制作 > css >

HTML&CSS笔记001

2018-06-24 02:26:09来源：未知阅读 ()

lesson1

<!DOCTYPE html>
<html lang="en,zh">

<head>
<meta charset="utf-8">
<meta content="服装" name="keywords">
<meta content="好看的衣服" name="description">
<title></title>
</head>
<body>
①<p>我是你爸爸</p>
<p>我是你爸爸</p>

②<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
③<strong>
  <em>哈哈</em>
</strong>
④<del style="color:#999">50$</del>
⑤<address>我的家在东北</address>
⑥<div style="color:#f40">
  <strong>a</strong>
  <em>b</em>
  <del>c</del>
</div>
<span></span>
</body>
</html>

lesson2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/*链接到4中的ul的导航栏应用*/
  *{
   margin:0;
   padding: 0;
  }
  ul{
   list-style: none;
  }
  li{
   margin: 0 10px;
   float:left;
   color:#f40;
   font-weight: bold;
   font-size: 24px;
   height: 30px;
   line-height: 30px;
   padding: 0 5px;
  }
  li:hover{
   border-radius:20px;
   background-color:#f40;
   color: #fff;
  }
</style>
<style type="text/css">
  input{
   border: 1px solid #999;
  }
</style>
</head>
<body>
<div style="width:100px;height:100px; ">
  彪哥很帅

  osdfjsjfsjff fdfdfsf dff

  
  
  
  
  






     
  



 








<form method="get" action="">
  <p>
  username<input type="text" name="username" value="请输入用户名">
  
  </p>
  <p>
  password<input type="password" name="password">
  
  
  </p>
  <input type="submit" value="登陆啦">
  
  
  
</form>
</body>
</html>

lesson3.html （与lesson3.css配套使用）

<!DOCTYPE html> 
<html>
<head>
<title>
  lesson3
</title>
<meta charset="utf-8">



<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>

!important  Infinity正无穷
行间样式  1000
id    100
class|属性|唯类 10
标签|伪元素  1
通配符   0
   256进制
</body>
</html>

lesson3.css

/*div{
width: 100px;
height: 100px;
border-radius:50%;
background-color: red;
}*/
/*2.1#only{
background-color: red;
}
#only1{
background-color: green;
}*/

/*2.2 class选择器
.demo{
background-color: yellow;
}
.demo1{
color: #f40;
}*/

/*2.3 标签选择器选中所有该种标签（无论标签是否嵌套，无论标签的位置）*/
/*div{
background-color: red;
}*/

/*2.4通配符选择器选中所有标签*/
/**{
background-color: green;
}*/

/*2.5属性选择器*/

/*[id="only"]{
background-color: green;
}*/

/*!important*/

/*div{
background-color: green!important;
}*/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有