html CSS笔记

<p align="center"内容</p>  内容居中             html备注  <!--备注-->
<p align="right"内容</p>   内容居右             html居中对齐          center
<title>  网页的名字 </title>                              html两端对齐          justify
<br>换行                                        html左对齐          left
<p></p>空一行换行  text-decoration: none;清除下划线    html右对齐           right
<b>加粗                                         <ul> <li> 项目列表
<i>倾斜                                         <ol> <li> 编号列表
<hr>创建水平线                                  <ol type="I">


<hr color="#FF0004" width="100" align="right" size="10" noshade>   线 颜色 宽度100 右对齐 粗细10 实心                                     float:left    左浮动
                                                  gloat：right  又浮动
&nbsp  添加空格符号     &copy添加版权符号        overfiow   设置溢出隐藏
                                                 
                                          border:20px solid #07FF3A;定义边框  和写属性


                            border-top:width style color;   上边框合写
                              margin         外边距
                              margin：auto； 块元素居中 
                              padding        内边距.
                              box-shadow:0 0 2px #ccc
                              vertical-align: middle;居中
display:none; 影藏元素（元素完整消失）
             
兄弟选择器
div~li                 box-shadow:0 1px 3px #666;阴影
相邻选择器  添加加号
div+li{ width:100px; height:100px;}


input:checker{ width:100px; height:100px;} 给按钮添加选中状态


background-size：100px 200px; 设置背景图片大小
设置时先给html  body设置宽高
background-size：cover; 设置背景图片铺满屏幕


li：nth-of-type(1)控制第一个li


display:block；将元素转化为块元素   比如a标签




 border-top-left-radius: 4px;设置上左边框圆角


<a href="#加名字"></a>


<a name="名字"></a>锚点


border  边框  
font-weight: bold;文字加粗
background-image: url(dot_01.gif); background-repeat: no-repeat; background-position: right bottom;
插入背景图片  不平铺  控制位置
background:url(bg1.jpg) #E9FBFF  no-repeat bottom right;}


dashed虚线           cellspacing单元格间距


solid实线


none清除


text-align: center;块元素居中


text-decoration: underline;下划线文本


 text-decoration: none;去除下划线


:last-child最后一个同级别元素
:first-child第一个同级别元素


 /* 全局样式*/   清除所有内外边距  清除列表前符号样式  清除图片样式


   *{ margin:0; padding:0;}             
    ol,ul{ list-style-type:none;}      
    img{ vertical-align:middle; border:none;} 
    a{ color: #6666; text-decoration: none;}
    input,button{border: none;}
    body{font-family: Arial,宋体;width:100%; height:100%;}
    html{width:100%; height:100%;}
     
                         




                              border-right: none;清除右边最后一根边框线
                              line-height： 设置行高  让图片垂直居中
                                
                              ol{ list-style-image:url(加图片地址)}




                                  vertical-align:middle


<a href="https://www.baidu.com/" target="_blank">百度</a>      添加百度链接
<a href="javascript:alert('哈哈  上当了')">点我看看</a>        链接到js弹出功能
<a href="#">返回顶部</a>                                       返回顶部的空标签
<a name="名字"></a>                                            添加锚点


                                          有序列表<ol>   无序列表   <ul>
                                           列表项 <li>


                                            自定义列表
                                             <dl>
                                             <dt>标题
                                             <dd>
                                            






                                             
块标签   <div><p><hn>
行内标签 <span><b><i>


<u>11111111111</u>                     <!--下划线-->
<strong>111111111111111</strong>       <!--强调加粗-->
^111111111                   <!--上标-->
<smail>1111111</smail>                 <!--小号文本字体-->
<blockquote>111111111</blockquote>     <!--长的引用文本-->    两端缩进
<s>11111111</s>                        <!--山出现-->
<em>11111111</em>                      <!--强调斜体-->
_1111111111                  <!--下标-->
<pre>1111111111</pre>                  <!--预格式化-->   可以保留空格
<q>111111111</q>                       <!--短的引用文本--
网站首页命名：   index.html


line-height:50px;   设置行高          text-decoration:line-through;   中间删除线


text-indent:2em;缩进2字符


text-transform:设置英文大小写




    a:link {
color: #323232;
text-decoration: none;       设置a标签
}
a:visited {
text-decoration: none;
color:aliceblue;
}
a:hover {
text-decoration: none;
color:brown;
}
a:active {
text-decoration: none;
color: #323232;
}






background-image:url( 图片地址)；添加背景图片


background-repeat：：


background-position:50px 100px;  给背景图片定位   第一个值设置水平方向 第二个设置垂直方向


background:颜色 插入图片 不平铺  控制位置    合写属性






表单
表单元素 form
acion：定义表单被提交时发生的动作
method：指出表单




账号框：<input type="text" placeholder="手机账号/邮箱登录">


密码框：<input type="password" placeholder="请输入密码">
<input type="checkbox">圆角框


checked默认选中




复选框
 爱好：吃<input type="checkbox" name="" value="chi">喝<input type="checkbox" name="" value="chi">玩<input type="checkbox" name="" value="chi">乐<input type="checkbox" name="" value="chi">


单选框
性别：男<input type="radio" name="sex" value="man">女<input type="radio" name="sex" value="woman">






按钮
<input type="submit" value="提交">       button
<input type="reset" value="重置">
<input type="button" value="普通按钮">


<input type="file" name="mingzi">文件


选项框
请选择您的学历： <select name="" id="">
       <option value="">请选择您的学历</option>
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="高中">高中</option>
        <option value="大学">大学</option>
        <option value="大学后">大学后</option>
         </select>


文本区域
<textarea>1111111111111111</textarea>




而两四列表格
<table width="728" border="1" cellspacing="0" cellpadding="0" align="center">
  <tbody>
    <tr>
      <td>&nbsp;</td>                   <select>
<option value="">中文(简体)</option>
<option value="">English</option>
</select>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>






相对定位：人走了 坑还在
position: relative;top: 200px;  像下移动两百px


绝对定位:最近的祖先元素为参考物
position: absolute;right: 200px; 


固定定位：针对浏览器定位
           fixed; right:  100px;




background-color: rgba(0,0,0,0.5);给背景颜色透明


text-transform:capitalize让文本每个单词首字母大写




网页设计网站     模版王


iframe   内部框架  将外部内容嵌入自身页内


<div><iframe src="http://player.youku.com/embed/XMTc2MjQ2Mjg5Ng==" frameborder="0" width="500" height="500" scrolling="no" name="play"></iframe></div>   插入视频    name="play"命名  target="play" 连接名字


<div><a href="http://wuxia.qq.com/" target="play">1</a></div> 








添加音频
<audio> 
插入视频
<video>     src:制定视频     autoplay：自动播放 controls:播放控制条 loop：循环播放  poster：播放前默认的图片








二级导航条
先做好一级导航条
做好一级导航条里的二级导航条  影藏
经过一级导航条显示二级导航条


在style里面塞入字符
dd:before{}
dd:after{ content:">"; float:right; margin-right:10px;}






动画效果
@keyframes color { 0%{ background-color:#FF0004; }
           { 25%{ background-color:#0034FF; }
 { 50%{ background-color:#00FFCB; }
 { 75%{ background-color:#E8FF00; }
 { 100%{ background-color:#FF0004; }
 }




 margin:0px auto;div的居中
overflow:hidden;超出部分隐藏
//
父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于
父容器的左上角。
opacity：0.5 变淡