博客列表 >《CSS基础》2019-12-20作业笔记

《CSS基础》2019-12-20作业笔记

杨凡的博客
杨凡的博客原创
2019年12月29日 23:08:01799浏览

表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>form</title>
  6. </head>
  7. <body>
  8. <h3>用户注册</h3>
  9. <!--表单 用户与网站数据交换的工具-->
  10. <form action="check.php" method="post">
  11. <p>
  12. <label for="username">账号:</label>
  13. <input type="text" name="username" id="username">
  14. </p>
  15. <p><label for="password">密码:</label>
  16. <input type="text" name="password" id="password">
  17. </p>
  18. <!--下拉列表 select option-->
  19. <p>
  20. <select name="level" id="">
  21. <option value="1">会员1</option>
  22. <option value="2">会员2</option>
  23. <option value="3">会员3</option>
  24. <option value="4">会员4</option>
  25. </select>
  26. </p>
  27. <p>
  28. <input type="hidden" name="user_id" value="101">
  29. </p>
  30. <!--单选框-->
  31. <p>
  32. <input type="radio" name="gender" id="male" checked><label for="male"></label>
  33. <input type="radio" name="gender" id="female"><label for="female"></label>
  34. </p>
  35. <!--复选框-->
  36. <p>
  37. <p>
  38. <label for="">爱好:</label>
  39. </p>
  40. <input type="checkbox" name="hobby[]" id="lq"><label for="lq">打篮球</label>
  41. <input type="checkbox" name="hobby[]" id="yy"><label for="yy">游泳</label>
  42. <input type="checkbox" name="hobby[]" id="ymq"><label for="ymq">羽毛球</label>
  43. </p>
  44. <p>
  45. <button>提交</button>
  46. </p>
  47. </form>
  48. </body>
  49. </html>
总结

1.action里面填写提交的php页面;method表单提交方式有get和post两种常用方式,get方式直接提交数据显示在url上,post通过表头提交方式隐藏提交
2.input标签,type属性text是编辑框、radio是单选框,要实现单选框效果还要设置name属性一致,checked默认选择项、checkbox是复选框,name属性需要设置成数组形式带[]。hidden隐藏域方式提交数据,页面不显示,提交的数据中显示内容
3.button按钮
4、账号密码放置在label标签并且label标签的for属性与input标签的id属性进行关联后,可以实现点击账号密码后光标定位在对应的编辑框内
5.把以上这些标签放置在p标签内后,可以实现换行效果,p标签将以上标签转化为了块级标签,效果是这样?
6.select下拉框option下拉框内容,两个标签组合使用,checked属性可以放置在option中设置默认选择项。

css基础

css: 层叠样式表,用于控制页面元素的样式及布局
页面元素类型:块元素、行内元素、行内块元素
display:控制页面元素的显示类型

  • display: block: 块元素, 独占一行, 垂直排列, 可设置宽高
  • display: inline: 行内元素, 共享一行, 水平排列, 不可设置宽高
  • display: inline-block:行内块元素, 共享一行,水平排列, 可设置宽高
    盒模型:
  • width: 宽度
  • height: 高度
  • padding: 内边距 默认透明,不能设置样式和颜色
  • border: 边框 不透明(粗细,样式,颜色)
  • margin: 外边距 默认透明,不能设置样式和颜色
    盒子大小计算:
    宽度=左margin+左border+左padding+width+右padding+右border+右margin
    高度=上margin+上border+上padding+height+下padding+下border+下margin
    参数设置顺序:上->右->下->左
    设置2到3个参数时第二个参数代表的左右
    padding影响盒子大小的属性撑开盒子宽高,我们可以用box-sizing重置盒子大小
    margin影响盒子位置的属性,margin-left / margin-right水平方向位置设置,auto可以设置自动居左、自动居中、自动居右
浮动

让元素飘起来呈现在文档布局的最上方,会影响文档布局
解决子元素浮动让父元素塌陷问题最简单的方法:overflow:hidden/auto

定位

position元素定位布局
我们默认的文档布局方式也叫静态定位:position: static
相对定位:元素相对于原来的位置进行定位positon: relative
绝对定位:positon: absolute
固定定位:总是相对于html进行定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>块元素的垂直居中</title>
  6. <style>
  7. .parent{
  8. width: 400px;
  9. height: 300px;
  10. background-color: lightgreen;
  11. position: relative;
  12. }
  13. .sub{
  14. width: 200px;
  15. height: 150px;
  16. background-color: lightcoral;
  17. margin: auto;
  18. /*1.将子元素转为定位元素*/
  19. position: absolute;
  20. /*2.子元素有宽高的限制,又是一个定位元素,与父元素之间有可以重新分配的空间*/
  21. top: 0;
  22. left: 0;
  23. bottom: 0;
  24. right: 0;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="parent">
  30. <div class="sub"></div>
  31. </div>
  32. </body>
  33. </html>

选择器

id>class>tag(标签)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>选择器</title>
  6. <style>
  7. /*标签选择器*/
  8. div{
  9. width: 300px;
  10. height: 300px;
  11. background-color: lightblue;
  12. }
  13. /*属性选择器*/
  14. /*.hello=div[class="hello"]*/
  15. /*类选择器*/
  16. .hello{
  17. background-color: lightgreen;
  18. }
  19. /*id选择器*/
  20. /*#php=div[id="php"]*/
  21. #php{
  22. background-color: lightcoral;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="hello" id="php"></div>
  28. </body>
  29. </html>

伪类位置选择器

first-of-type代表第一个
last-of-type代表最后一个
nth-of-type(3)选中第三个
nth-of-type(-n+2)选择前两个,n从0开始
nth-last-of-type(-n+2)选择最后两个

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪类位置选择器</title>
  6. <style>
  7. /*选中子元素空格后面跟标签名称*/
  8. /*nth-child() 与子元素的位置相关*/
  9. div :nth-child(2){
  10. background-color: yellow;
  11. }
  12. /*先创建分子,再根据位置选择*/
  13. div p:nth-of-type(2){
  14. background-color: green;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20. <p>今天天气不错</p>
  21. <h3>hello</h3>
  22. <p>php.cn</p>
  23. <p>php中文网</p>
  24. <h3>皮特猪</h3>
  25. </div>
  26. </body>
  27. </html>

作业实例

1、参考了老师素材库的字体图标引用方式
2、自己之前了解到的div及浮动的相关知识进行了浮动布局
3、上面学到的定位使用搜索图标定位到搜索框的位置,实际使用发现可能因为搜索框图标不是input的子元素,所以无法在上面进行定位,只是好像针对了div来进行定位,不知道我理解是否有偏差
4、搜索框后面的图标设置了内边距来撑开相互之间位置
5、ul使用行内元素来设置与span同一行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>1220实例</title>
  6. <link rel="stylesheet" href="CSS/CSS.css">
  7. <link rel="stylesheet" href="font/demo.css">
  8. <link rel="stylesheet" href="font/iconfont.css">
  9. <style>
  10. .big-box{
  11. width: 1280px;
  12. height: 600px;
  13. margin: auto;
  14. }
  15. .top-left{
  16. float: left;
  17. }
  18. .top-right{
  19. float: right;
  20. }
  21. .top-right-l{
  22. float: left;
  23. position: relative;
  24. padding: 20px;
  25. }
  26. .sousuo{
  27. width: 440px;
  28. height: 45px;
  29. border:1px solid #999999;
  30. border-radius: 10px;
  31. }
  32. #sousuo-l{
  33. font-size: 35px;
  34. position: absolute;
  35. top: 25px;
  36. left: 420px;
  37. }
  38. #sousuo-r-1{
  39. padding: 5px;
  40. font-size: 40px;
  41. }
  42. #sousuo-r-2{
  43. padding: 5px;
  44. font-size: 40px;
  45. }
  46. #sousuo-r-3{
  47. padding: 5px;
  48. font-size: 40px;
  49. }
  50. #sousuo-r-4{
  51. padding: 5px;
  52. font-size: 40px;
  53. }
  54. #sousuo-r-5{
  55. padding: 5px;
  56. font-size: 40px;
  57. }
  58. #sousuo-r-6{
  59. padding: 5px;
  60. font-size: 40px;
  61. }
  62. .top-right-r{
  63. float: right;
  64. padding: 20px;
  65. }
  66. .clear{
  67. clear: both;
  68. }
  69. ul{
  70. list-style:none;
  71. display:inline-block;
  72. padding: 5px;
  73. }
  74. .tubiao{
  75. font-size: 50px;
  76. color: red;
  77. }
  78. .shuxian{
  79. display:inline-block;
  80. height: 50px;
  81. border-left: solid 1px #999999;
  82. }
  83. .kongge{
  84. display:inline-block;
  85. margin-left: 10px;
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <div class="big-box">
  91. <div class="top">
  92. <div class="top-left">
  93. <img src="static/images/logo.png" alt="">
  94. </div>
  95. <div class="top-right">
  96. <div class="top-right-l">
  97. <input type="text" class="sousuo">
  98. <span class="iconfont" id="sousuo-l">&#xe782;</span>
  99. </div>
  100. <div class="top-right-r">
  101. <span class="iconfont" id="sousuo-r-1">&#xe629;</span>
  102. <span class="iconfont" id="sousuo-r-2">&#xe61b;</span>
  103. <span class="iconfont" id="sousuo-r-3">&#xec0a;</span>
  104. <span class="iconfont" id="sousuo-r-4">&#xec14;</span>
  105. <span class="iconfont" id="sousuo-r-5">&#xe60e;</span>
  106. <span class="iconfont" id="sousuo-r-6">&#xec80;</span>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="clear"></div>
  111. <div class="nav">
  112. <div>
  113. <span class="iconfont tubiao">&#xec39;</span>
  114. <ul>
  115. <li>咨询</li>
  116. <li>学习</li>
  117. </ul>
  118. <div class="shuxian"></div>
  119. <ul>
  120. <li>器材</li>
  121. <li>大赛</li>
  122. </ul>
  123. <ul>
  124. <li>大师</li>
  125. <li>裤子</li>
  126. </ul>
  127. <ul>
  128. <li>学院</li>
  129. <li>影视</li>
  130. </ul>
  131. <ul>
  132. <li>实战</li>
  133. <li>其他</li>
  134. </ul>
  135. <div class="kongge"></div>
  136. <span class="iconfont tubiao">&#xec36;</span>
  137. <ul>
  138. <li>爱好</li>
  139. <li>姐妹</li>
  140. </ul>
  141. <div class="shuxian"></div>
  142. <ul>
  143. <li>有品</li>
  144. <li>坦克</li>
  145. </ul>
  146. <ul>
  147. <li>图片</li>
  148. <li>气球</li>
  149. </ul>
  150. <ul>
  151. <li>喝水</li>
  152. <li>毛线</li>
  153. </ul>
  154. <ul>
  155. <li>飞机</li>
  156. <li>其他</li>
  157. </ul>
  158. <div class="kongge"></div>
  159. <span class="iconfont tubiao">&#xec39;</span>
  160. <ul>
  161. <li>软件</li>
  162. <li>技能</li>
  163. </ul>
  164. <div class="shuxian"></div>
  165. <ul>
  166. <li>学习</li>
  167. <li>富强</li>
  168. </ul>
  169. <ul>
  170. <li>爱国</li>
  171. <li>互助</li>
  172. </ul>
  173. <ul>
  174. <li>敬业</li>
  175. <li>仁义</li>
  176. </ul>
  177. <ul>
  178. <li>友善</li>
  179. <li>其他</li>
  180. </ul>
  181. <div class="kongge"></div>
  182. <span class="iconfont tubiao">&#xec1b;</span>
  183. <ul>
  184. <li>编程</li>
  185. <li>美女</li>
  186. </ul>
  187. <div class="shuxian"></div>
  188. <ul>
  189. <li>吃饭</li>
  190. <li>上海</li>
  191. </ul>
  192. <ul>
  193. <li>周易</li>
  194. <li>杭州</li>
  195. </ul>
  196. <ul>
  197. <li>黄山</li>
  198. <li>北京</li>
  199. </ul>
  200. <ul>
  201. <li>合肥</li>
  202. <li>其他</li>
  203. </ul>
  204. </div>
  205. </div>
  206. <div>
  207. <img src="static/images/2.jpg" alt="" style="margin-top: 20px;">
  208. <img src="static/images/banner-right.jpg" alt="" style="margin-top: 20px;margin-left: 10px;">
  209. </div>
  210. </div>
  211. </body>
  212. </html>

完成效果图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议