H5和CSS页面布局入门笔记

一.H5

<link rel="stylesheet" href="css链接">  link+tab:快速键           <style>内部样式标签写css
  <script src=“js链接”></script>
<img src="图片" alt="链接">
<script src="js"></script>
 <h1>大标题<span> p 字段内容  <a>锚标签    href 链接的目标 URL。
<ul> 无序  <ol>有序   <li>
<hr>标签水平线
style="display: none"隐藏      &nbsp;空格键
<button>按钮

#e64b16
:last-child   选择后面一个

二.CSS3

color:  色彩  background-color: 背景颜色 box-shadow阴影  :hover 鼠标
font-size:12px  字大小  text-decoration:none;取消下划线   font-weight:normal;取消字体加粗    
text-align:center;文字居中line-height:0px 行高    ul li{ list-style: none};去点
border: 10px solid transparent;   border-left-color: #65aac3;  i的三角形   overflow: hidden;/*超出部分隐藏显示*/

做盒子：width：宽度       height：    高度%px    
margin: 0 auto 外边距 可与元素水平居中       padding：px内边距 

float:left   左浮动   float:right  右浮动  overflow: hidden清除浮动
top上值    right右  bottom下  left左 
定位position: 相对定位 relative 绝对定位 absolute 固定定fixed  

  border-radius: 5px;   圆边 
//border-width: 边框宽   border-style：边框样式   border-color：边框颜色
简写  border:20px solid #44BEB3;
 外边框简写margin:2px 3px 4px 5px; 上右下左 1px 2px上下 左右
内边距简写padding:2px 3px 4px 5px; 上右下左 1px 2px上下 左右
照片框简写background:#颜色 url("")照片 no-repeat不重复 center居中
display:block块级元素 inline行内元素  none 隐藏元素 inline-bock行内块级元素
line-height:0px 行高 
<i> display: block;指定对象为块元素。

页面1点餐

华为手机页面