13

最新推荐文章于 2023-04-28 16:31:18 发布

你！鸿章

最新推荐文章于 2023-04-28 16:31:18 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/weixin_43024812/article/details/87198951

版权

浮动
display属性 display: ; block(块级元素带换行符) inline（行内元素无换行符） inline-block none

p.inline
  {
  display:inline;
  }

浮动 float属性 float: ; right left both

img 
{
float:right;
}

清除浮动 clear属性 clear: right left both

img
  {
  float:left;
  clear:both;
  }clear 属性定义了元素的哪边上不允许出现浮动元素

父级添加overfloat属性 overflow:hidden

#fanther {
         border:1px #000 solid;
         overflow:hidden;
}

        visible(默认值 内容不修剪 呈现在盒子外)  hidden(内容被修剪 其余不可见)
        scroll(内容被修剪 但可用滚动条查看其余内容) auto(如果内容被修剪 但可用滚动条查看其余内容)

解决父级边框坍塌的的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="clear.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="mu/photo-1.jpg" alt="日用品"> </div>
    <div class="layer02"><img src="mu/photo-2.jpg" alt="图书"> </div>
    <div class="layer03"><img src="mu/photo-3.jpg" alt="鞋子"> </div>
    <div class="layer04"><img src="mu/photo-1.jpg" alt="日用品"> </div>
    <div class="clear"></div>
</div>
</body>
</html>

3制作热门小镇页面。

    <div class="div1">
     <div class="div">
        <img src="mu/pic_01.jpg" >
         <ul>
             <li><span>风景狙击手</span></li>
             <li>成员：80</li>
             <li>作品：276</li>
         </ul></div>
    <div class="div"> <img src="mu/pic_02.jpg">
         <ul>
             <li><span>叙事感</span></li>
             <li>成员：235</li>
             <li>作品：116</li>
         </ul></div>
    <div class="div"> <img src="mu/pic_03.jpg">
         <ul>
             <li><span>定焦视界</span></li>
             <li>成员：56</li>
             <li>作品：456</li>
         </ul></div>
        <div class="div"> <img src="mu/pic_04.jpg">
         <ul>
             <li><span>中画幅乐园</span></li>
             <li>成员：130</li>
             <li>作品：239</li>
         </ul></div>
            <div class="div"> <img src="mu/pic_05.jpg">
         <ul>
             <li><span>《卡啪》先锋...</span></li>
             <li>成员：78</li>
             <li>作品：125</li>
         </ul></div>
                <div class="div"> <img src="mu/pic_06.jpg">
         <ul>
             <li><span>植物的无声世界</span></li>
             <li>成员：235</li>
             <li>作品：1258</li>
         </ul></div>
    </div>
</div>
</body>
</html>

div{
    width: 800px;
    height: 400px;
    font-size: 16px;
border: 1px black solid;
    padding: 10px;
}
.div{
    border: 1px navajowhite none;
    height: 100px;
    width: 180px;
    float: left;
    margin: 20px;
}
.div1{
    border: none;
}
li{
list-style-type: none;
    line-height:25px;
}
li span{
    color: blue;
}
img{
    float: left;
    margin: 20px;
}

制作名人名言页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="zye2.css" type="text/css">
</head>
<body>
<h1>名人名言</h1>
<p><span>分享名人名言，开始一段触动心灵的智慧之旅跳到内容 </span></p>
    <div class="div3">
    登陆<div class="div3">关于</div>
    名人名言<div class="div3">英文名言（Enlish）</div>
    心理杂志<div class="div3">心理书籍</div>
    专题活动<div class="div3">发表</div>
    </div>
   <div class="div6"></div>
<ul>
    <div class="div2">赞助广告
        <img src="mu/ad.jpg">
        搜索<br><br><input type="text" value="点击搜索"><br><br>
        标签<br><br>
        60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件
        李白 爱情语录 韩寒语录
    </div>
    <li><div class="div1"><strong>心理学经典名言的智慧</strong><br>
        洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</div></li>
    <li><div class="div4"><strong>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”
        。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</strong></div></li>
    <li><div class="div4">创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。<br>

        发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</div>
    </li>
    <li><div class="div1">作者简介</div></li>
    <li><div class="div4"><strong>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，
        那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</strong></div></li>
    <li><div class="div4">如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，
        那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。<br>

       发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</div>
    </li>

    <div class="div1"> 赞助广告<br><img src="mu/ad_2.jpg" width="600"></div>
</ul>


</body>
</html>

div{
    border: 1px black solid;
    height: 2000px;
}

h1{
    font-size: 30px;
    text-indent: 30px;
}

p span{
    font-family: "Times New Roman","楷体";
    text-indent: 40px;
}
 .div3{
    height: 300px;
    width: 300px;
    border: 1px black solid;
    display: inline;
    margin: 10px;
    padding: 6px;
}
 .div6{
    border-bottom:1px #929292 solid;
    line-height:47px;
    text-decoration: none;
    padding: 0px;
    margin-top: 6px;
     width: 1000px;
     height: 0px;
}
 ul li{
     list-style-type: none;
     padding: 5px;
 }
 .div1{
display: block;
     width: 650px;
     height: 100%;
 }
 .div2{
     border: 1px black solid;
     height: 500px;
     width: 250px;
     float: right;
     padding: 20px;
     margin-right: 500px;
 }
.div4{
   display: block;
    width: 650px;
    height: 100%;
    border: none;

}
.div5{
    border: 1px black solid;
    width: 800px;
    height: 1000px;
}