前端开发经验之谈屡写屡忘屡忘屡写终于决定整理起来（不断更新）

最新推荐文章于 2024-07-08 22:40:20 发布

置顶养乐多掺水不加冰

最新推荐文章于 2024-07-08 22:40:20 发布

阅读量168

点赞数

分类专栏：前端开发文章标签： html css3

本文链接：https://blog.csdn.net/qq_41654485/article/details/103928431

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 居中问题

.pic{
    /* position: absolute; */
    width: 1024px;
    margin: 0 auto;
}`

必须设置宽度width为具体的数值 auto都不可，而且不能设置position ！

2. 页面宽度问题

nav{
    
    height: 138px;
    /* width: 100%; */
    margin: 0 0 10px 0;
    padding: 0;
    background-color: bisque;
    /* position:fixed;
    top: 0; */
}

不要设置 width 100% ，不然页面底部会出现滑动条
不声明宽度使劲往父元素挤压

3. 导航栏

#nav_right{
    position:absolute;
    top: 70px;
    right:225px;
}

#nav_right li{
    display:inline-block;
    line-height: 40px;
    font-size: 26px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 50px;
}

		<div id="nav_right">
                <ul>
                    <li>公司介绍</li>
                    <li>公司产品</li>
                    <li>人事招聘</li>
                    <li>关于我们</li>
                </ul>
         </div>

position 是nav_right的样式，而不是 li 的样式，不然会挤在一起，入下图所示☟
li 里的文字都挤在了一起
正确显示应该如下：

关于图片旋转

<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <style>
            body{
                background-color: gray;
            }
            div{
                width: 200px;
                height: 200px;
                background-image: url(https://bkimg.cdn.bcebos.com/pic/faf2b2119313b07e32da01da06d7912396dd8cf9@wm_1,g_7,k_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5);
                background-size: 200px 200px;
                /* border 边框 复合属性 */
                border: solid 30px red;
                border-bottom-width: 60px;
                /* 设置相对定位   relative 相对 */
                position: relative;
                top: 100px;
                left: 300px;
                /* transform 变化  转换 rotate 旋转  degree 度 程度*/
                transform: rotate(30deg);
            }
            div:hover{
                /* scale 比例 因子   */
                transform: rotate(0deg) scale(1.5);
                /* 过渡动画   transition 过渡*/
                /* linear 匀速 */
                transition:transform linear 1s ;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

在这里插入图片描述

清除浮动

            clear: left; 
            /* 清除普通元素上的左浮动元素 */

在这里插入图片描述
一旦设置浮动必须设置明确的宽度，要不然会挤的别的div 没地方了。

养乐多掺水不加冰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发经验之谈屡写屡忘屡忘屡写终于决定整理起来（不断更新）

居中问题——页面底部出现滑动条——关于图片旋转——导航栏
复制链接

扫一扫

专栏目录

前端开发 经验之谈 屡写屡忘 屡忘屡写 终于决定整理起来（不断更新）

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

前端开发经验之谈屡写屡忘屡忘屡写终于决定整理起来（不断更新）