为了账号安全,请及时绑定邮箱和手机立即绑定

网页简单布局之结构与表现原则

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • #引用评论

    1、img本身就是一个元素,也就是传说中的盒子,它也是具有盒子的各种特性的;
    2、img这个盒子是专门用来装图片的,它除了盒子的普通特性,还有一个特别的特性——使图片变得和它的大小一样,也可以说是变形;
    3、如果你给加上别的盒子属性,也会生效的,比如内边距(padding)就是这样,除了内边距占据的空间,剩下的空间,还是会使图片变形的。

    总之,它会让图片充满它的内部空间。

    查看全部
    0 采集 收起 来源:编程挑战

    2018-05-20

  • text-indent:200px 文本缩进

    查看全部
  • 网页换肤:相同的html结构,不同的css样式

    查看全部
    0 采集 收起 来源:练习题

    2018-05-16

  • 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。

    查看全部
    0 采集 收起 来源:练习题

    2018-05-16

  • 先确定结构,从结构上去考虑,通过样式去改变它的样子


    查看全部
  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>智熄</title>

    <style type="text/css">

    body   {margin:0;padding:0;}

    .demo  {width:600px;position:relative;overflow:hidden;}

    .demo .left{width:100px;float:left;}

    .demo .left img {margin-left:20px;}

    .demo .right{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;float:right;text-indent:2em;}

    .demo .right span {position:absolute;top:5px;right:5px;}

            /*            初级                  */

    .demo02  {width:600px;position:relative;overflow:hidden;margin-top:5px;}

    .demo02 img {float:left;margin-left:20px;}

    .demo02 .right{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;float:right;text-indent:2em;}

    .demo02 .right span {position:absolute;top:5px;right:5px;}

            /*                 中级                 */

    .demo03{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;text-indent:2em;margin-left:110px;margin-top:5px;position:relative;}

    .demo03 img{float:left;margin:-20px 0 0 -116px;}

            .demo03 span{position:absolute;top:5px;right:5px;}

            /*                高级                        */

    </style>

    </head>

    <body>

    <div class="demo">

            <div class="left">

             <img src="C:/Users/Administrator/Desktop/案例04 微博对话框/images/head01.jpg"/>

            </div>

            <div class="right">

             <h6>樱桃小丸子</h6>

             <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>

             <span>10分钟前</span>

            </div>

    </div>

         <!-- 。。。。。。。。。初级。。。。。。。。。。。 -->

    <div class="demo02">

            

             <img src="C:/Users/Administrator/Desktop/案例04 微博对话框/images/head01.jpg"/>

            

            <div class="right">

             <h6>樱桃小丸子</h6>

             <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>

             <span>10分钟前</span>

            </div>

    </div>

     <!-- 。。。。。。。。。中级。。。。。。。。。。。 -->

        <div class="demo03">

         <img src="C:/Users/Administrator/Desktop/案例04 微博对话框/images/head01.jpg"/>

         <h6>樱桃小丸子</h6>

             <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>

             <span>10分钟前</span>

        </div>

         <!-- 。。。。。。。。。高级。。。。。。。。。。。 -->

    </body>

    </html>


    查看全部
  • 在网页制作中,面对设计图,网页制作人员一般要遵循的原则是什么?

    先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
    查看全部
    0 采集 收起 来源:练习题

    2018-04-17

  • 三种思想

    查看全部
  • text-indent文本缩进
    查看全部
  • 把原本图片的盒子撑开使用内边距,box不再是图片的大小,从而能够显示出背景的图片,再将外部边距调整即可
    查看全部
    0 采集 收起 来源:编程挑战

    2018-03-03

  • 思路!
    查看全部
  • text-indent:文本缩进,可用于文本定位
    查看全部
  • 思路图
    查看全部
  • 定位文本可用 :text-indent :文本缩进
    查看全部
  • 网页换肤: 相同的html结构,不同的css样式。
    查看全部
    0 采集 收起 来源:练习题

    2018-01-24

举报

0/150
提交
取消
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!