css基础精华05

最新推荐文章于 2022-04-12 20:50:42 发布

zhaihaohao1

最新推荐文章于 2022-04-12 20:50:42 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础精华

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/47815703

css基础精华专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS中常用的行高设置、布局元素等操作，并通过实例展示了如何使用CSS实现特定的页面布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<!--CSS常用操作-分类-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css05.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="p1">
    this is my desk  this is my desk this is my desk this is my desk
    this is my desk  this is my desk  this is my desk
    this is my desk this is my desk this is my desk this is my desk</p>
<p class="p2">
    this is my desk  this is my desk this is my desk this is my desk
    this is my desk  this is my desk  this is my desk
    this is my desk this is my desk this is my desk this is my desk</p>
<p class="p3">
    this is my desk  this is my desk this is my desk this is my desk
    this is my desk  this is my desk  this is my desk
    this is my desk this is my desk this is my desk this is my desk</p>
<p class="p4">
    this is my desk  this is my desk this is my desk this is my desk
    this is my desk  this is my desk  this is my desk
    this is my desk this is my desk this is my desk this is my desk</p>
<p class="p5">
    this is my desk  this is my desk this is my desk this is my desk
    this is my desk  this is my desk  this is my desk
    this is my desk this is my desk this is my desk this is my desk</p>
<ul>
    <li>中国1</li>
    <li>中国2</li>
    <li>中国3</li>
    <li>中国4</li>

</ul>
<p class="p6"> this is my desk6  this is my desk6 this is my desk6 this is my desk6
    this is my desk6  this is my desk  this is my desk6
    this is my desk6 this is my desk6 this is my desk6 this is my desk6</p>
</body>
</html>
css:
/*line-height 设置行高*/
/*实际上在设置行间距*/
.p1{
    width: 400px;
    line-height: normal;
}
.p2{
    width: 400px;
    line-height: 200%;
}
.p3{
    width: 400px;
    line-height: 50%;
}
.p4{
    /*最大宽度*/
    /*有宽有窄*/
    max-width: 250px;
    line-height: normal;
}
.p5{
    /*设置鼠标放在上面时，鼠标的形状*/
    cursor: alias;
}
li{
    /*设置列表显示的格式为，为横向显示*/
    display: inline;
}
.p6{
    /*显示元素是否可见*/
    /*visible可见*/
    /*hidden不可见*/
    visibility: hidden;
}

还有个实例：
http://blog.youkuaiyun.com/zhaihaohao1/article/details/47208303
http://blog.youkuaiyun.com/zhaihaohao1/article/details/47208315