微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 《CSS基础》2019-12-20作业笔记
博主信息
博文 26
粉丝 1
评论 1
访问量 25592
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
《CSS基础》2019-12-20作业笔记
杨凡的博客
原创
1000人浏览过

表单

  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>

完成效果图

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：对于页面元素的划分, 有不同学标准, 写页面的思路很清楚, 对于页面结构的分析 , 可以有多种方式, 老师只是提供了一种
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录