search

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

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

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

表单

  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>
  33. </body>
  34. </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.         }
  67.         .clear{
  68.             clear: both;
  69.         }
  70.         ul{
  71.             list-style:none;
  72.             display:inline-block;
  73.             padding: 5px;
  74.         }
  75.         .tubiao{
  76.             font-size: 50px;
  77.             color: red;
  78.         }
  79.         .shuxian{
  80.             display:inline-block;
  81.             height: 50px;
  82.             border-left: solid 1px #999999;
  83.         }
  84.         .kongge{
  85.             display:inline-block;
  86.             margin-left: 10px;
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  91.     <div class="big-box">
  92.         <div class="top">
  93.             <div class="top-left">
  94.                 <img src="static/images/logo.png" alt="">
  95.             </div>
  96.             <div class="top-right">
  97.                 <div class="top-right-l">
  98.                     <input type="text" class="sousuo">
  99.                     <span class="iconfont" id="sousuo-l">&#xe782;</span>
  100.                 </div>
  101.                 <div class="top-right-r">
  102.                     <span class="iconfont" id="sousuo-r-1">&#xe629;</span>
  103.                     <span class="iconfont" id="sousuo-r-2">&#xe61b;</span>
  104.                     <span class="iconfont" id="sousuo-r-3">&#xec0a;</span>
  105.                     <span class="iconfont" id="sousuo-r-4">&#xec14;</span>
  106.                     <span class="iconfont" id="sousuo-r-5">&#xe60e;</span>
  107.                     <span class="iconfont" id="sousuo-r-6">&#xec80;</span>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.         <div class="clear"></div>
  112.         <div class="nav">
  113.             <div>
  114.                 <span class="iconfont tubiao">&#xec39;</span>
  115.                 <ul>
  116.                     <li>咨询</li>
  117.                     <li>学习</li>
  118.                 </ul>
  119.                 <div class="shuxian"></div>
  120.                 <ul>
  121.                     <li>器材</li>
  122.                     <li>大赛</li>
  123.                 </ul>
  124.                 <ul>
  125.                     <li>大师</li>
  126.                     <li>裤子</li>
  127.                 </ul>
  128.                 <ul>
  129.                     <li>学院</li>
  130.                     <li>影视</li>
  131.                 </ul>
  132.                 <ul>
  133.                     <li>实战</li>
  134.                     <li>其他</li>
  135.                 </ul>
  136.                 <div class="kongge"></div>
  137.                 <span class="iconfont tubiao">&#xec36;</span>
  138.                 <ul>
  139.                     <li>爱好</li>
  140.                     <li>姐妹</li>
  141.                 </ul>
  142.                 <div class="shuxian"></div>
  143.                 <ul>
  144.                     <li>有品</li>
  145.                     <li>坦克</li>
  146.                 </ul>
  147.                 <ul>
  148.                     <li>图片</li>
  149.                     <li>气球</li>
  150.                 </ul>
  151.                 <ul>
  152.                     <li>喝水</li>
  153.                     <li>毛线</li>
  154.                 </ul>
  155.                 <ul>
  156.                     <li>飞机</li>
  157.                     <li>其他</li>
  158.                 </ul>
  159.                 <div class="kongge"></div>
  160.                 <span class="iconfont tubiao">&#xec39;</span>
  161.                 <ul>
  162.                     <li>软件</li>
  163.                     <li>技能</li>
  164.                 </ul>
  165.                 <div class="shuxian"></div>
  166.                 <ul>
  167.                     <li>学习</li>
  168.                     <li>富强</li>
  169.                 </ul>
  170.                 <ul>
  171.                     <li>爱国</li>
  172.                     <li>互助</li>
  173.                 </ul>
  174.                 <ul>
  175.                     <li>敬业</li>
  176.                     <li>仁义</li>
  177.                 </ul>
  178.                 <ul>
  179.                     <li>友善</li>
  180.                     <li>其他</li>
  181.                 </ul>
  182.                 <div class="kongge"></div>
  183.                 <span class="iconfont tubiao">&#xec1b;</span>
  184.                 <ul>
  185.                     <li>编程</li>
  186.                     <li>美女</li>
  187.                 </ul>
  188.                 <div class="shuxian"></div>
  189.                 <ul>
  190.                     <li>吃饭</li>
  191.                     <li>上海</li>
  192.                 </ul>
  193.                 <ul>
  194.                     <li>周易</li>
  195.                     <li>杭州</li>
  196.                 </ul>
  197.                 <ul>
  198.                     <li>黄山</li>
  199.                     <li>北京</li>
  200.                 </ul>
  201.                 <ul>
  202.                     <li>合肥</li>
  203.                     <li>其他</li>
  204.                 </ul>
  205.             </div>
  206.         </div>
  207.         <div>
  208.             <img src="static/images/2.jpg" alt="" style="margin-top: 20px;">
  209.             <img src="static/images/banner-right.jpg" alt="" style="margin-top: 20px;margin-left: 10px;">
  210.         </div>
  211.     </div>
  212. </body>
  213. </html>

完成效果图

上一条：1227仿m.php.cn首页下一条：Flex实现二手交易与评论功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多