前端基础练习---4

  1. 有如下HTML结构:

    <a href="#">老衲的少女心</a>  

    请将该链接的下划线去掉,默认时颜色为黑色,当鼠标移动上去时显示下划线。

  2. 请说明块级元素、行内块级元素、行内元素的特点都是什么?

  3. 有如下HTML结构:

    <span>hello world</span>  

    不管字体多大,让其设置缩进为2个字。

  4. 有如下HTML结构:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style>
            div{
           
           
                width:233px;
                border:1px solid green;
                font-size:14px;
                white-space: nowrap;
            }
        </style>
    </head>
    
    <body>
        <div>The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.</div>
        <div>开放的 Web 给予开发者不可思议的机会,想全面的利用这些技术,你需要知道如何使用它们。在下方你会找到相关 Web 技术文档链接。</div>
    </body>
    
    </html>
    1. 如何让其不换行,并且超出部分隐藏?
    2. 如果让其在任何情况下都换行?
  5. 有如下HTML结构:

    <h1><a href="#">哈哈</a></h1>

    请将a链接水平居中。

  6. 有如下HTML结构:

      <div>sphinx</div>

    已知其高度为200px,如何让其中的内容水平、垂直居中?

  7. 解决块状元素只包含一张图片时会有不知名的空白,其原因和解决方法都是什么?

    扫描二维码关注公众号,回复: 12991412 查看本文章
  8. 有如下HTML结构:

```html
<div>
	<img src="./timg_small.jpg" />
</div>
```
已知其高度为500px,如何让其中的图片水平、垂直居中于div?

​
  1. 有如下HTML结构:

    <div>
        <span>开放的 Web 给予开发者不可思议的机会,想全面的利用这些技术,你需要知道如何使用它们。在下方你会找到相关 Web 技术文档链接。</span>
    </div>

    已知div的宽度为400px,高度为300px,如何让div中的span垂直、水平居中于div,并且实现绝对的垂直居中?

猜你喜欢

转载自blog.csdn.net/qq_42592823/article/details/114534559