11.07笔记整理、作业及学习心得

最新推荐文章于 2024-08-28 20:36:57 发布
最新推荐文章于 2024-08-28 20:36:57 发布
阅读量184 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huqiang0816/article/details/78473112
版权

1、居中和对齐

1、margin设置区块元素水平居中

margin：0 auto；设置左右外边距的大小，控制元素的水平居中。

.center{
     margin: 20px auto;
     width: 600px;
     border: 3px solid green;
     text-align: center;
 }

<div class="center">
    <p>使用margin进行元素的居中
     </p>
</div>

注：width不能设置为100%，否则是没有效果的。

2、position属性设置元素的左右对齐

<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            position: absolute;
            right: 0;
            width: 300px;
            border: 3px solid pink;
            padding: 10px;
            z-index: 0;
        }
    </style>
 </head>

 <body>
    <div class="right">
        <p>我是右对齐的区块</p>
    </div>
 </body>
</html>

2、float属性设置左右对齐

<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            float:right;
            width: 300px;
            border: 3px solid pink;
            padding: 10px;
        }
    </style>
 </head>

 <body>
    <div class="right">
        <p>我是浮动右对齐的区块</p>
    </div>
 </body>
</html>

4、padding属性设置水平垂直居中

<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            border: 3px solid pink;
            padding: 60px 0;
            text-align:center;
        }
  </style>
 </head>

 <body>
    <div class="right">
        <p>我是利用padding属性垂直居中的区块</p>
    </div>
 </body>
</html>

5、line-height属性设置水平垂直居中

<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            height:300px;
            border: 3px solid pink;
            padding: 60px 0;
            text-align:center;
            line-height:300px;
        }
  </style>
 </head>

 <body>
    <div class="right">
        <p>我是利用行高水平居中的区块</p>
    </div>
 </body>
</html>

6、绝对定位和transform属性设置水平垂直居中

<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            height:300px;
            border: 3px solid pink;
            position:relative;
        }
        .right p{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
  </style>
 </head>

 <body>
    <div class="right">
        <p >我是利用行高水平居中的区块</p>
    </div>
 </body>
</html>

2、CSS3边框

2.1 圆角边框

border-radius :用于指定圆角边框的圆角半径。

  • 如指定1个参数，则4个圆角都使用该长度作为半径。
  • 如指定2个参数，则第一个参数作为左上角和右下角的半径，第二个参数作为右上角和左下角的半径。
  • 如指定3个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。
<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            width:500px;
            border: 3px solid pink;
            padding:10px 30px;
            border-radius:30px;
        }

  </style>
 </head>

 <body>
    <div class="right">
        <p>利用border-radius属性设置元素圆角边框</p>
    </div>
 </body>
</html>

2.2 边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

  • 第一个参数：控制阴影在水平方向的偏移。
  • 第二个参数：控制阴影在垂直方向的偏移。
  • 第三个参数：控制阴影的模糊程度。
  • 第四个参数：控制阴影的缩放程度。
  • 第五个参数：改属性值控制阴影的颜色。
<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            width:500px;
            height:300px;
            padding:10px 30px;
            box-shadow:30px 10px 100px 100px #333;
        }

  </style>
 </head>

 <body>
    <div class="right">
        <p>利用box-shadow属性设置元素边框阴影</p>
    </div>
 </body>
</html>

3、动画

3.1 渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。

  • 第一个参数：指定对HTML元素哪个部分进行处理。
  • 第二个参数：定义持续时间。
  • 第三个参数：指定渐变的速度。
  • 第四个参数：指定延迟时间。
<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            width:100px;
            height:150px;
            padding:10px 30px;
            border:2px solid red;
            background-color:#333;
            border-radius:0 100px 100px 0;
            transition:width 2s;

        }
        .right:hover{
            width:500px;
        }

  </style>
 </head>

 <body>
    <div class="right">
        <p>利用transition属性设置渐变动画</p>
    </div>
 </body>
</html>

3.2 Animation动画

animation动画是更加灵活的制作动画的方法。animation是一个复合属性，总有5个参数：

  • 第一个参数：指定动画的名称。
  • 第二个参数：指定动画的持续时间。
  • 第三个参数：指定动画的变化速度。
  • 第四个参数：指定动画延迟多久开始执行。
  • 第五个参数：指定动画循环执行的次数。
<html>
 <head>
 <meta charset="UTF-8">
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style tyle="text/css">
        .right{
            width:100px;
            height:150px;
            padding:10px 30px;
            border:2px solid red;
            background-color:#333;
            border-radius:0 100px 100px 0;
            animation:myfirst 0.5s;
        }
        @keyframes myfirst{
            0% {width:100px;}
            25% {width:200px;}
            50% {width:300px;}
            75% {width:400px;}
            100% {width:500px;}
        }

  </style>
 </head>

 <body>
    <div class="right">
        <p>利用animation属性设置渐变动画</p>
    </div>
 </body>
</html>

11.07作业

完成首页侧边栏的制作。
（1）、html部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Coding Coffee</title>
  <link type="text/css" rel="stylesheet" href="./css/shop.css"> </link>
 </head>


 <body>
    <div class="navigator">
        <ul>
            <li><a href="./html/list.html">产品列表</a></li>
            <li><a href="./html/shoplist.html">分店列表</a></li>
            <li><a href="./html/Join Us.html">欢迎加入我们</a></li>
            <li><a href="./html/order.html">网上预订</a></li>
            <li class="pic"><img class="userPic" src="./img/c12.jpg"></li>
            <div class="clear"></div>
        </ul>



    </div>

    <div class="ad">
        <img src="./img/c10.jpg">
    </div>

    <div class="index">
        <h1 style="color:blue">欢迎光临Coding Coffee</h1>

        <img src="./img/c1.jpg">

        <p>敬请<span>关注</span>我们定期的<a href="./html/list.html">产品列表</a>，<br>

          <b>Coding Coffee</b>是一家只对<strong>程序员</strong>开放的<em>互联网咖啡馆</em>。

        </p>

        <p>
        请关注我们的<a href="./html/shoplist.html">分店列表</a>!
        </p>

        <p>网络招聘：<a href="./html/Join Us.html">欢迎加入我们！</a></p>

         <p><a href="./html/order.html">网上预定</a></p>
    </div>

    <div class="mask"></div>

    <div class="sidebar">
        <ul>
            <li><a href="">我的咖啡吧</a></li>
            <li><a href="">购物车</a></li>
            <li><a href="">Coding Coffee金融</a></li>
            <li><a href="">收藏</a></li>
            <li><a href="">消息</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
 </body>
</html>

（2）、css部分

        body{
            margin:0;
        }
        h1{
            color:yellow;font-size:60px;
            /*
            border:3px;
            border-style:solid;
            border-color:red;
            */
            margin:30px;
            padding:50px;
        }

        .navigator ul{      
            list-style-type:none;
            background-color:#333;
            margin:0px;
            padding:0px;
        }

        .navigator ul a{
            display:block;
            float:left;
            padding:18px 18px;
            text-decoration:none;
            color:white;
        }

        .navigator ul a:hover{
            background-color:#ccc;
        }

        .navigator .userPic{
            width:45px;
            height:45px;
            border-radius:45px;
            border:2px solid #eee;
        }
        .navigator .pic{
            float:right;
            position:relative;
            top:5px;
            right:5px;
        }
        .clear{
            clear:both;
        }

        .ad{
            position:fixed;
            left:50px;
            top:100px;
        }

        .index{
            text-align:center;
        }

        body{
            background-image:url('../img/c3.jpg');
            background-repeat:no-repeat;
            background-attachment:fixed;
            background-position:center center;
            background-size:100% 100%;
            /*background-color:#cccccc;*/
        }

        .index a:link{color:green;text-decoration:none;}
        .index a:visited{color:red;text-decoration:none}
        .index a:hover{color:yellow;text-decoration:underline;}
        .index a:active{color:blue;text-decoration:underline;}


        .sidebar{
            position:fixed;
            width:250px;
            top:0;
            right:-250px;
            bottom:0;
            padding:30px 0;
            background-color:#333;
            transition:right 2s;

        }
        .sidebar ul{
            list-style-type:none;
            margin:0;
            padding:0;

        }
        .sidebar ul a{
            text-decoration:none;
            color:#ffffff;
            padding:15px 30px;
            display:inline-block;
            width:100%;
        }
        .sidebar li a:hover{
            background-color:#ccc;
        }
        .mask{
            display:none;
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background-color:rgba(0,0,0,0.3);
        }

（3）、js部分

var sidebar=$('.sidebar');
var mask=$('.mask');
var sidebar_trigger=$('.pic');

function showSideBar(){
    mask.fadeIn();
    sidebar.css('right',0);
}
function hideSideBar(){
    mask.fadeOut();
    sidebar.css('right',-sidebar.width());
}

sidebar_trigger.on('click',showSideBar);
mask.on('click',hideSideBar);

11.07学习心得

今天学习了几种设置元素垂直居中、水平居中以及垂直水平居中的方法！还有如何设置利用border-radius属性设置圆角边框、利用box-shadow属性设置边框阴影。初步认识了css中制作动画的transition和animation两种属性，现在对每种属性的参数值记忆不牢固，需要多加练习。

huqiang0816
关注
11.07笔记
Rosessxk的博客
11-13 242
一、类和对象 ➢ 类 是对一群具有相同特征或者行为的事物的一个统称， ➢ 对象 是由类创建出来的一个具体 实例，可以直接使用 ➢ 类 只有一个，而 对象 可以有很多个 ➢ 不同的对象 之间 属性 可能会各不相同 ➢ 类 中定义了什么 属性和方法，对象 中就有什么属性和方法 1、python自己提供的常见的内置属性和类方法 方法名 作用 __new __ 创建对象的时候, 会被自动调...
【作业】 11.07
qq_45669465的博客
11-13 441
封装一个学生类，有姓名，有年龄，有性别，有英语成绩， 数学成绩，语文成绩， 封装方法，求总分，平均分，以及打印学生的信息。 class Student： 定义一“圆”类，定义原点位置和半径，构造一圆，求输入 一个点，判断这个点是在圆的哪个位置？ class 3.请写一个小游戏，人狗大战，2 个角色，人和狗，游戏开始后，生成 2 个人，3 条狗，互相混战，人被狗咬了会掉血，狗被人打了也掉血...
11.06笔记整理、作业以及学习心得
huqiang0816的博客
11-06 277
11.06课堂笔记及作业1、盒子模型内外边距和边框介绍当浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四个部分组成： 1. Margin 2. Border 3. Padding 4. Content1.1 边框用border属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）、样式、颜色。样式包括：solid（实线）、dotted（
11.07 学习心得
cw1249801974的博客
11-07 167
今天上午主要学习了CSS居中对齐的方式和CSS3的边框与动画制作。最后的实践阶段，我们还稍微引入了一点JS的内容。 CSS的剧种对齐主要讲了margin,position,float,padding,line-height和“绝对定位与transform调整水平居中”。这几种垂直居中与水平居中都有各自的使用环境，需要我们在平时使用时多加注意，以免发生报错。 CSS3的边框与动画效果，可以让我们
机器学习的入门笔记(第十六周)
weixin_57089519的博客
08-28 708
本周的学习记录
11.07知识整理
weixin_30624825的博客
11-07 79
CSS 脚本美化 JS脚本语言 css样式分类：1内联式 (直接在标签里面写属性 属性名为style) 例如：<div style="width: 100px; height: 100px;"></div> 　　　　　　 2、内嵌式 (直接嵌入到 head标签里面，以标签的形式出现，标签名为style)　 　　...
Python笔记⑥11.07
qq_45669465的博客
11-07 168
一、类和对象 ➢ 类 是对一群具有相同特征或者行为的事物的一个统称， ➢ 对象 是由类创建出来的一个具体 实例，可以直接使用 ➢ 类 只有一个，而 对象 可以有很多个 ➢ 不同的对象 之间 属性 可能会各不相同 ➢ 类 中定义了什么 属性和方法，对象 中就有什么属性和方法 1、python自己提供的常见的内置属性和类方法 方法名 作用 __new __ 创建对象的时候, 会被自动调...
动手学深度学习7.1 深度卷积神经网络（AlexNet）-笔记&练习（PyTorch）
scdifsn的博客
08-01 1083
李沐老师《动手学深度学习（PyTorch版）》7.1 深度卷积神经网络（AlexNet）-笔记&练习详解
11.07
Sujianrui的博客
11-07 1385
1.2.34.5.
[论坛社区]XMBForum 1.9.11.07_xmb-1.9.11.07.rar
04-18
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现...
[论坛社区]XMBForum 1.9.11.07_xmb-1.9.11.07.zip
03-17
《XMBForum 1.9.11.07：构建高效互动的社区平台》 XMBForum，全称为eXtreme Message Board Forum，是一款历史悠久的开源论坛软件，其最新版本1.9.11.07为用户提供了一个强大且稳定的社区交流环境。这个版本在前任...
FuRiousS11.07 修改版
12-24
### 知识点一：FuRiousS11.07 修改版 #### 1.1 FuRiousS11.07 的背景 - **FuRiousS11.07** 可能是一款特定的游戏修改工具或作弊程序的名称。这类工具通常用于在游戏中获得额外的优势，如提高游戏性能、解锁特殊功能...
毕业设计论文SpringBoot+Vue畅销图书推荐系统.docx
10-16
毕业设计论文
（自适应手机版）html5蓝色装修工程建设类企业网站响应式整站模板_网站整站打包下载.zip
10-16
（自适应手机版）html5蓝色装修工程建设类企业网站响应式整站模板_网站整站打包下载.zip
毕业设计论文Django+Vue新生入学管理系统.docx
10-16
毕业设计论文
毕业设计论文Nodejs+Vue摄影分享网站.docx
10-16
毕业设计论文
基于Seq2Seq模型的机器翻译系统源码+模型+数据集.zip
10-16
基于Seq2Seq模型的机器翻译系统源码+模型+数据集.zip基于Seq2Seq模型的机器翻译系统源码+模型+数据集.zip基于Seq2Seq模型的机器翻译系统源码+模型+数据集.zip基于Seq2Seq模型的机器翻译系统源码+模型+数据集.zip基于Seq2Seq模型的机器翻译系统源码+模型+数据集.zip基于Se 【说明】 【1】项目代码完整，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。 【2】项目主要针对各个计算机相关专业，包括但不限于计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 【4】如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能，欢迎交流学习。 【特别强调】 项目下载解压后，项目名字和项目路径不要用中文，建议解压重命名为英文名字后再运行！项目易上手运行 使用过程遇到问题先搜索下，一般都是环境问题，当然也可以私信沟通，祝顺利！
postgresql-13.0.tar
10-16
postgresql-13.0.tar
机器人算法的C++实现-包括定位+建图+SLAM+路径规划+控制-优质项目实战.zip
最新发布
10-16
机器人算法的C++实现_包括定位+建图+SLAM+路径规划+控制_优质项目实战
深度学习与CRF结合的新闻观点提取技术
论文比较了新模型与传统的CRF算法，实验结果显示，在准确率、召回率和F1值上，新模型分别平均提高了12.29%、10.00%和11.07%，这证明了深度学习与CRF结合的优势。此方法尤其适用于新闻报道，因为新闻文本通常更为正式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值