4.域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例

表单

用户名：

密码：

昵称：


你喜欢的水果有？


苹果
黄瓜
香蕉

请选择性别

男
女


请选择你要的网站


www.baidu.com
www.google.com
www.qq.com

www.baidu.com
www.google.com
www.qq.com
www.qq.com
www.qq.com
www.qq.com
www.qq.com

按钮

请填写个人信息


请填写信息



好人



坏人


地址信息
姓名：
密码：

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  8. <!--form表单-->
  9. <form>
  10.     用户名：
  11.     <!--文本域-->
  12.     <input type="text">
  13.     <br/>
  14.     密码：
  15.     <!--密码域-->
  16.     <input type="password">
  17.     昵称：<input placeholder="绰号"/>
  18.     <!--隐藏域-->
  19.     <br/>
  20.     你喜欢的水果有？
  21.     <!--checked设置初始为选中状态-->
  22.     <br/>
  23.     <input type="checkbox" checked="true">苹果
  24.     <input type="checkbox" checked="true">黄瓜
  25.     <input type="checkbox" checked="true">香蕉
  26.     <br/>
  27.     请选择性别
  28.     <!--单选框以后标记的选中状态为准-->
  29.     <input type="radio" name="sex" checked="true">男
  30.     <input type="radio" name="sex" checked="true">女
  31.     <br/>
  32.     <!--下拉列表-->
  33.     请选择你要的网站
  34.     <!-- 下拉选项框 -->
  35.     <!--******** multiple是设置下拉菜单是否有滚动条 *******-->
  36.     <!-- option是具体的选项 -->
  37.     <select name="123" id="234">
  38.         <option value="1">www.baidu.com</option>
  39.         <option value="2">www.google.com</option>
  40.         <option value="3">www.qq.com</option>
  41.     </select>
  42.     <br/>
  43.     <select name="123" id="254"multiple="true">
  44.         <option value="1">www.baidu.com</option>
  45.         <option value="2">www.google.com</option>
  46.         <option value="3">www.qq.com</option>
  47.         <option value="3">www.qq.com</option>
  48.         <option value="3">www.qq.com</option>
  49.         <option value="3">www.qq.com</option>
  50.         <option value="3">www.qq.com</option>
  51.     </select>
  52.     <br/>
  53.     按钮
  54.     <input type="button" value="按钮">
  55.     <input type="submit" value="确定">
  56.     <input type="reset">
  57.     <!--重置域里面的文件-->
  58.     <input type="file">
  59.     <!--文件-->
  60. </form>
  62. <textarea name="333" id="222" cols="20" rows="10">请填写个人信息</textarea>
  63. <!--可以拖拽的文本域-->
  64. <!-- 文本域展示  rows是现实多少行  cols是现实多少列  readonly是设置只读不能写入-->
  65. <textarea rows="10" cols="70" readonly>请填写信息</textarea>
  66. <input type="radio" name="people" id="goodpeople"/>
  67. <label for="goodpeople">好人</label>
  68. <input type="radio" name="people" id="badpeople"/>
  69. <label for="badpeople">坏人</label>
  70. <br/><br/><br/><br/>
  71. <!--************鼠标放到字上面就可以点击************-->
  73. <!-- 控件分组展示  field是域的意思，set是集合的意思 -->
  74. <fieldset>
  75.     <legend>地址信息</legend>
  76.     姓名：<input/> <br/>
  77.     密码：<input type="password"/>
  78. </fieldset>
  79. </body>
  80. </html>

5.CSS学习选择器案例

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7.     <style type="text/css">
  8.         [title]{
  9.             /*属性选择器*/
  10.             color: brown;
  11.         }
  12.         [title=te]{
  13.             /*属性选择器加值选择器*/
  14.             color: cadetblue;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <h1>
  20.     应用了样式表
  21. </h1>
  22. <h2>样式2</h2>
  23. <h3>样式3</h3>
  25. <p><strong>这个样式引用strong派生选择器</strong></p>
  26. <ul>
  27.     <li>
  28.         <strong>这个会被li strong派生选择器选择</strong>
  29.     </li>
  30. </ul>
  31. <div id="pid"><p>这个会引用ID选择器</p></div>
  32. <p id="ppd">这个会使用id选择器<a href="http://www.baidu.com">这个会使用派生选择器</a></p>
  33. <p class="pclass">这个会引用类选择器</p>
  34. <p class="pclass">这个会使用类选择器<a href="http://www.baidu.com">这个会使用派生选择器</a></p>
  35. <p title="p">属性选择器引用 为指明值的可以随便写</p>
  36. <p title="te">属性选择器引用 指明值的如果写的不一样就执行没指明值的选择器</p>
  37. <p title="te1">属性选择器引用 指明值的如果写的不一样就执行没指明值的选择器</p>
  38. <p id="p1">
  39.     拯救大兵瑞恩
  40.     <span>白蛇传<span>独立宣言</span></span>
  41. </p>
  43. <p>拯救大兵<span>白蛇传<span>肚子大了</span></span></p>
  44. </body>
  45. </html>

css代码（tzy.css）

  1. h2,h1{
  2.     /*选择器分组*/
  3.     color: blue;
  4.     font-family: 楷体;
  5.     font-size: 50px;
  6. }
  7. body{
  8.     /*没有定义样式的就会引用BODY里的样式（可以理解为继承）*/
  9.     color: aqua;
  10. }
  11. li strong{
  12.     /*派生选择器*/
  13.     color: bisque;
  14. }
  15. strong{
  16.     /*派生选择器*/
  17.     color: #FF00FF;
  18. }
  19. p span span{
  20.     /*派生选择器*/
  21.     font-family:"楷体";
  22. }
  23. #p{
  24.     /*id选择器用#使用*/
  25.     color: aquamarine;
  26. }
  27. #ppd a{
  28.     /*id选择器和派生选择器一起使用*/
  29.     color: blueviolet;
  30. }
  31. .pclass{
  32.     /*类选择器用.使用*/
  33.     color: darkgreen;
  34. }
  35. .pclass a{
  36.     /*类选择器和派生选择器一起使用*/
  37.     color: blue;
  38. }

6.CSS背景样式案例



HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>样式</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7. </head>
  8. <body>
  9. <p>测试能否被继承</p>
  10. <h2>啦啦啦啦啦啦啦啦</h2>
  11. <p>测试能否被继承</p>
  12. <p>测试能否被继承</p>
  13. <p>测试能否被继承</p>
  14. <p>测试能否被继承</p>
  15. <p>测试能否被继承</p>
  16. <p>测试能否被继承</p>
  17. <p>测试能否被继承</p>
  18. <p>测试能否被继承</p>
  19. <p>测试能否被继承</p>
  20. <p>测试能否被继承</p>
  21. <p>测试能否被继承</p>
  22. <p>测试能否被继承</p>
  23. <p>测试能否被继承</p>
  24. <p>测试能否被继承</p>
  25. <p>测试能否被继承</p>
  26. <p>测试能否被继承</p>
  27. <p>测试能否被继承</p>
  28. <p>测试能否被继承</p>
  29. <p>测试能否被继承</p>
  30. <p>测试能否被继承</p>
  31. <p>测试能否被继承</p>
  32. <p>测试能否被继承</p>
  33. <p>测试能否被继承</p>
  34. <p>测试能否被继承</p>
  35. </body>
  36. </html>

css代码(tzy.css)

  1. body {
  2.     background: blue;
  3.     /*背景颜色,不能被继承*/
  4.     background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
  5.     /*设置图片*/
  6.     width: 900px;
  7.     height: 900px;
  8.     background-size: 500px 500px;
  9.     /*设置图片大小*/
  10.     background-repeat: no-repeat;
  11.     /*设置图片不允许重复*/
  12.     background-attachment: fixed;
  13.     /*设置滚动页面的时候图片不滚动*/
  15. }
  17. p {
  18.     width: 150px;
  19.     height: 20px;
  20.     background: red;
  21. }
  23. h2 {
  24.     background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
  25.     /*设置图片*/
  27.     background-repeat: repeat;
  28.     /*设置图片允许重复(默认)*/
  29.     background-repeat: repeat-x;
  30.     /*设置图片X轴可以重复*/
  31.     background-repeat: repeat-y;
  32.     /*设置图片y轴可以重复*/
  33.     background-repeat: no-repeat;
  34.     /*设置图片不允许重复*/
  35.     background-position: right center;
  36.     /*设置图片起始位置可以写入 100px 100px*/
  38. }

7. CSS文本及字体及连接及列表(a标签使用及缩进)









HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文本及字体及连接及列表</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7. </head>
  8. <body>
  9. <p style="color: brown;text-align: center">hello tzy</p>
  10. <!--颜色 居中-->
  11. <h1>静夜思</h1>
  12. <p>床前明月光</p>
  13. <p>疑是地上霜</p>
  14. <p>床前明月光</p>
  15. <p>疑是地上霜</p>
  16. <p id="p1">this is web page</p>
  17. <p id="p2">This is wEb pAge</p>
  18. <p id="p3">tHis is wEb page</p>
  19. <p id="p4">this is web page</p>
  20. <p class="p5">测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  21. <p class="p5">this is web pagethis is web pagethis is web pagethis is web pagethis is web pagethis is web page</p>
  22. <p style="font-family: fantasy;font-size: 40px">拉拉</p>
  23. <a href="http://www.baidu.com">测试a标签百度</a>
  24. <p>看一看效果</p>
  25. <ul>
  26.     <li>苹果</li>
  27.     <li>苹果</li>
  28.     <li>苹果</li>
  29.     <li>苹果</li>
  30.     <li>苹果</li>
  31. </ul>
  32. <p>看一看效果</p>
  33. <ul class="ul1">
  34.     <li>苹果</li>
  35.     <li>苹果</li>
  36.     <li>苹果</li>
  37.     <li>苹果</li>
  38.     <li>苹果</li>
  39. </ul>
  40. <p>看一看效果</p>
  41. <ul clas="ul2">
  42.     <li>苹果</li>
  43.     <li>苹果</li>
  44.     <li>苹果</li>
  45.     <li>苹果</li>
  46.     <li>苹果</li>
  47. </ul>
  49. </body>
  50. </html>

css代码(tzy.css)

  1. h1 {
  2.     text-indent: -2em;
  3.     /*首行退进2字符*/
  4.     padding: 2em;
  5.     /*首行缩进2字符*/
  6. }
  8. p {
  9.     padding: 2em;
  10. }
  12. #p1 {
  13.     text-transform: capitalize;
  14.     /*首字母大写*/
  15. }
  17. #p2 {
  18.     text-transform: lowercase;
  19.     /*全部小写*/
  20. }
  22. #p3 {
  23.     text-transform: uppercase;
  24.     /*全部大写*/
  25. }
  27. #p4 {
  28.     /*阴影效果  居左  居上  清晰度小清 颜色*/
  29.     text-shadow: 20px 20px 0px #FF00FF;
  30. }
  32. .p5 {
  33.     width: 40px;
  34.     text-wrap: normal;
  35.     /*自动换行 不会拆分英文*/
  36. }
  37. /*@font-face {*/
  38. /*font-family: myfont;*/
  39. /*src: url(字体地址);*/
  40. /*}*/
  41. /*div{*/
  42. /*font-family: myfont;*/
  43. /*引用自己的下载的字体,用户可以直接使用，安全性还需改进*/
  44. /*}*/
  45. a:link{
  46.     color: red;
  47.     /*未被点击*/
  48.     text-decoration: none;
  49.     /*取消下划线*/
  50. }
  51. a:visited{
  52.     color: blue;
  53.     /*已被点击*/
  54. }
  55. a:hover{
  56.     color: darkgreen;
  57.     /*鼠标划过*/
  58. }
  59. a:active{
  60.     /*正在点击*/
  61.     color: aqua;
  62.     font-size:80px;
  63.     /* 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
  65.     提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。*/
  67. }
  69. ul li{
  70.     /*list-style-type: georgian;*/
  71.     /*//修改li前的标记图片*/
  72.     list-style-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976310558&di=4a7378a8e142317c61a6e16bb2f02ee7&imgtype=0&src=http%3A%2F%2Fimg.90sjimg.com%2Finspiration%2F03%2F98%2F74%2F62%2F70%2Fs_236_cl3486OMaFk6pRgdPO43.gif");
  73.     /*设置li图片*/
  74. }
  76. .ul1{
  77.     list-style-position: inside;
  78.     /*离屏幕左边远一点*/
  79. }
  80. .ul2{
  81.     list-style-position: outside;
  82.     /*离左边屏幕近一些*/
  83. }

8. CSS表格及轮廓案例



HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格及轮廓</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7. </head>
  8. <body>
  9. <table id="tb">
  10.     <tr class="alt">
  11.         <th>姓名</th>
  12.         <th>年龄</th>
  13.         <th>性别</th>
  14.     </tr>
  15.     <tr>
  16.         <td>小王</td>
  17.         <td>15</td>
  18.         <td>男</td>
  19.     </tr>
  20.     <tr class="alt">
  21.         <td>小王</td>
  22.         <td>15</td>
  23.         <td>男</td>
  24.     </tr>
  25.     <tr>
  26.         <td>小王</td>
  27.         <td>15</td>
  28.         <td>男</td>
  29.     </tr>
  30. </table>
  31. <br/>
  32. <table id="tb1">
  33.     <tr>
  34.         <th>姓名</th>
  35.         <th>年龄</th>
  36.         <th>性别</th>
  37.     </tr>
  38.     <tr>
  39.         <td>小王</td>
  40.         <td>15</td>
  41.         <td>男</td>
  42.     </tr>
  43.     <tr>
  44.         <td>小王</td>
  45.         <td>15</td>
  46.         <td>男</td>
  47.     </tr>
  48.     <tr>
  49.         <td>小王</td>
  50.         <td>15</td>
  51.         <td>男</td>
  52.     </tr>
  53. </table>
  54. <br/>
  55. <br/>
  56. <p style="outline-style: groove;outline-width: 1px">文字效果实心框</p>
  57. <br/>
  58. <br/>
  59. <p style="outline-style: double;outline-width: 20px">文字效果双虚线框</p>
  60. </body>
  61. </html>

css代码(tzy.css)

  1. #tb, tb1, tr, th, td {
  2.     border: 5px solid blue;
  3.     /*加边框*/
  4.     padding: 5px;
  5.     /*内边距*/
  6. }
  8. #tb1 {
  9.     border-collapse: collapse;
  10.     /*合并边框*/
  11.     width: 500px;
  12.     height: 500px;
  13.     text-align: center;
  14.     background-color: aqua;
  15. }

9.iframe引用页面按列(针对target打开方式解释)



HTML代码1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FrameA</title>
  6. </head>
  7. <body bgcolor="#a52a2a">
  8. FrameA
  9. <a href="http://www.baidu.com" target="_top">顶级页面打开</a>
  10. <a href="http://www.baidu.com" target="_parent">上级页面打开</a>
  11. <a href="http://www.baidu.com" target="_self">本身页面打开</a>
  12. <a href="http://www.baidu.com" target="_blank">新开页面打开</a>
  13. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  14. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  15. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  16. </body>
  17. </html>



HTML代码2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FrameB</title>
  6. </head>
  7. <body bgcolor="#5f9ea0">
  8. FrameB
  9. <br/>
  10. <iframe src="framea.html" width="400px"height="400px"></iframe>
  11. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  12. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  13. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  14. </body>
  15. </html>



HTML代码3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FrameC</title>
  6. </head>
  7. <body bgcolor="blue">
  8. FrameC
  9. <br/>
  10. <iframe src="frameb.html" width="600px" height="600px"></iframe>
  11. </body>
  12. </html>



HTML代码4

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内联框架</title>
  6. </head>
  8. <iframe src="framec.html" frameborder="0" width="800px" height="800px">
  9.     <!--frameborder="0"去掉边框-->
  10. </iframe>
  12. </html>

10. w3sCss盒子模型（阴影）（div的一些使用）





HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>W3sCSS盒子模型</title>
  6.     <!--其实就是div加css样式设计出一些逻辑页面-->
  7.     <link rel="stylesheet" href="tzy.css" type="text/css">
  8. </head>
  9. <body style="margin: 0px">
  10. <!--取消身体外层的外边框-->
  11. <img src="http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/o_8L7BYYH7PD%606Z@3F4X]2V8H.png" alt="盒子模型图片">
  12. <!--padding设置所有内边距————padding-botton设置内低边距--left设置内左边距-->
  13. <!--right设置内右边距————top设置内上边距-->
  14. <table border="1" cellpadding="100px"cellspacing="10">
  15.     <tr>
  16.         <td>0</td>
  17.     </tr>
  18. </table>
  19. <table border="1">
  20.     <tr>
  21.         <td id="td1">1</td>
  22.     </tr>
  23. </table>
  24. <table border="1">
  25.     <tr>
  26.         <td id="td2">2</td>
  27.     </tr>
  28. </table>
  29. <table border="1">
  30.     <tr>
  31.         <td id="td3">3</td>
  32.     </tr>
  33. </table>
  34. <table border="1">
  35.     <tr>
  36.         <td id="td4">4</td>
  37.     </tr>
  38. </table>
  39. <p>边框效果</p>
  40. <div class="tzy">阴影效果</div>
  41. <div class="ttzy">外边距</div>
  43. <div class="container">
  44.     <div class="bd">
  45.         <div class="pd">
  46.             <div class="content">Hello</div>
  47.         </div>
  48.     </div>
  49. </div>
  51. </body>
  52. </html>

css代码(tzy.css)

  1. #td1{
  2.     padding-bottom: 100px;
  3. }
  4. #td2{
  5.     padding-left: 100px;
  6. }
  7. #td3{
  8.     padding-right: 100px;
  9. }
  10. #td4{
  11.     padding-top: 100px;
  12. }
  13. p{
  14.     border-style: double;
  15.     border-top-style: solid;
  16.     border-bottom-style: hidden;
  17.     border-left-style: dotted;
  18.     border-right-color: aqua;
  19.     border-bottom-width: 10px;
  20.     /*border-style 定义了10个不同的非继承的样式边框包括none（空）*/
  21.     /*单边加上下左右就可以设置*/
  22.     /*border-width边框宽度*/
  23.     /*单边加上下左右就可以设置*/
  24.     /*border-color边框颜色 */
  25.     /*单边加上下左右就可以设置*/
  26.     border-radius:50px;
  27.     width: 100px;
  28.     height: 50px;
  29.     /*设置圆角  边框四角弧度*/
  30.     background-color: bisque;
  31.     text-align: center;
  32.     /*border: 2px solid blue;*/
  33.     /*一般设置方法*/
  34. }
  35. .tzy{
  36.     color: blue;
  37.     background-color: aqua;
  38.     width: 100px;
  39.     height: 100px;
  40.     text-align: center;
  41.     box-shadow: 10px 10px 15px #FF00FF;
  42.     /*阴影效果*/
  43. }
  44. .ttzy{
  45.     background-color: bisque;
  46.     width: 100px;
  47.     height: 100px;
  48.     margin: 100px;
  49.     /*margin居上和左为100PX margin也有上下左右属性*/
  50. }
  51. .container{
  52.     /*外边框*/
  53.     margin: 100px;
  54. }
  55. .bd{
  56.     /*边框*/
  57.     border-style: double;
  58. }
  59. .pd{
  60.     /*内边距*/
  61.     padding: 100px;
  62. }
  63. .content{
  64.     background-color: #FF00FF;
  65. }

11. w3cCss盒子模型应用案例（div布局）

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7. </head>
  8. <body>
  9. <div class="top">
  10.     <div class="top_content">
  11.     </div>
  12.     <div class="body">
  13.         <div class="body_img"></div>
  14.         <div class="body_content">
  15.             <div class="body_no"></div>
  16.         </div>
  17.     </div>
  18.     <div class="footing">
  19.         <div class="footing_content"></div>
  20.         <div class="footing_subnav"></div>
  21.     </div>
  22. </div>
  23. </body>
  24. </html>

css代码(tzy.css)

  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  6. .top {
  7.     width: 100%;
  8.     height: 50px;
  9.     background-color: antiquewhite;
  10. }
  12. .top_content {
  13.     width: 75%;
  14.     height: 50px;
  15.     margin: 0px auto;
  16.     /*上下为0，左右自适应*/
  17.     background-color: aqua;
  18. }
  20. .body {
  21.     margin: 20px auto;
  22.     width: 75%;
  23.     height: 1500px;
  24.     background-color: aquamarine;
  25. }
  27. .body_img {
  28.     width: 100%;
  29.     height: 400px;
  30.     background-color: beige;
  31.     background-image: url(http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/t_8L7BYYH7PD%606Z@3F4X]2V8H.png);
  32. }
  34. .body_content {
  35.     width: 100%;
  36.     height: 1100px;
  37.     background-color: chartreuse;
  38. }
  40. .body_no {
  41.     width: 100%;
  42.     height: 50px;
  43.     background-color: coral;
  44. }
  46. .footing {
  47.     width: 75%;
  48.     height: 400px;
  49.     background-color: darkblue;
  50.     margin: 0px auto;
  51. }
  52. .footing_content{
  53.     width: 100%;
  54.     height: 350px;
  55.     background-color: forestgreen;
  56. }
  57. .footing_subnav{
  58.     width: 100%;
  59.     height: 50px;
  60.     background-color: mediumturquoise;
  61. }

12. HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移



HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS定位（静态，相对，固定，绝对布局）小广告案例</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7. </head>
  8. <body>
  9. <div id="position1"></div>
  10. <script>
  11.     for(var i=0;i<10;i++){
  12.         document.write(i+"<br/>");
  13.     }
  14. </script>
  15. <div id="position2"></div>
  16. <script>
  17.     for(var i=10;i<20;i++){
  18.         document.write(i+"<br/>");
  19.     }
  20. </script>
  21. <div id="position3"></div>
  22. <script>
  23.     for(var i=20;i<50;i++){
  24.         document.write(i+"<br/>");
  25.     }
  26. </script>
  27. <br/><br/><br/><br/><br/>
  28. <div id="position4"></div>
  29. <script>
  30.     for(var i=30;i>0;i--){
  31.         document.write(i+"<br/>");
  32.     }
  33. </script>
  35. <div id="position5"></div>
  36. <div id="position6"></div>
  37. </body>
  38. </html>

css代码(tzy.css)

  1. #position1{
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: mediumturquoise;
  5.     position: relative;
  6.     /*相对布局(无变化)*/
  7.     left:2px;
  8.     /*向左偏移*/
  10. }
  11. #position2{
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: mediumturquoise;
  15.     position: absolute;
  16.     /*绝对布局(无变化)*/
  17.     left:10px;
  18.     /*向左偏移*/
  19. }
  20. #position3{
  21.     width: 100px;
  22.     height: 100px;
  23.     background-color: forestgreen;
  24.     position: fixed;
  25.     /*固定布局(无变化)*/
  26.     z-index: 2;
  27.     /*值大的更靠近用户*/
  28. }
  29. #position4{
  30.     width: 100px;
  31.     height: 100px;
  32.     background-color: mediumturquoise;
  33.     position: static;
  34.     /*静态布局(无变化)*/
  35.     right: 100px;
  36.     /*向右偏移100px*/
  37.     left:20px;
  38.     /*向右偏移*/
  39.     /*偏移无用*/
  40. }
  41. #position5{
  42.     width: 100px;
  43.     height: 100px;
  44.     background-color: mediumturquoise;
  45.     position: relative;
  46.     /*相对布局(无变化)*/
  47.     top: 20px;
  48.     /*向上偏移100px*/
  49.     left:20px;
  50.     /*向左偏移*/
  51.     z-index: 2;
  52.     /*值大的更靠近用户*/
  53. }
  54. #position6{
  55.     width: 100px;
  56.     height: 100px;
  57.     background-color: coral;
  58.     position: relative;
  59.     /*相对布局(无变化)*/
  60.     left:10px;
  61.     /*向左偏移*/
  62.     z-index: 1;
  63.     /*值大的更靠近用户*/
  64. }
  65. /*静态无法被控制 其他的都可以*/

13. css定位浮动及瀑布流案例



HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>浮动</title>
  6.     <link rel="stylesheet" href="tzy.css"type="text/css">
  7. </head>
  8. <body>
  10. <div id="container">
  11.     <div id="fd">fd</div>
  12.     <div id="sd">sd</div>
  13.     <div id="td">td</div>
  14.     hello word
  15.     helloword
  16.     <div id="text">text</div>
  17. </div>
  18. <!--瀑布流图片大小要一样-->
  19. <div id="div1">
  20.     <ul>
  21.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="1"></li>
  22.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="2"></li>
  23.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="3"></li>
  24.     </ul>
  25.     <ul>
  26.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="4"></li>
  27.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="5"></li>
  28.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="6"></li>
  29.     </ul>
  30.     <ul>
  31.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="7"></li>
  32.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="8"></li>
  33.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="9"></li>
  34.     </ul>
  35. </div>
  37. </body>
  38. </html>

css代码(tzy.css)

  1. #fd {
  2.     width: 100px;
  3.     height: 150px;
  4.     background-color: forestgreen;
  5.     float: left;
  6. }
  8. #sd {
  9.     width: 150px;
  10.     height: 100px;
  11.     background-color: coral;
  12.     float: left;
  13. }
  15. #td {
  16.     width: 100px;
  17.     height: 100px;
  18.     background-color: chartreuse;
  19.     float: left;
  20. }
  22. #container {
  23.     width: 300px;
  24.     height: 500px;
  25.     background-color: beige;
  26. }
  28. #text {
  29.     clear: both;
  30.     /*去掉浮动*/
  31. }
  33. * {
  34.     margin: 0px;
  35.     padding: 0px;
  36. }
  38. li {
  39.     list-style: none;
  40. }
  42. #div1 {
  43.     width: 100%;
  44.     height: auto;
  45.     margin: 20px auto;
  46. }
  47. ul{
  48.     width: 250px;
  49.     float: left;
  50. }

14. cs2D3D展示基础



HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动画</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7. </head>
  8. <body>
  9. <div>初始效果div1</div>
  10. <br/>
  11. <div class="div2">展示div2</div>
  12. <br/>
  13. <div class="div3">展示div3</div>
  14. <br/>
  15. <div class="div4">展示div4</div>
  16. <br/>
  17. <div class="div5">展示div5</div>
  18. <br/>
  19. <div class="div6">展示div6</div>
  20. <br/>
  21. <div class="div7">展示div7</div>
  22. <br/>
  23. <div class="div8">展示div8</div>
  24. </body>
  25. </html>

css代码(tzy.css)

  1. div{
  2.     width:100px;
  3.     height:100px;
  4.     background-color: deepskyblue;
  5.     border: double;
  6.     margin: 30px;
  7. }
  8. .div2{
  9.     /*移动*/
  10.     transform: translate(200px,100px);/*现在chrome有效果*/
  11.     -webkit-transform: translate(200px,100px);/*safari chrome*/
  12.     -ms-transform: translate(200px,100px);/*IE*/
  13.     -o-transform: translate(200px,100px);/*opera*/
  14.     -moz-transform: translate(200px,100px);/*Firefox*/
  15. }
  17. .div3{
  18.     /*旋转 */
  19.     -webkit-transform: rotate(200deg);
  20.     -moz-transform: rotate(200deg);
  21.     -ms-transform: rotate(200deg);
  22.     -o-transform: rotate(200deg);
  23.     transform: rotate(200deg);
  24. }
  26. .div4{
  27.     /*缩放(宽度，高度)倍数*/
  28.     -webkit-transform: scale(1,2);
  29.     -moz-transform: scale(1,2);
  30.     -ms-transform: scale(1,2);
  31.     -o-transform: scale(1,2);
  32.     transform: scale(1,2);
  33. }
  34. .div5{
  35.     /*倾斜度数下x,y轴*/
  36.     -webkit-transform: skew(20deg,50deg);
  37.     -moz-transform: skew(20deg,50deg);
  38.     -ms-transform: skew(20deg,50deg);
  39.     -o-transform: skew(20deg,50deg);
  40.     transform: skew(20deg,50deg);
  41. }
  42. .div6{
  43.     /*矩阵(利用矩阵算出偏移量)http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/*/
  44.     -webkit-transform: matrix(1, 0, 0, 1, 200, 100);
  45.     -moz-transform: matrix(1, 0, 0, 1, 200, 100);
  46.     -ms-transform: matrix(1, 0, 0, 1, 200, 100);
  47.     -o-transform: matrix(1, 0, 0, 1, 200, 100);
  48.     transform: matrix(1, 0, 0, 1, 200, 100);
  49. }
  50. .div7{
  51.     /*3d转换*/
  52.     -webkit-transform: rotateX(120deg);
  53.     -moz-transform: rotateX(120deg);
  54.     -ms-transform: rotateX(120deg);
  55.     -o-transform: rotateX(120deg);
  56.     transform: rotateX(120deg);
  57. }
  58. .div8{
  59.     /*3d转换*/
  60.     -webkit-transform: rotateY(120deg);
  61.     -moz-transform: rotateY(120deg);
  62.     -ms-transform: rotateY(120deg);
  63.     -o-transform: rotateY(120deg);
  64.     transform: rotateY(120deg);
  65. }

15. cs动画基础（分列效果可用于做瀑布流）



HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动画、分列、过度</title>
  6.     <link rel="stylesheet" href="tzy.css" type="text/css">
  7.     <style>
  8.         .div0{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: forestgreen;
  12.             position: relative;
  13.             -webkit-animation: anima 5s infinite alternate;
  14.             /*animation 动画效果 infinite无限   alternate交替*/
  15.             -o-animation: anima 5s infinite alternate;
  16.             animation: anima 5s infinite alternate;
  17.         }
  18.         @keyframes anima{
  19.             0%{background: #000;  left: 0px;  top: 0px;}
  20.             25%{background: firebrick;  left: 200px;  top: 0px;}
  21.             50%{background: fuchsia;  left: 200px;  top: 200px;}
  22.             75%{background: cornflowerblue;  left: 0px;  top: 200px;}
  23.             100%{background: #000000;  left: 0px;  top: 0px;}
  24.         }
  25.         @-webkit-keyframes anima {
  26.             0%{background: #000;  left: 0px;  top: 0px;}
  27.             25%{background: firebrick;  left: 200px;  top: 0px;}
  28.             50%{background: fuchsia;  left: 200px;  top: 200px;}
  29.             75%{background: cornflowerblue;  left: 0px;  top: 200px;}
  30.             100%{background: #000000;  left: 0px;  top: 0px;}
  31.         }
  33.         .div1{
  34.             -webkit-column-count: 4;
  35.             column-count: 4;
  36.             /*分列数量*/
  37.             column-gap: 30px;
  38.             /*列距离*/
  39.             column-rule:5px outset #FF0000;
  40.             /*列颜色*/
  41.             -webkit-column-rule:5px outset #FF0000;
  42.         }
  43.         .div2{
  44.             width: 100px;
  45.             height: 100px;
  46.             background-color: deepskyblue;
  47.             -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  48.             transition: width 2s, height 2s, transform 2s;
  49.             transition-delay:2s;
  50.             /*过度延时时间*/
  51.         }
  52.         .div2:hover{
  53.             width: 200px;
  54.             height: 200px;
  55.             transform:rotate(360deg);
  56.             -webkit-transform:rotate(360deg);
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61. <div class="div0">动画效果</div>
  62. <div class="div1">分列效果
  63.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  64.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  65.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  66.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  67.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  68.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  69.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  70.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  71.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  72.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  73.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  74.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  75.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  76.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  77.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  78.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  79.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  80.     我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
  81. </div>
  82. <div class="div2">过度效果展示</div>
  84. </body>
  85. </html>

第一章 HTML+CSS(中)的更多相关文章

  1. 使用Micrisoft.net设计方案 第一章 企业解决方案中构建设计模式

    第一章企业解决方案中构建设计模式 我们知道的系统总是由简单到复杂,而不是直接去设计一个复杂系统.如果直接去设计一个复杂系统,结果最终会导致失败.在设计系统的时候,先设计一个能够正常工作的系统,然后在此 ...

  2. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  3. 第一章 Html+Css使用总结（下）

    1 开场 <!DOCTYPE html> <html lang="en"> <head> <!-- 对于中文网页需要使用 <meta ...

  4. windows核心编程---第一章 谈谈windows中的错误处理机制

        我们写的函数会用返回值表示程序执行的正确与否,使用void,就意味着程序一定不会出错.Bool类型标识true时为真,false时为假.其他类型根据需要可以定义成不同意义.       Win ...

  5. 第一章 HTML+CSS(上)

    HTML 网页的组成 HTML简介 HTML的语法 HTML的常用标签 HTML中的表格和表单 CSS的简单应用 我们这里使用WebStorm开发工具 配置浏览器 常用插件: CodeGlance 代 ...

  6. 第一章：eclipse 中修改字体大小和编码格式

    eclipse 中修改字体大小的步骤: 1. 在 eclipse 的工具栏中,找到 weindows 下面的 preferences 2. 在 preferences 的 输出 font ,在 Bas ...

  7. 第一章 用HTML5中的结构元素构建网站

    1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...

  8. 第一章 MYSQL的架构和历史

    在读第一章的过程中,整理出来了一些重要的概念. 锁粒度  表锁(服务器实现,忽略存储引擎). 行锁(存储引擎实现,服务器没有实现). 事务的ACID概念 原子性(要么全部成功,要么全部回滚). 一致性 ...

  9. 编写高质量代码：改善Java程序的151个建议（第一章：JAVA开发中通用的方法和准则）

    编写高质量代码:改善Java程序的151个建议(第一章:JAVA开发中通用的方法和准则) 目录 建议1: 不要在常量和变量中出现易混淆的字母 建议2: 莫让常量蜕变成变量 建议3: 三元操作符的类型务 ...

随机推荐

  1. 激活Pychram

    最近更新了Intellij IDEA到2018.1.5之后,使用之前的授权服务器(http://idea.imsxm.com)会提示Outdated License Server Detected,大 ...

  2. [术语] CRUD 增删改查

    Data Manipulation Language, DML 数据操纵语言Insert update delete CRUD :create read update delete

  3. vue 上拉加载自定义组件，超好用哦

    1.创建组件components > zj-roll > index.vue <template> <div> <slot></slot> ...

  4. React文档（十一）提升state

    经常有些组件需要映射同一个改变的数据.我们建议将共用的state提升至最近的同一个祖先元素.我们来看看这是怎样运作的. 在这一节中,我们会创建一个温度计算器来计算提供的水温是否足够沸腾. 我们先创建一 ...

  5. emacs初步学习

    一.安装扩展 安装web-mode.el扩展,本来试试打算试试格式化freemarker,另外一篇吐槽了freemarker,不用了. 这个emacs也花了点时间,稍微整理一下. 1.确定.emacs ...

  6. JavaScript 复杂判断的更优雅写法

    我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃 ...

  7. Linux获取so/ko文件版本号教程

    一.需要获取版本号的原因 从使用角度而言,有时只有特定版本的库才支持某些功能,所以我们需要确定库文件版本号. 从安全加固角度而言,有些版本存在漏洞有些版本不存在漏洞,所以我们需要获取版本号以确定当前使 ...

  8. Python多线程基本操作

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  9. labeled statement：标签语句

    foo: for (var i=0; i< 5; i++) { for (var j=0; j<5; j++) { if ( i == j ) { // 跳到 foo 的下一个循环 // ...

  10. Spring MVC 复习笔记05

    1. 上传图片 1.1 springmvc中对多部件类型解析 在 页面form中提交enctype="multipart/form-data"的数据时,需要springmvc对mu ...