html&css笔记

最新推荐文章于 2024-07-24 16:53:23 发布

灰色年华

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量335

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/barry_hui/article/details/52841037

版权

HTML

行内元素 (inline element)：

a 锚点
big-大字体
em-强调斜体
i-斜体
img-图片
span常用内联容器，定义文本内区块
input-输入框 strong-粗体强调
select-列表选择
sub-下标
u-下划线

特点：一行可放多个，不可设置宽和高，以文本大小为主

块元素(block element)：

address-地址
div-常用块元素
dl-定义列表
form-交互表单
h1-h6标题
p-段落
ol-有序列表
ul-无序列表
table-表格

特点：自己占一行，可设置宽和高，宽以浏览器宽为准。

行元素和块元素可以通过在样式中的display属性来更改

行内： display：inline

块级：display：block

webStorm快捷键:

ctrl+/ 快速注释一行

ctrl+d 快速复制一行

ctrl+y 快速删除一行

tab 补全代码

img 标签参照的是文本需要文本标签包围

frameset将页面分成多个frame连接到不同html文档中，不能写到body中，也不能在里面写元素。在frame中起名字，以方便其他的链接的target属性可也设置

iframe 可以写到body中
1.表单域必须加name属性才能把数据提交给服务器，只有不想提交的才不写name，如button；
2.单选按钮和复选框name相同为一组；
3.post和get的区别：
get是通过url传参，地址栏可以看到，会有安全问题，而post是通过请求实体传送数据，相对安全；get最多传1kb，post不限制
4.注意label与radio按钮按id绑定
5.隐藏域的使用，可以发送文本框的默认值

注意fileset和legend的使用

这里写图片描述
注意fileset和legend的使用
6.框架集frameset和frame布局
7.table布局

user
password

male
female

    car<input type="radio" name="vehicle"/>
    bicycle<input type="radio" name="vehicle"/>

    <input type="file"/>
    <input type="reset"/>

    <select>
        <optgroup label="china">
        <option value="1" selected>北京</option>
        <option value="2"disabled>上海</option>
        <option value="3">南京</option>
        </optgroup>
    </select>
    <textarea placehoder="请在此处填写信息"required>此处不能写空格</textarea>
    <input type="hidden" name="h" value="sda"/>
    <!--设置隐藏域 可以用value填写文本框的默认值-->
    <input type="submit"/>
</form>

8. 这里写图片描述

注意两者区别！！
这里写图片描述

这里写图片描述

内部样式表>行内样式表>属性

a{height=” “} 大于 h1 style=”weight: ” 大于 h1 weight=” “
这里写图片描述

对于内部样式表越细优先级越高

这里写图片描述

background-size一定要写在background：url（“ ”）之后

这里写图片描述

使用浮动float一定要清除浮动：1.添加div{clear：both} 2.使用伪元素3.overflow：hidden

        .container::after{content: "";display: block;clear: both}
        <div class="container">
        ...中间有浮动div
        </div>

这里写图片描述

海报

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post</title>
    <style>
        div{background: url("img/post.jpg");width: 700px;height: 400px;position: relative;}

        div:hover::before,div:hover::after{
            content: "<";font-size: 40px;color: #fff;
            text-align: center;line-height: 60px;
            display: block;width: 50px;height: 60px;
            position: absolute;left: 0px;
            top: 150px;
        }
        div:hover::after{
            content: ">";
            left: 650px;
        }
        ul{position: absolute;list-style: none;left: 200px;bottom: 50px;}
        ul li{float: left;width: 30px}
        ul li a{border-radius: 50%;text-align: center;
            width: 20px;height: 20px;
            background-color: coral;display: block;text-decoration: none}
        ul li a:hover{background: red}
    </style>
</head>
<body>
   <div>
       <ul>
           <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
           <li><a href="#">3</a></li>
           <li><a href="#">4</a></li>
           <li><a href="#">5</a></li>
       </ul>
   </div>
</body>
</html>

position：
1. static（默认值）
2. .relative
3. absolute
4. fixed

注意position定位的使用尤其是fixed可以将某栏固定在浏览器某个位置而不随滚动条动，后三个可以使用z-index而static不可以，before和after的属性重合使用，注意都使用left，而不是一个left一个right

这里写图片描述

注意行内元素上下padding没用，若想使用display改为block

例子：导航栏上的文字一般可以改为block，设置padding，而不是设置固定的width，以免文字过多时自动换行，导航栏的padding可以用来放图标
块级元素外边距会合并，行内元素不占上下外边距，左右margin不合并，浮动元素外边距也不会合并
margin：0px auto；上下外边距为0；左右自动分配为居中
display：flex （旧版本：box->flexbox->flex）伸缩盒模型 flex-grow比例分配
box-shadow:水平阴影位置垂直模糊距离颜色
text-shadow
@font-face{
font-family:myFirstFont;//自定义字体名
src：url(“res/….ttf”);//字体路径
}
transition:属性名时间速度曲线何时开始
速度曲线：
这里写图片描述
transform:rotate(30deg);rotateX;rotateY;translate3d(,,_);
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <style>
        div{width: 200px;height: 250px;background: yellow;margin: 50px auto;position: relative;overflow: hidden;}
        div:hover{transform:translate3d(0px,-10px,0px);
             box-shadow: -5px 5px 2px gray;
        }
        p{width: 200px;height:50px;background: orange;position: absolute;top: 240px;left: 0px;transition: 0.5s;}
        div:hover p{top: 185px;left: 0px;}
    </style>
</head>
<body>
      <div>
          <p>哈哈</p>
      </div>
</body>
</html>

这里写图片描述鼠标hover橙色部分上浮

@keyframes 用于创建动画

元素添加animation属性并包含（动画名、动画时长）（至少）、效果、开始时间，例：
这里写图片描述

这里写图片描述
光盘旋转

一般用span画

这里写图片描述
可在div中使用

这里写图片描述
注意同时使用

这里写图片描述
可以自己调换两个盒模型
img 标签边距问题解决方法：

将img标签转化为块元素
父容器指定高度
父容器的字号变为font-size：0px；注意，里面的其他字号另外设置

这里写图片描述

css2的

css3

添加不同界面的样式表

这里写图片描述

灰色年华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html&css笔记

HTML行内元素 (inline element)：a 锚点big-大字体 em-强调斜体 i-斜体 img-图片 span常用内联容器，定义文本内区块input-输入框 strong-粗体强调 select-列表选择 sub-下标u-下划线特点：一行可放多个，不可设置宽和高，以文本大小为主块元素(block element)：address-地址d
复制链接

扫一扫