CSS基础标签

基础标签

超链接a标签

1、href属性:跳转的地址,可以是网页,也可以是本地的文件;

<a href="https://www.baidu.com">百度一下,你就知道</a>

禁止跳转(#也可以实现,但是每次点击后,都会返回到页面的最上方 用户体验感不好)

<a href="javascript:void(0)">百度一下,你就知道</a>

2、target属性:跳转的方式,默认在本网页打开;

_self:默认在本网页打开;

_blank:点击一次,打开一个新网页;

_new:点击多次也只打开一个新的网页;(当target属性值赋值但无效时,默认为只打开一个新网页)

<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a>

3、“#” 锚点功能

从点击的位置跳转到对应的位置,例:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: blue;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <a href="#aa">111</a>
    <a href="#bb">222</a>
    <a href="#cc">333</a>
    <a href="#dd">444</a>
    <a href="#ee">555</a>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
    <div id="ee">555
        <a href="" name="ee"></a>
    </div>
</body>

点击href跳转到”#ee“的a标签后,跳转到锚点name为”ee“的a标签处(id为ee的div处)

dl和dt、dd标签

dl:大框架

dt:标题

dd:内容

<dl>
        <dt>这是一个标题</dt>
        <dd>这是主要文字的内容</dd>
        <dt>这是一个标题</dt>
        <dd>这是主要文字的内容</dd>
    </dl>

效果图如下:

有序ol 和 无序ul标签(子集只能够写li)

ul 和 li 标签

ul li :无序列表

<ul style="list-style: none;"> <!--list-style:none 不显示无序列表的标题 -->
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

list-style:

none:不显示

disc:实心圆

circle:空心圆

square:实心方块

ol 和 li 标签

ol li:有序列表

<ol type="1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ol>

序列的类型 type:

1:阿拉伯数字排序

I:罗马数字

a:小写字母

A:大写字母

单位分类:

1、px:像素  最常用的一个单位

2、em:1 em = 一个字体的大小

3、rem:html字体的大小

4、vw:屏幕的宽度为100vw  1vw = 屏幕的宽度/100;

5、vh:屏幕的高度为100vh  1vh = 屏幕的高度/100;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值