安全矩阵

 找回密码
 立即注册
搜索
楼主: Pluto

李佳瑞学习日记

[复制链接]

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-3 00:24:13 | 显示全部楼层
抽晚上的时间复习了一下HTML,总结了一下基础的知识
基本的 HTML 标签 4个实例
标题是通过<h1>到<h6>表示的,
段落是通过<p;
衔接通过<a>;
<a href="http://www.w3school.com.cn">This is a link</a>
图像通过<img>;
<img src="w3school.jpg" width="104" height="142" />
HTML元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
HTML属性
属性总是通过name="value"形式表示,属性总是在开始标签里面,始终为属性值加引号;
<h1
align="center"> 拥有关于对齐方式的附加信息。
<body
bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table
border="1"> 拥有关于表格边框的附加信息。
HTML标题和段落
标签        描述
<html>        定义 HTML 文档。
<body>        定义文档的主体。
<h1> to <h6>        定义 HTML 标题
<hr>        定义水平线。
<!-->        定义注释。

HTML 链接标签

有两种使用 <a> 标签的方式:
1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签

<br />        插入单个折行(换行)。
HTML 列表
无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
除此之外,还有块元素,内联元素等等。
回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-3 23:27:24 | 显示全部楼层
今天练习了css的浮动与定位,照着网易云的官网敲了一下式代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网易电影票</title>
    <link rel="stylesheet" href="bang.css">
</head>
<body>
   <div class="head-top">
      <div class="head-top-left">
          <span>欢迎来到网易电影!</span>
          <a href="#">
              请登录
          </a>
          <a href="#">
              立即注册>>
          </a>
      </div>
      <div class="head-top-right">
          <ul class="my-helper">
              <li><a href="#">我的订单</a></li>
              <li><a href="#">我的优惠券</a></li>
              <li><a href="#">帮助</a></li>
              <li><a href="#">提意见</a></li>
              <li><a class="none" href="#">联系客服</a></li>
          </ul>
      </div>
   </div>
   <div class="head-bottom">
     <div class="head-bottom-inner">
         <div class="head-bottom-left">
             <div class="logo"></div>
             <div class="nav-bar">
                 <ul>
                     <li>
                         <a class="small" href="#">
                                湖州
                                <i class="row"></i>
                         </a>
                    </li>
                     <li class="first">
                         <a href="#">首页</a>
                    </li>
                     <li>
                         <a href="#">
                               电影
                               <i class="row"></i>
                        </a>
                    </li>
                     <li>
                         <a href="#">影院</a>
                    </li>
                     <li>
                         <a href="#">客户端</a>
                    </li>
                 </ul>
             </div>
         </div>
         <div class="head-bottom-right">
             <input type="text" placeholder="请输入影片或影院">
             <i class="search-img"></i>
         </div>
     </div>
   </div>
</body>


Css部分
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul,ol,li {
    list-style-type: none;
}

.head-top {
    height:34px;
    width: 1190px;
    line-height: 34px;
    margin:0 auto;
    font-family:Arial,"瀹嬩綋";
    font-size: 12px;
    color:#5d5d5d;
}

.head-top a {
    color:#3f3f3f;
}

.head-top a:hover {
    text-decoration:underline;
}

.head-top-left {
    float: left;
}

.head-top-right {
    float:right;
}

.my-helper>li {
    float:left;
}

.my-helper>li>a {
    color: #7f7f7f;
    padding:0 10px;
    border-right:1px solid #727171;
}

.my-helper>li>a.none {
    border-right:none;
}

.head-bottom {
    width:100%;
    height:74px;
    background-color:#e34551;
}

.head-bottom-inner {
   width: 1190px;
   height:74px;
   margin:0 auto;
}

.head-bottom-left {
    float:left;
}



.logo,.nav-bar {
    float:left;
}

.logo {
    background-image:url('../img/logo2014.png');
    width: 180px;
    height: 74px;
    margin-left:20px;
}

.nav-bar {
    margin-left:20px;
}

.nav-bar>ul>li {
    float:left;
    height:74px;
    line-height:74px;
    width: 120px;
    text-align:center;
}

.nav-bar>ul>li>a {
    color:#fff;
    font-size:22px;
    height:74px;
    width:100%;
    display:block;
}

.nav-bar>ul>li>a.small {
    font-size:16px;
}

.nav-bar>ul>li>a>i {
    width: 0;
    height: 0;
    border:4px solid transparent;
    border-top-color:#fff;
    display: inline-block;
    margin-left:5px;
}

.first {
    background: #bc353f;
}

.first:hover {
    background: #cf3d48;
}

.head-bottom-right {
    float:right;
    width: 208px;
    height: 36px;
    background-color:#fff;
    margin-top:19px;
}

.head-bottom-right>input {
    width: 130px;
    margin-top: 10px;
    margin-left: 8px;
    outline: none;
    border: none;
}

.search-img {
   width: 36px;
   height: 33px;
   background-image:url('../img/icon8.png');
   float:right;
   cursor:pointer;
回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-4 23:25:38 | 显示全部楼层
详细学css定位(属性允许你自由设定元素的位置)
定位的基本思想很简单,他允许你定位元素框相对于其正常位置应该出现的位置,或者相对于有定位的父元素,另一个元素甚至浏览器窗口本身的位置。
Css有三种基本的定位机制:普通流、浮动和决对定位
Css定位position属性实现定位
Css position 属性可以通过使用position属性,我们可以选择四种不同类型的定位,这会影响元素框生成的方式。
1、position:static  静止定位  元素默认状态
2、Position:absolute 绝对定位 相对于最近的有定位的父元素定位
3、Position:relative 相对定位  相对于自己原来的位置进行定位
4、Position:fixed 固定定位 相对于浏览器窗口进行定位
下面以绝对定位为例 (相对定位 与固定定位 与它类似)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>position</title>
        <style type="text/css">
        *{
                margin: 0px;
                padding:0px;
        }
     .test{
             width:300px;
             height: 300px;
             border:1px solid red;
             position:absolute;
             color: blue;

     }
      .static{
              width: 300px;
              height: 300px;
              border: 1px solid #ccc;
      }
      .wp{
              width: 300px;
              height: 300px;
              border: 1px solid red;
              margin: 50px auto;
              position: absolute;
      }
   
        </style>
</head>
<body >
   <div class="wp">
     <div class="test">
      有定位的元素
     </div>
     <div class="static" >
       静止状态
     </div>
   </div>
</body>
</html>
<!--absolute-定位
1:元素脱离文档流(原来的位置丢失)
2、默认压住没有定位的元素
3、进行位置调节  水平设置一个方向即可
4、相对于有定位的父元素定位,如果父元素没有定位,往上查找body
-->

回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-5 23:29:34 | 显示全部楼层
今天看了css定位中的z-index
最初我以下面的例子在浏览器中练习:
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>z-indx</title>
                <style type="text/css">
                        div{
                                width: 300px;
                                height: 200px;
                                border:1px solid red;
                               
                        }
                        .first{
                                background-color: blue;
                                position: absolute;
                        }
                        .center{
                                background-color: pink;
                                position: absolute;
                        }
                        .end{
                                background-color: yellow;
                        }
                </style>
        </head>
        <body>
                <div class="first">
                        定位元素1
                </div>
                <div class="center">
                        定位元素2
                </div>
                <div class="end">
                        静止元素
                       
                </div>
        </body>
</html>
了解到z-index的注意事项:
1、只针对有定位的元素
2、可以改变元素的显示顺序(通过调节z-index的大小来进行改变)
3、每一个定位的元素都有一个z-index值(默认为零)
4、定位元素的显示方式,根据结构生成方式,后面的有定位的元素压住前面有定位的元素
下面是我根据京东网站进行的练习
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>test</title>
                <link rel="stylesheet" type="text/css" href=""/>
                <style type="text/css">
                        *{
                                margin: 0;
                                padding: 0;
                        }
                        .wp{
                                width: 1200px;
                                margin: 0 auto;
                        }
                        .ul{
                                margin-top: 60px;
                        }
                        ul>li {list-style-type: none;
                        height: 300px;
                        line-height: 300px;
                        text-align: center;
            font-size: 50px;
                    font-weight: bold;
                        background-color: red;
                        margin-bottom:20px ;
                        }
                        .head{
                                height: 60px;
                                line-height: 60px;
                                color: #fff;
                                background-color: #666;
                                position: fixed;
                                width: 100%;
                                top: 0;
                                left: 0;
                        }
                        ol.fixed{
                                position: fixed;
                                left: 10%;
                                top: 50%;
                                margin-top: -63px;
                               
                        }
                        .demo{
                                position:relative;
                        }
                        .test{
                                width: 200px;
                                height: 200px;
                                background-color: red;
                                margin: auto;
                                position: absolute;
                                left: 50%;
                                top:50%;
                                margin-left: -100px;
                                margin-top: -100px;
                        }
                </style>
        </head>
        <body>
                <div class="head">
                        导航栏
                </div>
                <div class="wp">
                        <ul>
                                <li class="demo">
                                        <div class="test">
                                               
                                        </div>
                                </li>
                                <li>item1</li>
                                <li>item2</li>
                                <li>item3</li>
                                <li>item4</li>
                                <li>item5</li>
                                <li>item6</li>
                                <li>item7</li>
                                <li>item8</li>
                                <li>item9</li>
                                <li>item10</li>
                        </ul>
                        <ol class="fixed">
                                <li>1楼</li>
                                <li>2楼</li>
                                <li>3楼</li>
                                <li>4楼</li>
                                <li>5楼</li>
                                <li>6楼</li>
                               
                        </ol>
                </div>
        </body>
</html>
回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-6 23:53:02 | 显示全部楼层
今天将前几天学的和今天学的总结一下,今天没有学太多新的东西,简单的练习了一下

分组和嵌套
分组:

h1,h2,h3
{
}

嵌套:

/*p*/
p
/*class="marked"*/
.marked
/*class="marked"下的p*/
.marked p

显示和隐藏

隐藏元素

/*占有和原来元素一样的空间*/
visibility:hidden
/*不占空间*/
display:none

块元素与内联元素的转换

/*将块元素转变为内联元素*/
display:inline
/*将内联元素转变为块元素*/
display:block

定位

fixed: 位置固定,页面滚动,元素不变

position: fixed

relative: 位置相对正常位置移动

position:relative;
left:-20px;(向右移动)

absolute: 向对于已定位的父元素,无则相对于html

position:absolute;
left:100px;

堆叠顺序

z-index=1

浮动

之后的元素在围绕着它

float:right;

多个浮动元素排列在一起,将呈现出彼此相邻的效果

/*in css*/
.thumbnail
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
/*in html*/
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

元素两侧不可出现浮动元素

clear:both;

对齐

元素居中对齐

margin:auto
width:50%

文本居中对齐

text-align:center

通过floating实现右对齐

float:right

通过padding实现垂直居中对齐

padding:70px 0

伪类

链接的不同状态

a:link
a:visited
a:hover
a:active

元素的第一个子元素

p:first-child

所有p的第一个i

p > i:first-child

第一个p的所有i

p:first-child i

lang伪类
(为不同语言定义特殊规则)

/*in css*/
q:lang(no)
{
    quotes: "~" "~";
}
/*in html*/
<p> some text <q lang="no"> a quote in a para</q>some text.</p>
output:
some text ~ a quote in a para ~ some text.


导航栏

/*删除列表所有格式,并设置背景色*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

/*将inline的链接设为block,点击非文字部分也可访问*/
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none; //删除下划线
}

/* 鼠标移动到选项上修改背景颜色和链接字体颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
/* in body */
<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-9 01:26:26 | 显示全部楼层
今天看了css溢出overflow
当一个元素固定为某个特定大小,但内容涵盖在元素中放不下。此时就可以利用overflow来控制这中情况
值:visible|hidden|scroll|auto|inherit
初始值:visible  
应用于:块级元素、替换元素、表单元素
Overflow-x主要用来定义水平方向溢出的剪切,overflow-y用来定义垂直方向溢出的剪切。(如果x和y相同则默认为overflow如果不同,且其中一个值显示设置为visible或未设置默认为visible,另外一个值是非visible的值,则visible的值会被重置为auto)
Visible:元素的内容在元素框外也可见
Auto:如果内容被剪裁,则浏览器会显示滚动条便于查看其他内容
Scroll:元素的内容会在元素的边界框剪裁,但浏览器会显示滚动条便于查看其他内容
Hidden:元素的内容会在元素的边界框剪裁,并且超出的内容不可以被看见
white-space:规定段落中的文本不进行换行
文本溢出省略号代替
Overflow:hidden//超出隐藏
text-overflow:ellipsis//文本超出省略号代替
White-space:nowrap//禁止文字自动换行
以下代码为例子:
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>demo</title>
                <style type="text/css">
                        .wp{
                                width:100px;
                                height: 50px;
                                border: 1px solid red;
                                margin: 50px auto;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                        }
                </style>
        </head>
        <body>
                <div class="wp">
                        红妆亦有凌云志
                          同历风雨为国征
                          巾帼不让须眉
                          当代“木兰”
                          “疫”无反顾
                          不赢不退
                          不胜不归
                </div>
        </body>
</html>
下面是css中margin的问题
垂直方向auto值失效(定位实现垂直居中)
父元素设置margin-top时,内部的第一个子元素margin-top失效(padding代替,为父元素加边框)上下双边距合并(统一设置垂直边距)
回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-12 01:16:44 | 显示全部楼层
今天复习并且学习了新的数据库得知识
首先整理了一下之前学习得知识
三个特殊的数据库命令:
查看版本:select version();
查看当前时间:select now();
查看当前使用的数据库:select database();   (注意:只有这三条命令后面是加括号的)
创建数据库:create database 数据库名称 charset =utf8;
查看所有数据库:show databases();
使用数据库:use 数据库名称;
删除数据库:drop database 数据库名;
数据表的创建
Create table 表名(
字段名称 数据类型 可选的约束条件.
字段 数据类型 约束条件,
字段 数据类型 约束条件,
.....
) 注意:字段之间用逗号隔开,最后一行无需用逗号
以创建一个班级表为例:
create table classes(
  id int unsigned auto_increment PRIMARY key not null,
  name varchar(10)

);
use mysql;
姓名表:
create table students(
id int unsigned primary key auto_increment not null,
name varchar(20)DEFAULT'',
age TINYINT UNSIGNED default 0,
height decimal (5,2),
gender enum('男','女','中性','保密')

)
查看数据库中所有的表:show tables;
查看表结构:desc 表名;
查看表的创建语句:show create table 表名;
添加字段:alter table 表名 add 列名 类型:
例如:alter table students add biryhday datetime;
修改表-修改字段-重命名版
在表中已有字段 但是字段名不满足要求  类型或约束满足或者不满足均可;
Alter table 表名change 原名 新名 类型及约束;
例如:alter table students change birthday birth datetime;
修改表-修改字段不重命名版
在表中已有字段 并且字段也满足要求 但是类型或者约束 不满足要求;
Alter table 表名 modify 列明 类型及约束;
例如:aalter table studentsmodify birth date not null;
回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-12 23:42:29 | 显示全部楼层
今天依然数数据库的学习
首先了解一下curd的含义,curd代表的是增删改查。C:创建(create)U:更新(update)R:读取(retrieve)D:删除(delete)
插入数据
MySQL使用inset into语句来插入记录
主键是自动增长,但是在全列插入时需要占位,通常使用空值(0或者null);字段默认default来占位插入成功后以实际数据为主
全列插入,值的顺序与表字段的顺序是一一对应的
格式:insert into表名 values(...);
例如:insert into students values(0,‘郭靖’,28,‘175.08’,‘男’,100,‘内蒙’)
部分插入:值的顺序与字段的顺序相同
格式:insert into 表名列名(列1,...)values(值1,...)
例如:insert into students(name,hometown,birthday)values(‘黄蓉’,‘桃花岛’,‘5.11’)
需要注意的是,如果字段设置的是非空那么改字段不能为空,必须插入数值
全列多行插入:可以一次插入多行数据
格式:insert into 表名values(...),(...);
例如:insert into classes values (0,’w’,’python’);
全列多行插入也不需要写字段名
部分多行插入
格式:insert into 表名 (列1,...), values(值1,...),(值1...);
例如:insert into students(name) values('杨康'),('杨过'),('小龙女');
查询基本使用
查询所有列
格式:select * from 表名;
例如:select * from classes;
查询指定列
格式:select 列1,列2,... from 表名;
例如:select id,name from classes;
修改
MySQL使用update…set语句来做修改
格式:update 表名 set 列1=值1,列2=值2... where 条件;
例如:update students set gender=0,hometown='北京' where id=5;
物理删除
一旦删除,不易恢复
MySQL使用delete语句来进行物理删除
格式:delete from 表名 where 条件;
例如:delete from students where id=5;
查询:select 字段名称 [as 别名] from 表;
更新:update 表名 set 字段名=新值 where 条件;
插入:insert into 表名 [全列插不填字段名] values (),();
删除:delete from 表名 where 条件;

回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-13 23:50:35 | 显示全部楼层
今天看的是数据库中的查询问题 首先看的是where查询
使用 where 子句来指定查询条件,从 from子句的中间结果中选取适当的数据行,达到数据过滤的效果
select * from 表名 where 条件;
select * from students where id=1;
Where之比较运算符
等于: =
大于: >
大于等于: >=
小于: <
小于等于:  <=
不等于: != 或 <>
比较运算符的实操运用
查询编号大于3的学生
select * from students where id>3;

查询编号不大于3的学生
select * from students where id <=3;

查询姓名不是张三的学生
select * from students where name != ‘张三';
逻辑运算符
and 或 &&;or 或 ||-;not 非 !

查询编号大于3的男同学
select * from students where id>3 and gender=1;

查询编号大于2或没被删除的学生
select * from students where id>2 or is_delete=0;
模糊查询
like; %表示 任意多个字符(可以是0个); _表示任意一个字符
查询姓李的学生
select * from students where name like '李%';
查询姓张并且“名”是一个字的学生
select * from students where name like '王_';
查询姓马或叫超的学生
select * from students where name like '黄%' or name like '%靖';
非连续范围查询
in表示在一个非连续的范围内

查询编号是1或3或5的学生

select * from students where id in(1,3,5);
连续范围查询
between ... and ...表示在一个连续的范围内

查询编号为3至8的学生

select * from students where id between 3 and 8;

查询编号是3至8的男生

select * from students where (id between 3 and 8) and gender=1;

    注意: between A and B在匹配数据的时候匹配的范围空间是 [A,B]
空判断
is null表示判断为空
查询没有填写身高的学生
select * from students where height is null;
非空判断
判非空is not null
查询填写了身高的学生
select * from students where height is not null;

回复

使用道具 举报

7

主题

139

帖子

588

积分

高级会员

Rank: 4

积分
588
 楼主| 发表于 2020-3-14 23:45:22 | 显示全部楼层
今天学的是数据库中的order by 排序查询
在mysql中我们使用order by 子句对字段进行排序,在返回搜索结果
例如应用场景:京东购物
select * from 表名 order by 列1 asc | desc, 列2 asc | desc, ...
语法说明:
        将行数据按照列1进行排序,如果某些行 列1 的值相同时,则按照 列2 排序,以此类推
        asc从小到大排列,即升序
        desc从大到小排序,即降序
        默认按照列值从小到大排列(即asc关键字)
查询未删除男生信息,按id降序
select * from students where gender=1 and is_delete=0 order by id desc;

查询未删除学生信息,按id升序
select * from students where is_delete=0 order by name;

显示所有的学生信息,先按照年龄从大-->小排序,当年龄相同时 按照身高从高-->低排序
select * from students  order by age desc, height desc;


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|安全矩阵

GMT+8, 2024-11-28 00:53 , Processed in 0.015957 second(s), 17 queries .

Powered by Discuz! X4.0

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表